iframe及跨域通信postMessage()

招来红月

已于 2024-08-22 19:43:27 修改

阅读量3.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： iframe window.postMessage 跨域通信

于 2018-05-03 13:29:48 首次发布

本文链接：https://blog.youkuaiyun.com/divpoxiao/article/details/80175328

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了window.postMessage()方法的使用，包括如何在父子页面间传递信息，以及如何实现动态创建并操作iframe。重点阐述了如何利用postMessage()进行跨域通信，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 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';
}