window. Open different source pages to communicate and transfer data

Time:2022-1-3

Personal website
https://kuangyx.cn
Steps:

  1. Parent page open child page
  2. The child page sends a message to the parent page to notify that the page loading is complete
  3. The parent page sends data to the child page after receiving the loading completion of the child page

Code example:
Parent page

const targetWindow = window. Open ("sub page address", "_black");
window.addEventListener("message", e => {
  If (e.origin = = "sub page address"){
    console. Log (e.data, "data sent from sub page");
    targetWindow. PostMessage ("data sent to sub pages", "*");
  }
});

Subpage

window.addEventListener('message',e => {
  console. Log (e.data, 'data sent from parent page');
})
window.addEventListener('load',() =>{
  window. opener. PostMessage ('sub page loading completed ');
})

Recommended Today

Vue2 technology finishing 3 – Advanced chapter – update completed

3. Advanced chapter preface Links to basic chapters:https://www.cnblogs.com/xiegongzi/p/15782921.html Link to component development:https://www.cnblogs.com/xiegongzi/p/15823605.html 3.1. Custom events of components 3.1.1. Binding custom events There are two implementation methods here: one is to use v-on with vuecomponent$ Emit implementation [PS: this method is a little similar to passing from child to parent]; The other is to use ref […]