[JavaScript知识库]vue 局部刷新 iframe

遇到个难题需要跨域刷新iframe，用 postMessage 传递数据解决
方法类似与 vue 父子组件传值
解决方法如下：

一：vue3方式

 // 刷新appIframe
 //父页面，appIframeReload 刷新按钮事件，自定义按钮事件
	 setup(){
	   const appIframeReload = () => {
	      const frame = document.getElementsById('iframe'); //获取iframe
	      setTimeout(() => {
	          frame.contentWindow.postMessage(200, "*") //传递数据给子页面
	        }
	      }, 300)
	    }
		return {
	      appIframeReload
	    };
	 }
	 
	//子页面 的APP.vue mouterd 事件写这些方法
	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) {
    //传过来的值是200，触发局部刷新
      if (e.data == 200) {  
        e.currentTarget.window.location.reload()
      }
    }
	
	 }
	}

  

二：vue2方式

 //父页面，appIframeReload 刷新按钮事件，自定义按钮事件
	 methods:{
	   appIframeReload () {
	      const frame = document.getElementsById('iframe'); //获取iframe
	      setTimeout(() => {
	          frame.contentWindow.postMessage(200, "*") //传递数据给子页面
	        }
	      }, 300)
	    }
	 }
  
	//子页面 的APP.vue mounted事件写这些方法
	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) {
	    //传过来的值是200，触发局部刷新
	      if (e.data == 200) {  
	        e.currentTarget.window.location.reload() //触发刷新方法
	      }
	    }
	}   

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖