分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

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

发布时间:2023-09-06 02:33责任编辑:沈小雨关键词:暂无标签

一.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事件相互调用

原文地址:https://www.cnblogs.com/wong-do/p/10413867.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved