Vue 项目中 嵌入 iframe
<iframe id="iframe" width="100%" height="100%" frameborder="0" :src="embedSrc"></iframe>
报跨域错误
Error in nextTick: "SecurityError: Blocked a frame with origin "https://test-live.cantonfair.org.cn" from accessing a cross-origin frame."
解决方案
如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。
比如,父窗口运行下面的命令,如果iframe窗口不是同源,就会报错。
document.getElementById("iframe").contentWindow.postMessage(message, targetOrigin)
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
如果两个窗口一级域名相同,只是二级域名不同,那么设置document.domain属性,就可以规避同源政策,拿到DOM。
在父窗口的 mounted() 生命周期开头插入
docment.domain='cantonfair.org.cn'
在插入子窗口的mounted() 生命周期开头插入
docment.domain='cantonfair.org.cn'
这样,子窗口就可以 调用父类中的方法,动态设定iframe的高度
// 调用父类中的方法,动态设定iframe的高度,使用三段来进行兜底,控制页面高度
this.$nextTick(() => {
window.parent.setVideoHeight
&&
window.parent.setVideoHeight(document.getElementById('app'))
&& document.getElementById('app').scrollHeight + 2 || 2000
})
这样,子窗口可以使用 发送消息给父窗口
window.parent.postMessage({ msg: 'MessageFromIframePage' }, '*')
父窗口通过 方式监听到 事件
window.addEventListener('message', ({ data }) => {
if (data.msg == 'MessageFromIframePage') {
var frame = document.getElementById('iframe')
frame.contentWindow.postMessage('hideRisk', '*')
}
})
具体参考阮一峰老师的文章
浏览器同源政策及其规避方法
服务器配合
localhost 本地调试环境,运维配合增加 header
X-Frame-Options: 用来告诉浏览器这个网页是否可以放在 Frame 内
X-Frame-Options: DENY
// 全部拒绝
X-Frame-Options: SAMEORIGIN
// 架设的iframe网站 与发出 X-Frame-Options的网站相同
X-Frame-Options: ALLOW-FROM https://xxx
// 这个网页只能放在 https://xxx 架设的 iframe内