iframe跨域控制失败解决方法（子页面可改动的情况下）

最新推荐文章于 2024-01-09 10:13:03 发布

qq_37299525

最新推荐文章于 2024-01-09 10:13:03 发布

阅读量1.7k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_37299525/article/details/129081209

版权

自己项目在浏览器预览的页面A

<iframe id="them" src="http://127.0.0.1:2000/跨域的子页面B.html"></iframe>

跨域的子页面B 需要添加一下代码

<iframe id="them" src="http://127.0.0.1:1000/孙页面C.html"></iframe>
<script>
  function receiveMessageFromIframePage(event) {
    console.log('rootParentLocation', event.data.rootParentLocation)
    new Function(...event.data.func)(document)
  }

  //监听message事件
  window.addEventListener("message", receiveMessageFromIframePage, false);
</script>

自己的孙页面C

<script>
  parent.postMessage({
    // rootParentLocation: top.top?.location?.href,
    func: ['dom', `
      dom.body.style.transform = 'scale(0.8)'
      dom.body.style.transformOrigin = '0 0'
    `]
  }, '*');
</script>