1.简述基本用法
HTML内联框架元素 () 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到 当前页面
<iframe id="iframeId" title="测试" width="300" height="200" src="https://juejin.cn/" />
2.iframe通信那些事
1. 利用nginx服务进行转发，解决iframe跨域 ``
2. iframe和父页面之间的数据传递
Tips:
- html页面给iframe发送消息时，如果需要在页面初始化发送消息，即需要在onload事件发送消 息，防止iframe页面未初始化完成导致发送消息失败
- iframe给html发送消息，需要拿到父页面的window, 即可以在html发送消息给iframe页面时候，保存event
// 1.父页面代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父页面</title>
</head>
<body>
<p onclick="sendIframeMsg()">主页面</p>
<iframe
name="iframeId"
id="iframeId"
src="iframe.html"
width="400px"
height="400px"
/>
<script type="text/javascript">
// 父页面监听子页面iframe传递的消息
window.addEventListener('message', function(event) {
const { data } = event
console.log('接收iframe页面发送的消息', data)
}, false)
// 主页面发送消息给iframe页面
function sendIframeMsg () {
var receiver = document.getElementById('iframeId').contentWindow;
const origin = '<http://127.0.0.1:8848/apiTest/iframe.html>' // iframe地址
receiver.postMessage('sendMessage from iframe', origin)
}
</script>
</body>
</html>
// 2.iframe页面代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe</title>
</head>
<body>
<p onclick="sendMessage()">iframe页面</p>
<script type="text/javascript">
var parentEvent = null // 当前变量很重要
// 子页面触发事件给父页面发送消息
function sendMessage() {
parentEvent.source.postMessage('iframe发送消息给父页面',parentEvent.origin);
}
// iframe页面监听html页面发送的消息
window.addEventListener('message', function(event){
const { origin, data, } = event
parentEvent = event
}, false)
</script>
</body>
</html>
3.和a标签的联动
和a标签的联动
<a src="./test.html" taeget="iframeId">业务办理</a> // iframe部分代码 <iframe name="iframeId" id="iframeId" src="./test.html"></iframe>
1.iframe页面的window.name === 父页面（子页面）的window.name 时，
a标签的target设置为iframe的name或者是ID时，点击a标签，iframe的内容为a标签设置的src属性的内容。
2.iframe页面的window.name !== 父页面（子页面）的window.name 时,
此时由于不想等，导致当前a标签的target会失效，导致点击a标签时，浏览器会新建标签页面
因为这个问题导致我在客户现场三天
4.结尾：
经过上述的问题，自己对于iframe理解的更加深刻了，希望自己坚持，加油加油
