应用window.postMessage()完成跨域音讯通报(JavaScript)

申明

window.postMessage()要领能够平安地完成Window对象之间的跨域通讯。比方,在一个页面和它天生的弹出窗口之间,或者是页面和嵌入个中的iframe之间。

通常情况下,差别页面上的剧本许可相互接见,当且仅当它们源自的页面同享雷同的协定,端口号和主机(也称为“同源战略”)。window.postMessage()供应了一个受控的机制来平安地躲避这个限定(假如运用妥当的话)。

一般来说,一个窗口能够获得对另一个窗口的援用(比方,经由过程targetWindow=window.opener),然后运用targetWindow.postMessage()在其上派发MessageEvent。吸收窗口随后可根据须要自行处理此事宜。通报给window.postMessage()的参数经由过程事宜对象暴露给吸收窗口。

发送端

postMessage顺序

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"!", "http://res.42du.cn");
}); 

发送音讯的基础语法:

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow

targetWindow就是吸收音讯的窗口的援用。 获得该援用的要领包含:

  • Window.open
  • Window.opener
  • HTMLIFrameElement.contentWindow
  • Window.parent
  • Window.frames +索引值

message

message就是要发送到目的窗口的音讯。 数据运用结构化克隆算法举行序列化。 这意味着我们能够将林林总总的数据对象平安地通报到目的窗口,而无需本身对其举行序列化。

targetOrigin

targetOrigin就是指定目的窗口的泉源,必需与音讯发送目的相一致,能够是字符串“”或URI。 示意任何目的窗口都可吸收,为平安起见,请一定要明白提定吸收方的URI。

transfer

transfer是可选参数

吸收端

目的窗口经由过程实行下面的JavaScript来侦听发送过来的音讯:

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}

event对象有三个属性,分别是origin,data和source。event.data示意吸收到的音讯;event.origin示意postMessage的发送泉源,包含协定,域名和端口;event.source示意发送音讯的窗口对象的援用; 我们能够用这个援用来竖立两个差别泉源的窗口之间的双向通讯。

完全顺序

发送顺序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-window.postMessage()跨域音讯通报</title>
</head>
<body>
<div>
    <input id="text" type="text" value="42度空间" />
    <button id="send" >发送音讯</button>
</div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60">
    <p>你的浏览器不支持IFrame。</p>
</iframe>
<script>
    window.onload = function() {
        var receiver = document.getElementById('receiver').contentWindow;
        var btn = document.getElementById('send');
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            var val = document.getElementById('text').value;
            receiver.postMessage("Hello "+val+"!", "http://res.42du.cn");
        });
    }
</script>
</body>
</html>

吸收顺序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-从www.42du.cn吸收音讯</title>
</head>
<body>
<div id="message">
    Hello World!
</div>
<script>
    window.onload = function() {
        var messageEle = document.getElementById('message');
        window.addEventListener('message', function (e) {
            alert(e.origin);
            if (e.origin !== "http://www.42du.cn") {
                return;
            }
            messageEle.innerHTML = "从"+ e.origin +"收到音讯: " + e.data;
        });
    }
</script>
</body>
</html>

演示地点

[跨域音讯通报](http://www.42du.cn/paper/11

    原文作者:毛瑞
    原文地址: https://segmentfault.com/a/1190000013619347
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞