使用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
  • 相关文章

    HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
    HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
    HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
    在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
    HTML(Hypertext Markup Language,超文本标记语言)是一种用...
    外链是指在一个网页中添加一个指向其他网站的链接,用户可以...