Iframe parent-child page communication

1、 Father sends message to son , Receive messages from sub

Parent page related code

  <div class="iframeWrap">
    <iframe ref="udaamIframe" class="udaamIframe" style="width:100%;height:100%" :src="linkUrl" frameborder="0" />
  </div>

  data() {
    
    return {
    
      linkUrl: this.$route.meta.linkUrl
    }
  },
// vue Mount stage 
  mounted() {
    
    this.iframeTalk()
  },
  
  methods: {
    
    iframeTalk() {
    
    //  You have this parameter  needSendToken  Need to communicate 
      if (this.linkUrl.includes('needSendToken=true')) {
    
        const iframe = this.$refs.udaamIframe //  This is vue The grammar of , You can replace with the following line 
        // document.querySelector('.iframeWrap .udaamIframe')
        var fatherApp = iframe.contentWindow
        //  Dealing with compatibility issues 
        if (iframe.attachEvent) {
    
          //  When  iframe  Send a message after loading , Otherwise iframe Don't get 
          iframe.attachEvent('onload', () => {
    
            this.sendToken(fatherApp)
          })
        } else {
    
          iframe.onload = () => {
    
            this.sendToken(fatherApp)
          }
        }

        window.udemrFirstLoginOut = true //  Avoid triggering multiple times 
        //  Receive sub application messages 
        window.addEventListener('message', e => {
    
          // <!--  To the source origin Do some filtering , Avoid receiving messages of illegal domain names xss attack  -->
          if (e.data && e.data.origin === 'child' && e.data.isLoginOut === true && window.udemrFirstLoginOut) {
    
            console.log(' received child Message sent   You need to help them log out , e:', e)
            window.udemrFirstLoginOut = false
            store.dispatch('LogOut')
          }
        }, false)
      }
    },
    sendToken(udaamApp) {
    
      console.log(' Father   Send a message to the external link Application , The message is token')
      udaamApp.postMessage(
        {
    
          type: 'sendToken',
          token: localStorage.getItem('token'),
          remark: ' ABA, ABA, ABA '
        },
        '*'
      )
    }
 }

2、 The child receives messages from the parent 、 Send a message to my father

Sub page related code

//  Receive messages from parents 
window.addEventListener('message', function(e) {
    
    if (e.data && e.data.type === 'sendToken') {
    
      console.log(' Received a message from the main application ', e)
      localStorage.setItem('token', e.data.token)
    }
  })

//  The son sends a message to the father 
  const params = {
    
    origin: 'child',
    isLoginOut: true
  }
  window.parent.postMessage(params, '*')

Add

 because   load  iframe  It's asynchronous 、  iframe The message received from the main application is also asynchronous 、iframe  Loading the corresponding module according to the route is also asynchronous 、 When the corresponding module is loaded api Requests are also asynchronous ;

 So many asynchronies , What has been avoided is that the main application must send messages in iframe  Messages sent after receiving messages after loading , That is, sub application iframe You must receive messages from the main application normally ;  

 But sub applications  iframe  Received a message   and    Its page tone api Requests are uncontrollable , And we need  iframe Send the request after receiving the message （ You need to bring it from your father token）, So we need to deal with ：

 Ideas as follows ：  Find the module that needs to send the request , Find out which request it needs to send first , Poll the message waiting to receive the main application before sending the request , The polling is not finished until the message is received. It is initiated normally api Request to load the page ;

//  Wait until you receive the message from the main application   Proceed again api request ( Because the request needs to carry the data transmitted by the main application token)
timeout: null

setWaitToken() {
    
      const getToken = () => {
    
        this.timeout && clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
    
          if (localStorage.token) {
    
            this.yourFirstApi() //  This page needs to be initiated first api request 
          } else {
    
            getToken()
          }
        }, 100)
      }
      getToken()
    },