HTML5窗口间同域和跨域的通信

最新推荐文章于 2023-04-04 12:07:41 发布

前端_七月

最新推荐文章于 2023-04-04 12:07:41 发布

阅读量1.1k

点赞数 2

分类专栏：同域跨域

本文链接：https://blog.csdn.net/weixin_41319237/article/details/83023462

版权

同域跨域专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5窗口间同域和跨域的通信

前端页面间的通讯问题：

页面和其他打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递

同域页面之间的通讯：

通过发起的url进行通讯；
通过本地存储或者cookie进行实现；

跨域页面之间的通讯：

可以通过发起的url进行通讯；
通过html5的window.postMessage()和window.onMessage(),配合iframe来实现；

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

两个参数：

data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

onMessage()来接受数据，使用一个回调函数来接收数据

demo实现：

“a.html”:

function postfn() {

var $dom = document.getElementById('iframeDom');

var targetOrigin = '*';

var data = {

name: "天气真好"

}; //传输name名称

var str = JSON.stringify(data); //将json对象转成json字符串

$dom.contentWindow.postMessage(str, targetOrigin);

}

</script>

<body>

<button type="" onclick="postfn()">点击传递数据</button>

</body>

“b.html”:

if (window.attachEvent) {

window.attachEvent('onmessage', function(event) {

var getData = JSON.parse(event.data); //将接收的json字符串转成对象

console.log(getData)

});

} else {

window.onmessage = function(event) { //注册message事件

var getData = JSON.parse(event.data); //将接收的json字符串转成对象

console.log(getData)

}

</script>

前端_七月

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5窗口间同域和跨域的通信

HTML5窗口间同域和跨域的通信前端页面间的通讯问题：页面和其他打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的iframe消息传递同域页面之间的通讯：通过发起的url进行通讯；通过本地存储或者cookie进行实现；跨域页面之间的通讯：可以通过发起的url进行通讯；通过html5的window.postMessage()和window.o...
复制链接

扫一扫

专栏目录