使用iframe+postMessage跨域操作和通信

场景

1. http://XXX/a.html（自己的）页面要操作http://YYY/b.html（其他域名的） 2. 看了网上很多都是同域名下的，同域名下我自己就改了，还用的上iframe+postMessage？开玩笑

分析

直接操作肯定是没戏，同源策略给你限制的死死的。所以要采用iframe+postMessage

实现

1.后端将b页面转出字符串，生产接口给前端调用（其实还是为了可以操作b页面）

这里需要用到后端，后端拿到b页面，将b页面生存字符串，然后还需要将页面所引用相对路径替换成绝对路径，不如页面展示之后都是报错，无法往下执行.比如页面引入了一个图片 <img src='./a.png' />,需要替换成<img src='http://YYY/a.png' /> js ，css同理

2.在a页面的域名下创建一个新页面c.html，用来展示b页面转换而成的字符串，c页面操作如下

<div id='patch'></div>var patchNode = document.getElementById('patch')var objE = document.createElement("div")objE.innerHTML = '请求下来的字符串'patchNode.appendChild(objE)

3.a页面采用iframe加载c页面

<iframe id="iframe_child" src="./c.html"></iframe>

4.a，c页面采用postMessage通信

a页面操作如下 发生内容给iframe$(`#iframe_child`).on('load', function(){ // 和iframe通信var data = {act: 'article', // 自定义的消息类型。msg: {subject: '111'}};// 不限制域名则填写 * 星号$(`#iframe_child`).contentWindow.postMessage(data, '*')});// 对来自 c.html 的消息进行处理window.addEventListener('message', function(e){if (e.data.act == 'response') {console.log(`进行接收之后的操作---${e.data.msg.answer}`)}}, false)c页面操作如下window.addEventListener('message', function(e){if (e.data.act == 'article') {var article = e.data.msgconsole.log(`接收的信息为`${article.subject})window.parent.postMessage({ // 传递给父页面单次操作完毕act: 'response', msg: {answer: '我收到信息了'}}, '*');} else {console.log('未定义的消息: '+ e.data.act)}}, false);在c页面直接操作b页面的字符串生成的dom，间接实现a操作b页面

5.总结

1.为什么不直接在a页面展示字符串，还要嵌套一个iframe？

a页面安全
如果b页面有跳转，报错等问题也影响不到a页面（主要是我做的时候发现这两个页面引用了同一个js，因为js引用顺序问题导致b页面报错，所以才引入的iframe′⌒`）

2.为啥要把b页面转出字符串
为了能操作的无奈之举，这么操作是为了将跨域的页面b转成同域名页面c，在c操作b的dom

转载于:https://www.cnblogs.com/liuhuanwen/p/11341148.html

总结

以上是生活随笔为你收集整理的使用iframe+postMessage跨域操作和通信的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。