探讨了在网页开发中，使用postMessage进行跨窗口传值的方法及遇到的问题。通过实例展示了如何从一个窗口向另一个窗口发送数据，并分析了同步与异步消息传递的挑战。
在开发中我们会遇到俩个窗口传值，我一般会使用俩种传值方式，一、使用地址栏传值，然后另一个窗口取地址栏内容解析。二、使用sessionStorage进行传值。但最近看面试题发现还可以使用postMessage传值，但是遇到一个坑，具体原因本人也是没有找出，只是做了简单分析，希望看到这篇文章的大佬帮忙解决。
第一个页面的代码如下
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
<button id="btn">dianji
window.sessionStorage
document.getElementById('btn').onclick =function () {
var popup = window.open('test2.html');
/// When the popup has fully loaded, if not blocked by a popup blocker:
setTimeout(function() {
// 当前窗口向目标源传数据
popup.postMessage('asdasd', '*');
}, 0);
}
</html>
第二个页面的代码如下：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
window.addEventListener('message', function(e) {
alert(e.data)
// console.log(e.source === window.opener); // true
});
</html>
现在我与到的问题是，如果第一个页面去掉setTimeout 第二个页面就会触发不了message事件。据我猜测可能是如果去掉第一个页面的setTimeout 可能页面会直接发送消息，但此时第二个页面还在加载中，但消息已经发送过，所以触发不了。还希望看见此篇文章的大佬解决
扫一扫
3669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
