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"]()

巴特西

vue、html与iframe html事件相互调用

最新文章

热门文章