一、 window.postMessage()
window.postMessage(info,origin)方法可以接受两个参数
1.info:要传递的数据,可以为json格式(因为我比较喜欢json格式的)部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化
2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,也可以建参数设置为"*",这样可以传递给任意窗口。
二、子页面向父级页面传递信息及子页面接收信息
//子页面向父级页面传递信息
//传递的参数随意 看个人理解
window.onload = function() {
window.parent.postMessage({ //与父级页面通讯方法
type: "onload", //父级接收的信息
data:"do something" //如果传递的信息为object(数组或者json格式)需要转换成字符串
}, '*');
}
//object转换字符串方法:JSON.stringify(obj)
//子页面接收信息 与父页面接收信息相同
window.addEventListener('message', function(e) {
console.log(e) //这里打印一下看里面的内容
var data = e.data;
if(data && data.type && data.type == 'set') { //判断一下
conosle.log(data)
console.log(data.data); //打印出来看一下
// do something
}
},false)
三、父级页面监听信息及父页面向子页面传递信息
//父页面接收信息 js 监听事件 事件名称'message'
window.addEventListener('message', function(e) {
console.log(e) //这里打印一下看里面的内容
var data = e.data;
if(data && data.type && data.type == 'onload') { //判断一下
conosle.log(data)
console.log(data.data); //打印出来看一下
// do something
}
},false)
// 父页面向子页面传递信息 contentWindow.postMessage方法与window.postMessage相似
var frame=document.getElementById("frame");
frame.contentWindow.postMessage({
type: "set",
content:"hello world"
}, "*");
四、动态创建iframe及设置iframe内容
//创建iframe
var box=document.getElementById('box');
//方法一 字符串方式写入
var box.innerHtml='<iframe frameborder="0" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0" hspace="0" vspace="0" allowtransparency="true"></iframe>';
方法二 动态创建(这种方式要写的东西有点长)
var Frame = document.createElement('iframe');
Frame.height = '100%';
Frame.width = '100%';
Frame.scrolling = 'no';
Frame.setAttribute('frameborder', 0);
Frame.setAttribute('hspace', 0);
Frame.setAttribute('vspace', 0);
Frame.setAttribute('allowtransparency', true);
box.appendChild(Frame);
//获取iframe的win doc 可以给iframe设置一个id 方便查找
var iwindow = box.getElementsByTagName('iframe')[0].contentWindow;
var idoc = iwindow.document;
//下面用write写入就可以了
idoc.write('hello world');
//关闭iframe的doc 写入
idoc.close();
//然后我们还可以再次设置iframe的属性 比如高度 让iframe不出现滚动条使 适应内容的高度
iwindow.onload = function() {
Frame.height= idoc.documentElement.scrollHeight + 15 + 'px';
}