一.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事件相互调用的更多相关文章

  1. iframe父子页面相互调用方法,相互获取元素

    父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...

  2. Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用

    Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...

  3. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  4. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  5. Layui Iframe页面间 方法的相互调用

    就是普通的iframe之间方法的调用,只是注意一下src就像 var childWindow = $(window.parent.document).find("iframe[src='/A ...

  6. iframe于iframe页面之间的函数相互调用

    因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...

  7. JS与原生OC/Swift相互调用总结

    代码地址如下:http://www.demodashi.com/demo/12754.html JS-OC-Swift JS和OC/Swift相互调用,主要总结了JS和OC交互的三种方式 1.使用UI ...

  8. Java与.NET 的Web Services相互调用

    一:简介 本文介绍了Java与.NET开发的Web Services相互调用的技术.本文包括两个部分,第一部分介绍了如何用.NET做客户端调用Java写的Web Services,第二部分介绍了如何用 ...

  9. Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

    在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...

随机推荐

  1. 每隔5s执行一次动作

    TimeSpan timespan; //第一次获取系统时间 DateTime d1 = DateTime.Now; while (true) { //第二次获取系统时间 DateTime d2 = ...

  2. DataRow获取数值类型为空或NULL时异常处理

    //获取数据集内容 DataSet ContractDS = dal.GetJHFKStr(jhfubh); //验证数据集是否为空 if (!DataSetUtil.IsNullOrEmpty(Co ...

  3. VB.Net遍历已安装的程序卸载信息

    Private Shared Function ProgramExists(ByVal pgName As String) As Boolean Dim temp As String = Nothin ...

  4. [LeetCode]21. Merge Two Sorted Lists合并两个有序链表

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  5. Linux ARP代理 与 NAT

    有时候我们会在一个已有网络(10.10.10.0/24)内组建一个实验网络(192.168.1.0/24),网络结构如上图所示. 假设我们不能控制(修改)A网络内除D主机以外的系统配置,但可以完全控制 ...

  6. 003Linux常用命令

    文件操作 01  命令 : list----列出目录信息 命令格式: ls [-选项] [目录] 选项 : -a --all 不忽略以"."开头的隐藏文件 : -d --direc ...

  7. Highcharts - Pie Chart

    1. 饼状图(Pie Chart)示例: <div id="container" style="height: 400px"></div> ...

  8. 统计学中的P值与显著性的意义

    统计学意义(p值) 结果的统计学意义是结果真实程度(能够代表总体)的一种估计方法.专业上,p值为结果可信程度的一个递减指标,p值越大,我们越不能认为样本中变量的关联是总体中各变量关联的可靠指标.p值是 ...

  9. 多线程(八)~ThreadLocal、InheritableThreadLocal的使用

    通过前面的学习,我们了解了在多线程+成员变量等情况下会出现线程安全的问题.那么解决线程安全问题除了使用synchronize关键字之外,还有另一种常用的解决思路,那就是使用ThreadLocal类,下 ...

  10. jboss安全配置规范

    https://wenku.baidu.com/view/aad157a4f242336c1fb95ed5.html https://wenku.baidu.com/view/ac227281ec3a ...