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

转载于 2019-11-27 20:06:33 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_30455661/article/details/98424422

本文详细介绍了在HTML与iframe之间以及Vue组件与iframe之间的事件调用方法。包括如何在父HTML中调用子iframe中的事件，以及在iframe中调用父HTML或Vue组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.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中使用