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

2024-03-14 08:40:01 分类：前端热度：69 评论： 0

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

html"><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>javascript">
  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>