应用iframe+postMessage完成网页页面跨域通讯的示例

日期:2021-01-19 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

一般状况下,针对两个不一样网页页面的脚本制作,仅有当实行它们的网页页面坐落于具备同样的协议书(一般为https),端口号号(443为https的默认设置值),和主机时,这两个脚本制作才可以互相通讯。而在具体新项目开发设计全过程中,常常会运用iframe在1个父网页页面中嵌入此外1个子网页页面,或在1个父网页页面中弹出另外一个网页页面,因为同宗对策的限定,父子网页页面之间的脚本制作没法完成通讯,而应用postMessage方式就完成了父子网页页面之间的跨域信息内容传送。

英语的语法:

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

otherWindow:别的网页页面的引入,比如,iframe的contentWindow特性,或实行window.open回到的对话框目标。

message:即将传送到另外一个网页页面的数据信息(能够不会受到限定的将数据信息目标安全性的传输给总体目标对话框而不用自身编码序列化,缘故是由于选用了断构化克隆优化算法)。

targetOrigin:根据对话框的origin特性来特定哪些对话框能接受到信息恶性事件,其值能够是1个标识符串"*"(表明无尽制)或1个Url。仅有当总体目标对话框的协议书、主机详细地址、端口号号和targetOrigin彻底配对时,总体目标对话框才会收到message信息内容。以便避免信息内容泄漏,一般状况下都会特定特殊的url。

transfer:可选主要参数。

应用方式:

1.父网页页面:(url为http://www.b.com/main.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>父网页页面</title>
</head>
<body>
    <iframe id="child" src="http://www.a.com/iframepage.html"></iframe>
    <script>
        window.onload = function(){
            document.getElementById("child").contentWindow.postMessage("首页面传送的信息","http://www.a.com/iframepage.html")
        }
        window.addEventListener('message', function(event){  //父获得子传送的信息
            if(event.origin == "http://www.a.com"){
                //能够在这里做1些逻辑性实际操作
            }
        }, false)
    </script>
</body>
</html>

2.子网页页面(url为http://www.a.com/iframepage.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>子网页页面</title>
</head>
<body>
    <div>这里是子网页页面</div>
    <script>
        window.addEventListener('message', function(event){
           if(event.origin == "http://www.b.com"){
                //能够在这里做1些实际操作
                top.postMessage("子网页页面收到父网页页面传送来的信息", 'http://www.b.com/main.html')//子网页页面向父网页页面传送信息
           }
        }, false);
    </script>
</body>
</html>

postMessage方式被启用时,会在全部网页页面脚本制作实行结束以后像总体目标对话框发放1个 MessageEvent 信息,该MessageEvent信息有4个特性必须留意:

type:表明该message的种类

data:为postMessage的第1个主要参数

origin:表明启用postMessage方式对话框的源

source:纪录启用postMessage方式的对话框目标

非常留意:
1.1定要等A网页页面嵌入的B网页页面载入进行以后,再开展postMessage跨域通讯
2.1定要对origin做分辨,去掉并不是来自身们总体目标对话框的origin,避免来自别的origin的进攻

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。