vue中嵌入原生iframe并传递参数

ゞ浴缸里的玫瑰 2023-02-21 04:49 2阅读 0赞

### 父传子 ###

// 父页面main.html传递参数
    
    <template>
    <div>
    <iframe :src="frameUrl" ref="iframe" width="100%" height="100%" frameborder="0" scrolling="auto" @load="loaded"></iframe>
    </div>
    </template>
    
    <script>
    export default {
    	name: 'main',
    	data(){
    		return {			
    			frameUrl: '../../../static/child.html',
    
    			params:{
    				id:'参数Id',
    				name:'参数名称'
    			},
    		}
    	},
    	mounted (){
    		var _self=this;
    		let myFrame = this.$refs['iframe']
    		if (myFrame.attachEvent) { // 兼容浏览器判断
    			myFrame.attachEvent('onload', function() {
    				const iframeWin = myFrame.contentWindow
    				iframeWin.postMessage(_self.params,'*')
    			})
    		} else {
    			myFrame.onload = function() {
    				const iframeWin = myFrame.contentWindow
    				iframeWin.postMessage(_self.params,'*')
    			}
    		}	
    	},
    	methods: {	
    		loaded() {
    			let vm = this.$refs.iframe.contentWindow.vm
    		}
    	} 
    }
    </script>
    
    // 子页面child.html接收参数
    <script>
    var id,name;	
    window.addEventListener('message', (event) => {				
    			id=event.data.id;
    			name=event.data.name;
    			console.log("我是父页面传递过来的******："+id+name);
    	　　})
    </script>

### 子传父 ###

//child.html子页面传参
    
    <script>
    window.parent.postMessage({
            params: {
                id: '子页面Id',
                name:'子页面名称'
            }
     }, '*')
    </script>
    
    //main.html父页面接收
    
    <script>
    mounted (){
        let id,name;
        window.addEventListener("message", (event) => {				
    			id=event.data.id;
    			name=event.data.name;
    			console.log("******"+id+name);
    	　　})
    }
    </script>

参考网址：[https://zeyu7.com/vue-iframechuan-zhi/][https_zeyu7.com_vue-iframechuan-zhi]

[https_zeyu7.com_vue-iframechuan-zhi]: https://zeyu7.com/vue-iframechuan-zhi/