Web PostMessage
postMessage APIH5新加的内容,支持ie8及其以上.却可用于实现不同源之间消息通信使用场景a标签中有iframe,iframe引用b页面,实现ab页面的相互通信需要两个页面相互配合const iframe = document.querySelector('iframe');iframe.contentWindow.onmessage...
·
postMessage API
|
使用场景
需要两个页面相互配合
|
const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
if (e.origin !== 'https://expected-origin.com') {
return;
}
e.source.postMessage('Ack!', e.origin);
};
eg.
btn.onclick = function(){
//当访问的页面B为同源页面时,可以直接进行操作,但是同源文件必须有相关权限
//如果方位的页面B为非同源文件时,显示是没有问题的,但是要在A页面操作B页面,就要解决跨越问题.
//参数1 往B页面传送的信息.
//参数2 B页面所在的域
win.contentWindow.postMessage("info","http://10.90.84.246");
};
window.addEventListener("message",function(ev){
var ev = ev || event;
//ev.data 表示其他页面传过来得内容
//ev.origin 表示消息源的域
//ev.target 当前页面的window对象
//ev.srcElement 消息源的window对象
// console.log(ev.data);
if(ev.data=="info"){
var p = document.getElementById("p");
p.style.fontSize = "40px";
p.style.color = "red";
document.body.style.background = "yellow";
}
},false);
更多推荐
已为社区贡献2条内容
所有评论(0)