current position:Home>Vue local refresh iframe

Vue local refresh iframe

2022-05-15 02:03:03rojie0

There is a problem that requires cross domain refresh iframe, use postMessage Transfer data to solve
The method is similar to vue Parent-child components pass values
The solution is as follows :

One :vue3 The way

 //  Refresh appIframe
 // Parent page ,appIframeReload  Refresh button event , Custom button events 
	 setup(){
    
	   const appIframeReload = () => {
    
	      const frame = document.getElementsById('iframe'); // obtain iframe
	      setTimeout(() => {
    
	          frame.contentWindow.postMessage(200, "*") // Pass data to sub pages 
	        }
	      }, 300)
	    }
		return {
    
	      appIframeReload
	    };
	 }
	 
	// Subpage   Of APP.vue mouterd  Event write these methods 
	mounted(){
    
    if (typeof window.addEventListener != 'undefined') {
          // for ie9+、chrome
      window.addEventListener('message', dealMessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
       // for ie8-
      window.attachEvent('onmessage', dealMessage);
    }
	
    function dealMessage (e) {
    
    // The value passed is 200, Trigger local refresh 
      if (e.data == 200) {
      
        e.currentTarget.window.location.reload()
      }
    }
	
	 }
	}

  

Two :vue2 The way

 // Parent page ,appIframeReload  Refresh button event , Custom button events 
	 methods:{
    
	   appIframeReload () {
    
	      const frame = document.getElementsById('iframe'); // obtain iframe
	      setTimeout(() => {
    
	          frame.contentWindow.postMessage(200, "*") // Pass data to sub pages 
	        }
	      }, 300)
	    }
	 }
  
	// Subpage   Of APP.vue mounted Event write these methods 
	mounted()
	{
    
	 if (typeof window.addEventListener != 'undefined') {
          // for ie9+、chrome
	      window.addEventListener('message', dealMessage, false);
	    } else if (typeof window.attachEvent != 'undefined') {
       // for ie8-
	      window.attachEvent('onmessage', dealMessage);
	    }
		
	    function dealMessage (e) {
    
	    // The value passed is 200, Trigger local refresh 
	      if (e.data == 200) {
      
	        e.currentTarget.window.location.reload() // Trigger refresh method 
	      }
	    }
	}   

copyright notice
author[rojie0],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120528099102.html

Random recommended