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

本文详细介绍了在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中使用

window.parent["myid"]()

 

 

转载于:https://blog.youkuaiyun.com/weixin_30455661/article/details/98424422

### Vue 中嵌入 iframe调用其内部事件Vue 项目中实现 `<iframe>` 的交互主要通过 `postMessage` API 来完成跨域安全的消息传递。这种方式允许父页面向子页面发送消息以及接收来自子页面的通知。 #### 创建带有 iframe 的组件结构 定义一个简单的 Vue 组件来加载目标网站: ```vue <template> <div class="container"> <!-- 定义 iframe --> <iframe ref="myIframe" :src="url" @load="onLoad"></iframe> <!-- 操作按钮 --> <button @click="sendMessageToIFrame">Send Message to iFrame</button> </div> </template> <script> export default { data() { return { url: 'https://example.com', // 替换成实际 URL }; }, methods: { onLoad(event) { console.log('iFrame loaded'); window.addEventListener('message', this.receiveMessage); }, sendMessageToIFrame() { const message = { action: "doSomething", payload: {} }; // 获取 iframe DOM 对象并通过 contentWindow 发送消息给子页面 this.$refs.myIframe.contentWindow.postMessage(message, '*'); }, receiveMessage(event) { try { if (event.origin !== 'https://example.com') throw new Error(`Invalid origin ${event.origin}`); switch(event.data.action){ case 'response': alert(JSON.stringify(event.data.payload)); break; default: console.warn('Unknown event received from child frame.'); } } catch(error) { console.error(error.message); } } }, beforeDestroy(){ window.removeEventListener('message', this.receiveMessage); } } </script> ``` 上述代码展示了如何创建一个包含 `<iframe>` 的 Vue 组件,并设置了一个点击按钮用来触发向 iframe 内部发送消息的操作。当 iframe 加载完成后,监听器被注册以便能够接收到由 iframe 返回的信息[^2]。 为了使这段逻辑正常工作,在 iframe 页面也需要相应的处理程序来响应这些请求并将结果反馈回去。假设我们控制着 iframe 所指向的内容,则可以在该页面上添加如下 JavaScript 代码片段: ```javascript window.onmessage = function(e) { var origin = e.origin || e.originalEvent.origin; if(origin === 'https://parent-domain.com'){ // 验证来源域名 let responsePayload = {}; switch(e.data.action){ case 'doSomething':{ // 这里放置具体的业务逻辑 responsePayload = {"status": true}; break; } default:{ console.log('Unrecognized command:', e.data.action); } } parent.postMessage({action:'response',payload:responsePayload},'*'); } }; ``` 这样就可以实现在 Vue 主页和 iframe页面之间的双向通讯机制了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值