基本原理:通过window.postMessage() 来发送跨文档信息,使用message来进行监听,当收到跨文档信息后,会触发message事件。 语法:otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow:目标窗口的一个引用,比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象;iframe内嵌网页中的window.par...
1. 子窗口对父窗口发出消息 window.parent.postMessage(参数1为发送的消息数据,参数2为可以接受到消息的源) window.parent.postMessage({ 'type': '自定义事件名', // 自定义事件名 'value':JSON.stringify(ObjData) // 数据,只能是字符串 }, '*'); 2. 父窗口接受消息 window.addEventListener('message'...
首先需要由 parent 发起 postMessage 在 iframe child 页面实例化此类 当 iframe child 收到 message 后可以发动一条信息返回 这样做的好处是 iframe child 页面始终知道 source，即是谁发过来的信息。event.source.postMessage(this._sentBackData, event.origin);而且在返回信息的时候 iframe child 页面已经加载完成...
//b.vue 子级给父级发送数据methods:{sendMessage(){window.parent.postMessage(data,"*");//data传递的数据,“*”跨域的域名 *代表所有}}//a.vue 父级页面接受数据mounted(){//父页面监听发送过来的消息window.addEventListener("message",this.handleMessage);},methods:{//监听回调handleMessage(event){con...
<button onclick="triggerParentEvent()">方法1:调用父亲页面</button> <script> function triggerParentEvent() { debugger const parentWindow = window.parent; parentWindow.postMessage({ event_id: 'my_cors_message', data: { // 这里可以传递多个参数给父页面 ...
mounted(){window.addEventListener('message',this.handleMessage);this.iframeWin=this.$refs.iframe.contentWindow;}, 1. 2. 3. 4. 下面为完整代码 子页面代码: submit(){// 向父vue页面发送信息window.parent.postMessage({data:{code:"success",test:"我是子页面的test!"}},'*');} ...
console.log("data参数===>",data); window.parent.postMessage(data); // 发送消息给父页面 }, 传送门:https://tongyi.aliyun.com/qianwen/share?shareId=adefd352-1ace-443a-b97d-88c8ffd62ae1 https://www.jianshu.com/p/c9f849c90670...
我们可以采用主动获取数据的方式。即 iframe 中也通过window.parent.postMessage告知父页面自己已经加载完毕了,父页面接收到这个信息后,再 postMessage 将数据传给 iframe。 协议不一致 在Chrome 浏览器中,当你使用 https 页面去加载一个 http 的 iframe 的时候,会产生这样的报错: ...
// iframePage.html//给父页面发送消息,data为对象parent.postMessage({msg:'MessageFromIframePage'},'*'); 父页面接收数据: ? 代码语言:javascript 复制 //index.html//回调函数functionreceiveMessageFromIframePage(event){console.log('receiveMessageFromIframePage',event)}//监听message事件window.addEventListener...
'message',function(e){ console.log(e.data) }) // 子页面 window.parent.postMessage('...