本文主要介绍html5关于外部链接嵌入页面的通信问题(postMessage解决跨域通信)。通过示例代码详细介绍，对大家的学习或工作有一定的参考学习价值。让我们和边肖一起学习。

说起来挺简单的。可以直接查询postMessage push和window.addEventListener的用法，最好自己理解。本文仅记录您自己的用法

使用后期消息推送和窗口。添加事件侦听器接收

原则：

发送方使用postMessage方法将消息推送给接收方。第一个参数是推送的内容，第二个参数是允许访问的域名。

接收者通过收听信息来接收数据。

实现跨域就需要有两个不同源的服务器咯

开始

Iframe介绍页面(我也用这个方法)

父页面（发送方）

剧本

//这里是发送和监听

唐山快照优化功能BTN点击(参数){

console.log(1111)

var iframe=document . GetElementbyID(' child frame ')

iframe . ContentWiNDOW . PostMessage({

短信：‘你收到了吗(白天)’，

action : ' light '/action :用户定义的动作参数，用于接受收到消息的判断。

}，' http://localhost :8000/#/')；

}

功能btnClick2(参数){

console.log(2222)

var iframe=document . GetElementbyID(' child frame ')

iframe . ContentWiNDOW . PostMessage({

短信：‘你收到了吗(晚上)’，

动作：‘暗’/动作：用户自定义动作参数，用于接受消息收到的判断。

}，' http://localhost :8000/#/')；

//这是接收子页面返回的监控(当时也被各种文章搞混了。如果只有父页面发送消息，你不需要接收来自子页面的反馈，所以你不需要写这些)

window . addevent listener(' message '，函数(e) {

警报(e.data)

const data=e.data

Console.log(数据，“已获得您的页面数据”)

})

//这些是被踩过的坑

//var I window=iframe . ContentWiNDOW；

//var idoc=I window . document；

//console.log('window '，I window)；//获取iframe的窗口对象

//console.log('document '，idoc)；//获取iframe的文档

//console.log('html '，idoc . document element)；//获取iframe的html

//console.log('head '，idoc . head)；//得到人头

//console.log('body '，idoc . body)；//获取正文

//console . log(window . frames[' my frame ']。窗口)

}

/script

身体

按钮onclick=' btnClick()'单击/按钮

br/

按钮onclick='btnClick2()'单击/按钮

iframe name=' my frame ' src=' http://localhost :8000/#/home 1？type=light ' id=' child frame ' width=' 1400 px ' height=' 800 px '