文章目录
iframe 优缺点
优点:
- 能够原封不动的把嵌入的网页展现出来. 常用的如
bilibili,youtobe视频播放嵌入 👉 Switch
缺点:
- iframe会堵塞主页面的Onload事件
- iframe和主页面共享连接池, 而浏览器对相同域的连接有限制, 所以会影响页面的并行加载
- 无法被一些搜索引擎索引到, 影响SEO
父子页面间如何交互?
同域
<iframe id="child1" name="child1" src="child1.html" frameborder="0"></iframe>
document.getElementById('child1').contentWindow.childFn() // parent call child
// 单层iframe. 多层时考虑: window.frameElement, window.top(最顶层父窗口);
// 当页面中不存iframe时, 这三者均值当前窗口自身: window.self
window.parent.parentFn() // child call parent
跨域
H5提供的跨域解决方案(IE6,7除外): https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
方法postMessage ➡️ 用于向对方窗口发送MessageEvent消息:
https://developer.mozilla.org/zh-CN/docs/Web/API/MessageEvent
// child post message to parent
window.parent.postMessage(
{
action: "cmd",
info: {
msg: "HI"
}
},
// scheme://host:port/path: /path会被忽略
// 该参数是为了安全考虑. 建议都指定. 当然也可以填写'*',这样可以传递给任意窗口.
'http://example.org:8080'
);
// parent listen to the message or vice versa
window.addEventListener('message', function(event){
// scheme://host:port/path: /path会被忽略
if (event.origin !== 'http://example.org:8080') {
return
}
switch (event.data.action) {
case 'cmd':
event.source.postMessage('...', event.origin) // response
break
default:
// 也可以发送一个 XMLHttpRequest
break
}
})
// parent send message to child
document.getElementById('child1').contentWindow.postMessage('msg','*');
