html引入vue子组件,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"]()

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

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

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

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

vue中的父子组件相互调用

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

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

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

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

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

Java与.NET 的Web Services相互调用

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

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

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

《AngularJS》--指令的相互调用

转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

ASP.net关于C#代码与javaScript函数的相互调用

C#代码与javaScript函数的相互调用 问:1.如何在JavaScript访问C#函数?2.如何在JavaScript访问C#变量?3.如何在C#中访问JavaScript的已有变量?4.如何在 ...

随机推荐

Hive Streaming 追加 ORC 文件

1.概述 在存储业务数据的时候,随着业务的增长,Hive 表存储在 HDFS 的上的数据会随时间的增加而增加,而以 Text 文本格式存储在 HDFS 上,所消耗的容量资源巨大.那么,我们需要有一种方 ...

Node基础：资源压缩之zlib

概览 做过web性能优化的同学,对性能优化大杀器gzip应该不陌生.浏览器向服务器发起资源请求,比如下载一个js文件,服务器先对资源进行压缩,再返回给浏览器,以此节省流量,加快访问速度. 浏览器通过H ...

HDU5829 NTT

以下这份代码并没有过.但感觉没有问题.不是蜜汁WA就是蜜汁T. #include #include #include

WPF拖动绘制

using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using ...

[转]js动态创建json类型

废话少说:json是一个特有的键值对数组类型.既然是数组类型那么我们就可以这样定义 1.先定义数组 var Data = []; 2.理解键值对 对象名:值{ "id": i, & ...

C#winform向Txt文件传值，不重复录入且不清空

private void textLog_TextChanged(object sender, EventArgs e) { FileStream fs = new FileStream(@&quot ...

[Leetcode 771]宝石和石子 Jewels and Stones HashSet简单应用

[题目] You're given strings J representing the types of stones that are jewels, and S representing the ...

Oracle PL/SQL，游标，过程

1.PL/SQL  语法相关 -- SQL 语言只是访问,操作数据库的语言,而比并不是程序设计语言,因此不能用于程序开发. -- PL/SQL 是在标准SQl语言上进行过程性扩展后形成的程序设计语言, ...

pygame设置text和image共同显示

下面介绍一下如何用pygame将text文本和图片一起绑定到视图 部分重点用不同颜色做了标记,希望对大家有帮助 代码块: %%writefile tranformtouxiang2.py import ...

setTimeout闭包常见问题

经常会遇到这样的问题,setTimeout按序输出循环数字,而不是最后输出同一个数字: 题目: for (var i = 0; i < 5; i++) { setTimeout(function ...