跨域 iframe 通信（页面引入跨域iframe）

爱上布洛格的鸭鸭

已于 2023-04-14 22:12:47 修改

阅读量1.3k

点赞数

分类专栏：前端文章标签：前端

于 2023-04-13 22:39:57 首次发布

本文链接：https://blog.csdn.net/smallpig_code/article/details/130142046

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

场景

如果想要获取跨域iframe中的元素，由于浏览器的同源策略，直接获取是不允许的，形式如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <div>父容器</div>
  <iframe id="iframe" src="跨域地址..."></iframe>
  <script >
    const iframe = document.getElementById('iframe')
    console.log(iframe.contentDocument) // 由于iframe和这个页面不同域，获取不到该元素，并且会报错
</script>
</body>
</html>

解决

需要修改iframe工程中的代码，并且postMessage不能传递iframe中的dom对象

父容器通过postMessage向iframe发送消息，通知iframe

const iframe = document.getElementById('iframe')
iframe.contentWindow?.postMessage({ type: 'needcapture' }, '*'); //1.可以在{ type: 'needcapture' }中传递相关信息

在iframe内部，添加一个postMessage监听器，监听父窗口传递的message
在iframe内部，接收到父窗口的message后，把iframe中的信息传递给父窗口

window.addEventListener('message', (e) => {
  if (e.data && e.data.type === 'needcapture') { //2. 监听到父容器的消息
      window.parent.postMessage( // 3. 传递iframe中的相关信息
        {
          type: 'capture',
          // captureDom: captureDom,
          captureUrl: url,
        },
        '*'
      );
  }
})

父容器也需要添加一个postMessage监听器，监听iframe传递的message

window.addEventListener('message', async (e) => {
  if (e.data && e.data.type === 'capture' && e.data.captureUrl) { //4. 监听到iframe的消息
 		// 可以从e.data中获取相关消息，并执行相关操作
  }
})

其他

当iframe传递Dom对象时，会出现报错：“DataCloneError：无法克隆对象。”
- 退而求其次的解决：把需要对DOM对象的操作写在iframe中，只把执行结果通过postMessage传递给父容器
如果使用的是不跨域的iframe，可以直接获取iframe中的DOM元素，不需要使用postMessage通信

爱上布洛格的鸭鸭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域 iframe 通信（页面引入跨域iframe）

如果使用的是不跨域的iframe，可以直接获取iframe中的DOM元素，不需要使用postMessage通信。需要修改iframe工程中的代码，并且postMessage不能传递iframe中的dom对象。当iframe传递Dom对象时，会出现报错：“DataCloneError：无法克隆对象。如果想要获取跨域iframe中的元素，由于浏览器的同源策略，直接获取是不允许的，形式如下。// 由于iframe和这个页面不同域，获取不到该元素，并且会报错。
复制链接

扫一扫