current position:Home>Value transfer between Vue item and embedded iframe

Value transfer between Vue item and embedded iframe

2022-04-29 20:43:23m0_ forty-nine million four hundred and seventy-one thousand si

vue Project as parent , Embed a iframe

to iframa How to write value transfer

 
 
//html structure 
 <button @click="fatherpost"> to iframe Pass value </button>
 <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px"         
         height="500px">
 </iframe>
 
// Mounted on mounted in 
mounted() {
    this.iframeWin = this.$refs.iframe.contentWindow;
}
methods:{
    fatherpost(e){    // Click to iframe Pass value 
    	 this.iframeWin.postMessage(" I'm from the parent page data", '*')
    },
}
 
 
//iframe To receive information from , stay iframe Write the listening function in the project 
 window.addEventListener('message',function(e){
			    var Date=e.data;
			    console.log(Date)
},false);

iframe Project to vue Value transfer of items

// stay iframe Add code to the project 
<button @click="sonpost"> Pass the value to your father </button>
methods: {
    	sonpost(){
    		 window.parent.postMessage(" I'm a subpage test!", '*');
 
    	}
},
 
 
// stay vue Add receiving code to the project 
 
window.addEventListener('message', function(e){
		    var Date=e.data;
		    console.log(Date)
});

copyright notice
author[m0_ forty-nine million four hundred and seventy-one thousand si],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291841231396.html

Random recommended