相关文章推荐
果断的土豆  ·  Spring Cloud Gateway ...·  10 月前    · 
沉稳的围巾  ·  python3 ...·  1 年前    · 
开朗的小笼包  ·  Redis ...·  1 年前    · 

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);
    });

时隔多年hhhh更新一下我觉得比较好的方法

  1. 子页面onload完毕以后,向父页面发送加载完毕的消息
  2. 父页面收到加载完毕的消息以后,先子页面发送usersession,这样子页面必定能获取到目标消息了
    注意点:记得取消监听事件
postMessage的基本用法postMessage可以解决跨域的传值问题,一般可以认为是父页面向子页面传递消息。发送数据(父页面):otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow:其他窗口的一个引用,可以是window.open(‘xxx’)、window.opener等等(目前只用过这两种... // 获取实列`在这里插入代码片` let win = window.open('http://localhost:9528/#/login?redirect=%2Fdashboard') // 监听子页面发送消息 window.addEventListener('message', (e) => { // 收到变化,判断是否事子页面 if(e.data.type === 'son'){ // 收到子页面传参,处理数据,向子页面传参 // 不能把wi var url = "http://127.0.0.1/demo"; // 样式 var sFeatures = "dialogWidth:490px;dialogHeight:310px;scroll:no;status:no;"; // 参数 var arg= new Object(); arg.id = "1"; arg.name = "zhangsan"; // 打开子窗口 在父iframe中这么接受 在created和 mounted 都可以 window.addEventListener('message', this.handleMessage,'事件名') 事件这么写 handleMessage(e) { if (e.data.status === 'ok') { this.f
window.open跨域问题是由于浏览器的同源策略导致的。同源策略要求两个页面必须具有相同的协议、域名和端口,否则就会被认为是跨域请求。当使用window.open打开一个新窗口时,如果打开的窗口与当前页面不满足同源策略,就会报跨域错误。 解决window.open跨域问题的方法有几种。一种方法是使用window.postMessage进行跨窗口通信。通过在父窗口中使用window.open打开子窗口,并在父窗口中使用postMessage方法向子窗口发送消息,可以实现跨窗口通信。123 #### 引用[.reference_title] - *1* [关于 window.opener 引发的window.open跳转跨域问题 日常记录](https://blog.csdn.net/qq_41662145/article/details/125558739)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* *3* [【转载】跨域及跨域解决方法](https://blog.csdn.net/weixin_45087722/article/details/123954969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]