艾伦说过，一切学习都是从模仿开始，我也不例外。下面我要说的是两个页面之间的通信问题。
假设现有a.html 需要与b.html进行数据交互，a通过iframe加载b.html
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<iframe src="b.html" style="width: 100%; height: 50%;"></iframe>
<button>click</button>
<script type="text/javascript">
var btn = document.querySelector(‘button‘);
btn.addEventListener(‘click‘,function(e){
var message = ‘hello‘;
window.parent.frames[0].postMessage(message, ‘*‘);
});
</script>
</body>
</html>
b.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="pms.js"></script>
<title>b</title>
</head>
<body>
here is the content about iframe b
<div></div>
</body>
<script type="text/javascript">
window.onload = function(){
var div = document.querySelector(‘div‘);
window.addEventListener(‘message‘,function(e){
//div.innerHTML = e.data;
if(e.data==‘hello‘){
data.hello(e.data)
}
})
}
</script>
</html>
我们把消息数据放在一个单独的文件pms.js中。
pms.js:
var data = {
hello : function(e){
alert(55555)
}
};
a是我们目标页面，现在要发一个hello的消息到b页面。b页面收消息之后，检查消息内容，如果是hello，则执行消息中指定的动作，比如运行一个函数。
原理就是这样，利用message事件进行消息传递，然后把消息的动作放在一个单独的文件中，如pms.js
在项目中有遇到类似情况的，请自行对照试验，就可以看到效果。
两个iframe之间的异步通信,布布扣,bubuko.com
时间： 2024-12-21 00:52:41