iframe 跨域受同源策略限制子父窗口之间无法通过脚本直接操作这时就需要通过跨域解决本文记录一下在本地测试

针对iframe的使用与属性配置详情参考： developer.mozilla.org/zh-CN/docs/…

此处重点记录一下 iframe 脚本

MDN 中提到 :

受同源策略限制子父窗口之间无法通过脚本直接操作这时就需要通过跨域解决

iframe 跨域有两种场景：

主域相同子域不同
域名完全不同

主域相同子域不同

对于主域相同子域不同的两个页面，我们可以通过设置两个窗口 document.domain 是他们的值一致例如：网页a local-platform.apps.com/ 和网页b frame-test.apps.com/ 网页a中使用iframe 嵌套网页b 此时需要在a页面和 b页面分别设置 document.domain = 'apps.com' 即可

如何在本地测试：首先在本地起了两个服务分别是： http://localhost:8000 和 http://localhost:8080 然后在本地hosts文件中分别给这个两个服务提供域名 mac 通过：

cd /private/etc
sudo vim hosts

进入 hosts 文件并添加

然后通过nginx 监听两个server 配置如下

此时可以通过 local-platform.apps.com/ 来访问 http://localhost:8000 通过 frame-test.apps.com/ 访问 http://localhost:8080

在 local-platform.apps.com/ 添加引入 iframe

<iframe id="frame-test" class="frame-test" src="http://frame-test.apps.com" frameborder="0"></iframe>

并分别设置 window.document.domain = 'apps.com'

然后就可以通过脚本操作 iframe 嵌套的网页内容了

域名完全不同

如果域名完全不同可以采用 window.postMessage 来实现窗口间交互关于postMessage的使用这里暂不记录可以查阅资料

案例一父窗口向子窗口发送数据

在父窗口发送代码如下

const frame = document.getElementById('frame-test') // 获取iframe
frame.onload = () => {
  const frameWin = frame.contentWindow
  frameWin.postMessage({ msg: 'test-frame' }, 'http://frame-test.apps.com') 
}

子窗口接受

window.addEventListener('message', (e)=>{
  console.log('App.vue: 46 >>>>> ', e.data)
})

案例二

子窗口发送数据

window.parent.postMessage({name: 'frame-test-message'}, 'http://local-platform.apps.com')

父窗口接受数据

window.addEventListener('message', (e) => {
  console.log('allProject.vue: 235 >>>>> ', e.data)
})