iframe.contentWindow.postMessage({type:'login', userInfo:{uname:'jay',address:'xxx'}},'*'); } iframe子页面 mounted () { window.addEventListener('message',this.handleMessage,false); }, methods: { handleMessage (event) {if(event.data.type =='login') {constuserInfo =event.data.userInfo;/...
<scripttype="text/javascript">//接收父页面发送的内容window.addEventListener('message',function(e) { console.log(e.data)//{message: "子页面应该接收的消息"}//接收内容后,我们也可以给父页面发消息window.parent.postMessage('父页面:我接收到消息了','/'); },false);</script> message事件 data 包...
postMessage是HTML5中引入的一种跨文档通信方式,允许不同源的文档之间进行安全的数据交换。在iframe通信中,postMessage提供了一种机制,使得一个窗口(如一个iframe)可以发送数据到另一个窗口(如它的父页面),而无需担心同源策略的限制。 2. 如何在父页面和iframe之间使用postMessage发送消息?
我们知道postMessage是挂载在window对象上的,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframe的window对象,然后调用postMessage方法,相当于给子页面发送了一条消息。 postMessage方法第一个参数是要发送的数据,可以是任何原始类型的数据。 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前,第一...
用postMessage 来进行两个不同 domain 之间的跨域内容交换已经是老生常谈的基本操作。 一般的做法是在其中一个 domain 的页面中镶嵌另一个跨域的 iframe,然后用 postMessage 来进行两者的交互。 但我们经常会遇到类似的错误 ❌ parent:http://127.0.0.1/cross-domain/ ...
考虑到两个系统是不同的端口号,存在跨域问题,这时发现HTML5新增了一个API-window.postMessage(),于是就决定用iframe结合window.postMessage()实现 在页面中嵌入一个iframe,将图片管理系统嵌入到当前的管理系统中,结合window.postMessage()实现跨域通信 项目背景 ...
iframe通信—postMessage 通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号(443 为 https 的默认值),以及两个页面的域名Document.domain设置为相同的值时,这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制,可以实现跨源通信。
postMessage使用 假设有一个父页面indexPage.html, 子页面iframePage.html 一、父页面向子页面发送消息 // 父页面index.html//获取iframe元素iFrame =document.getElementById('iframe')//iframe加载完毕后再发送消息,否则子页面接收不到messageiFrame.onload=function(){//iframe加载完立即发送一条消息iFrame.contentWin...
channel.port1.onmessage = function(e) { msgDom.innerText += e.data; } btnDom.addEventListener('click',function() { let msg = inputDom.value; console.log(555,msg); channel.port1.postMessage(msg) },false);</script> 子页面代码 <html lang="en"><head> <meta charset="UTF-8"> <meta...
最近遇到一个项目,用了iframe嵌入了另一个项目作为内容区,两个项目之间需要进行信息传递,如果用window.top的话只支持同一个域,于是便想到了postMessage来进行跨域通信。 1.postMessage基本用法 【发送消息】 1 otherWindow.postMessage(message, targetOrigin, [transfer]) ...