码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-04 11:43:52      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:nbsp   web   tps   数据   协议   问题   所有权   框架   发送   

什么是跨域?

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

  1. http://a.123.com/index.htmlhttp://a.123.com/index.js非跨域,它们有相同的域名,协议和端口。
  2. http://a.123.com/index.htmlhttp://b.123.com/index.js跨域,相同的端口、协议,但是域名不同(a.123.comb.123.com)。
  3. http://a.123.com:8080/index.htmlhttp://a.123.com:8081/index.js跨域,相同的域名、协议,但是端口不同(8080和8081)。
  4. http://a.123.com/index.htmlhttps://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>

 

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

标签:nbsp   web   tps   数据   协议   问题   所有权   框架   发送   

原文地址:https://www.cnblogs.com/sweeeper/p/11131000.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!