iframe父页面vue、html与子页面html事件相互调用

一. html页面中引入的iframe标签

 <iframe id="menuframe" name="menuframe" src="modal.html" frameborder="no" style="width:100%;height:100%></;"iframe> 

1. 父html中调用子iframe html 中的事件
   通过contentwindow属性，其中 menuframe为当前的iframe的id, myClick为iframe html中的事件。

document.getElementById("menuframe").contentWindow.myClick();

通过name属性menuframe调用事件。

menuframe.window.myClick();

2. 在iframe html 中调用父html的事件

 window.parent.myParentClick();

二.vue页面中引入的iframe标签

<iframe src="modal.html" id="menuframe" name="menuframe" :colorVal="colorVal" class="iframe" style="height:calc(100% - 15px);width: 100%;border-width: 0;"></iframe>

colorVal传递的参数

1. 在vue组件中调用iframe html 中的事件
   两种方法：通过contentwindow属性

self.$refs.iframe.contentWindow.myClick();

通过name属性值menuframe调用事件

menuframe.window.myClick();

2. 在iframe html 中调用vue methods的事件
   在vue中设置标识id 并将方法暴露在window中。
   vue页面如下：

export default{
    data(){
        return {
            vueId:"myParentId"
         }
     },
     methods:{
        modalsend(infojson){
            console.log(infojson)
        }
    }，
    created(){
        let self = this
        window[this.vueId] = (infojson)=>{
             self.modalsend(infojson)        
        }
    }    

在iframe html如何调用modalsend事件：

 window.parent["myParentId"](infojson)