iframe中涉及父子页面跨域问题

Posted 2022-03-14 sweeeper

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
举几个例子：

1. http://a.123.com/index.html和http://a.123.com/index.js非跨域，它们有相同的域名，协议和端口。
2. http://a.123.com/index.html和http://b.123.com/index.js跨域，相同的端口、协议，但是域名不同（a.123.com和b.123.com）。
3. http://a.123.com:8080/index.html和http://a.123.com:8081/index.js跨域，相同的域名、协议，但是端口不同（8080和8081）。
4. http://a.123.com/index.html和https://a.123.com/index.js跨域跨域，相同的域名、端口，但是协议不同（http和https）。

 一，子向父传数据：

【发送消息】

otherWindow.postMessage(message, targetOrigin, [transfer])

• otherWindow
  其他窗口的一个引用，写的是你要通信的window对象。
  例如在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。
• message
  需要传递的数据，字符串或者对象都可以。
• targetOrigin
  表示目标窗口的源，协议+域名+端口号，如果设置为“*”，则表示可以传递给任意窗口。在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如：

window.parent.postMessage(‘hello world‘,‘http://a.123.com:8080/index.html‘)

只有父窗口是http://a.123.com:8080时才会接受到传递的消息。

• [transfer]
  可选参数。是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。我们一般很少用到。

【接收消息】

window.addEventListener(‘message‘, function (e) 
    console.log(e.data)  //e.data为传递过来的数据
    console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
    console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
)

 

 

iframe传递关闭命令

 

父窗口接收到命令将iframe关闭

二， 父向子传数据

共两个页面，

页面1：www.a.com/a.html 
页面2：www.b.com/b.html

实现目标：两个网站页面实现跨域相互通信 
当前例子依赖于 jQuery 3.0

页面代码：www.a.com/a.html

<iframe id="myIframe" src="http://www.b.com/b.html"></iframe>
<script>
var $myIframe = $(‘#myIframe‘);
// 注意：必须是在框架内容加载完成后才能触发 message 事件哦
$myIframe.on(‘load‘, function()
    var data = 
        act: ‘article‘,  // 自定义的消息类型、行为，用于switch条件判断等。。
        msg: 
            subject: ‘跨域通信消息收到了有木有~‘, 
            author: ‘CSDN-神神的蜗牛‘
        
    ;
    // 不限制域名则填写 * 星号, 否则请填写对应域名如 http://www.b.com
    $myIframe[0].contentWindow.postMessage(data, ‘*‘);
);

// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener(‘message‘, function(e)
    if (e.data.act == ‘response‘) 
        alert(e.data.msg.answer);
     else 
        alert(‘未定义的消息: ‘+ e.data.act);
    
, false);
</script>

页面代码：www.b.com/b.html

<script>
// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener(‘message‘, function(e)
    if (e.data.act == ‘article‘) 
        alert(e.data.msg.subject);
        // 向父窗框返回响应结果
        window.parent.postMessage( 
            act: ‘response‘, 
            msg: 
                answer: ‘我接收到啦！‘
            
        , ‘*‘);
     else 
        alert(‘未定义的消息: ‘+ e.data.act);
    
, false);
</script>