使用iframe+postMessage跨域操做和通讯

使用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.msg
          console.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