window.open.postMessage用法

postMessage的基本用法
postMessage可以解决跨域的传值问题,一般可以认为是父页面向子页面传递消息。

发送数据(父页面)

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:其他窗口的一个引用,可以是window.open(‘xxx’)、window.opener等等(目前只用过这两种)。
message:将要发送的数据,基本上什么都可以放。
targetOrigin:目标源,通过窗口的origin属性指定哪些窗口可以接受消息,其值可以是字符串’*'或者一个URL(协议+主机+端口号[+URL])。如果清楚知道消息发送到哪里,填入确定的URL可以防止消息被恶意第三方截取。
transfer:没有使用过这个属性,可选择项,官方说明:是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

接受数据(子页面):
window.addEventListener(“message”, receiveMessage, false);
观察别人的文章博客说明,最好使用上面的操作,如果通过onmessage监听接受数据,有些浏览器无法识别。

正文:
window.open打开新页面时需要一些时间来加载,直接window.open.postMessage有可能页面没加载完就发送,子页面的事件监听尚未设置,消息传输失败。

  1. onload
window.open('xxx').onload = () => {
	otherWindow.postMessage(message, targetOrigin, [transfer]);
}

页面加载完毕再进行post,我感觉思路挺正确的,不知为何,我失败了

  1. setTimeout
setTimeout(() => winopen.postMessage(this.userSession, targetUrl), 3000);

设置时间等页面刷新完再发送消息,成功了,但是在给领导演示的过程中翻车了,因为页面刷新太久了o(╥﹏╥)o,所以等待的时间很难控制。

  1. setInterval
this.timeOfmsg = setInterval(() => {
      winopen.postMessage(this.userSession, targetUrl);
    }, 3000);

通过定时器,不断发送,无论页面刷新多久都能收到消息啦(^-^)V,但是一直搞一个定时器占用了内存,于是在接受页面中设置了反馈消息。

window.addEventListener('message', (e) => {
      if ('xxx') {
        window.opener.postMessage('getMsg', '*');
      }
    }, false);

然后在发送页面同样设置消息监听,收到消息后清空定时器。

window.addEventListener('message', (e) => {
      if (e.data === 'getMsg') {
        clearInterval(this.timeOfmsg);
      }
    });
07-03
汽车尾灯显示控制电路multisim仿真源文件+设计文档说明,multisim10及以上版本的软件可以正常打开仿真。 1. 设计内容要求 设汽车尾部左右两侧各有3个指示灯(用发光二极管模拟),有四种显示模式如下: 汽车正常运行时,尾灯全部熄灭; 右转弯时,右侧3个指示灯按右循环顺序点亮,每灯只亮0.5s; 左转弯时,左侧3个指示灯按左循环顺序点亮,每灯只亮0.5s; 临时刹车时,左右两侧所有指示灯同时闪烁。 2. 方案分析 汽车尾灯由3个按键控制,分别对应着运行、左转、右转、刹车功能。用开关选择控制汽车正常运行、左转弯、右转弯和刹车时尾灯的情况。 本次设计方案主要有四个模块:脉冲发生电路、开关控制电路、三进制电路和译码驱动电路。通过把这四个模块组合连接来实现汽车尾灯控制。首先,通过555定时器构成的多谐振荡器产生脉冲信号,该脉冲信号用于提供给74LS160d构成的三进制计数器和开关控制电路中的三输入与非门的输入信号,用于实现刹车时,汽车尾灯的闪烁功能。其次,74LS160构成的三进制计数器用于产生循环信号,此信号提供左转、右转的原始信号。最后,左转、右转的原始信号通过6个与非门以及74LS160d提供的高低电位信号,将原始信号分别输出到左、右的3个汽车尾灯上。得到的信号即可输出到发光二极管上,实现所需功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:创作都市 设计师:CSDN官方博客 返回首页
评论

打赏作者

小阮2018

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值