一个类似弹窗的表格展示
在第三方的系统上展示对应的表格信息
“
➢ 设计
实现方式考虑是iframe
放置在第三方
涉及点击弹出提示(需要交互和参数)
使用postMessage
实现iframe
通信
➢ 实现
父页面放置一个iframe
,设置id和name
,加载不同域和端口的网页
<iframe
src="http://192.168.73.1:8082/childOne.html"
id="childOne"
name="childOne"
width="800"
height="600"
></iframe>
父页面获取iframe
元素(兼容老系统使用var
)
//获取iframe元素
var iFrame = document.getElementById("childOne").contentWindow;
父页面向iframe
子页面发送消息
第一个参数是传递的参数,可以是任意类型
第二个参数是要发送给的url
,如果不一致则发送失败,*
是所有
iFrame.postMessage("msg", "*");
子页面接收
//监听message事件
window.addEventListener("message", function(data){
// do soming
console.log(data)
}, false);
➢ 参考地址: