iframe和父页面相互传值,并兼容跨域问题 · 前端

otherWindow.postMessage(message, targetOrigin, [transfer]); 方法用于安全地实现跨源通信。 | 参数 | 说明 | | :-- | :-- | | otherWindow | 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 | | message | 将要发送到其他 window的数据。 | | targetOrigin | 指定哪些窗口能接收到消息事件，其值可以是\*（表示无限制）或者一个 URI。 | | transfer | 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。 | ## 父页面向子iframe传值 (在父页面的js里获取到iframe,然后向iframe传值,然后这么写就行了,第一个参数是需要传的数据,也可以是对象) ``` var frame = document.getElementsByClassName('interfaceEditor')[0]; frame.contentWindow. postMessage ("数据", '*'); ``` (在子iframe的js里监听获取父页面传的值) ``` window. addEventListener ('message', function(event) { //event.data获取传过来的数据 console.log(event.data) }); ``` ## 子iframe向父页面传值 (在子iframe里面这么写. data是数据, 第二参数是你父页面的地址) ``` window.parent.postMessage(data,'http://localhost/'); ``` (在父页面这么写,e.data就是子页面传的数据.) ``` window.addEventListener('message',function(e){ var Date=e.data; console.log(Date) },false); ``` 第二种方式子页面 ``` <body> 子级：B页面<br/> <button id="b_button">B页面发送A页面数据</button><br/> <script> document.getElementById("b_button").onclick = function(){ var param = {'name':'admin'}; window.parent.postMessage(param,'*'); } </script> </body> ``` 父页面 ``` <body> 父级：A页面<br/><br/> <iframe src="http://www.genetek.cc/iframe/b.html" width="500px" height="200px" id="iframe"></iframe> <script> window.addEventListener('message', function(e) { alert(JSON.stringify(e.data)); console.log('获取子级B页面返回值:'); console.log(e.data); }) </script> </body> ```