vue、html與iframe html事件相互調用

一.html文件中引入的iframe標籤

1.在父html中調用子iframe html 中的事件

經過contentwindow屬性

document.getElementById("myiframe").contentWindow.myfunc()

其中 myiframe 爲當前的iframe的id, myfunc爲iframe html中的事件

2.在iframe html 中調用父HTML 的方法

parent.func()

二.vue頁面中引入的iframe標籤

1.在vue組件中調用iframe html 中的事件

self.$refs.iframe.contentWindow.myfunc()

2.在iframe html 中調用vue methods 

(1).在vue中設置標識id 並將方法暴露在window中

export default{
    data(){
        return {
            vueid:"myid"
         }
     },
    
     methods:{
        changeNodeMsg(){
            alert(0)
        }
    }，
    created(){
        let self = this
        window[this.vueid] = ()=>{
             self.changeNodeMsg()        
        }
    }    
    

在iframe html中使用

window.parent["myid"]()