JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法
1,父 html 调用子 iframe 内方法:
document.getElementById("iframe").contentWindow.func(data1,data2...);
2,子 Iframe 中 调用 父html中方法:
parent.func(data1,data2...)
在VUE中:
// 父vue文件调用 iframe html文件中方法:
this.$refs.iframe.contentWindow.func(data1,data2...);
// 在 iframe 的 html文件中,调父 vue 中方法: (这里有点麻烦,.html 非vue组件,得借用js的全局变量做桥梁来实现)
data(){
return: {
created() {
let _this = this;
//这里可放到全局,提供给子 iframe 调用
// iframe.html 调用 vue 中方法
//如果简单粗暴点,直接load 最方便:
<iframe ref="iframe" src="/static/index.html" frameborder="" scrolling="no" marginheight="" marginwidth="" width="100%" height="100%" @load="vueFunc"></iframe>
...
methods:{
vueFunc(){}
}
iframe 上自适应高
<iframe ref="iframe" src="/static/index.html" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="100%" @load="vueFunc"></iframe>
...
methods:{
vueFunc() {
try {
setTimeout(function() {
let autoHeight = _this.$refs.iframe.contentWindow.document.documentElement.scrollHeight;
_this.$refs.iframe.style.height = autoHeight + "px";
}, );
} catch (err) {
console.log("vueFunc ");
}
},
}
.
JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法的更多相关文章
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)
此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...
- C#后台程序与HTML页面中JS方法互调
此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...
- C# winForm webBrowser页面中js调用winForm类方法(转)
有时我们在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部: 1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类 ...
- iframe与父页面中JS执行顺序控制
同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载i ...
- js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到
js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容
- 项目中Ajax调用ashx页面中的Function的实战
前台页面: 使用几个display=none的空间存储DropdownList中的值,点击Search Button后刷新页面再次给DropdownList赋值使用 <%@ Page Langu ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- 实现 iframe 子页面调用父页面中的js方法
父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <s ...
随机推荐
- Jquery ajax $getScript()和$getJSON和JSONP
- AtCoder WTF 2019 C2. Triangular Lamps Hard
题目链接 感觉这样的题真的称得上是鬼斧神工啊,\(\text{OI}\)中能多一些这样的题目就太好了. 题意: 有一个二维的三角坐标系,大概如图所示(图是从atcoder里偷下来的): 坐标系上的每个 ...
- jenkins--svn基本使用
新建项目 源码管理 #选择svn配置 svn基本信息配置 其中包括: Repository URL: svn://10.101.0.XXX:9507/XXXX Credentials: 配置你的 ...
- BZOJ4942 NOI2017整数(线段树)
首先把每32位压成一个unsigned int(当然只要压起来能过就行).如果不考虑进/退位的话,每次只要将加/减上去的数拆成两部分直接单点修改就好了.那么考虑如何维护进/退位.可以发现进位的过程其实 ...
- PHP生成二维码并上传到七牛云
参考资料 qr-code生成二维码 七牛云上传图片 实现步骤 //拿到插入后的id $res = DB::table('book_book')->insertGetId($data); i ...
- Oracle Client安装报错:引用数据不可用于验证此操作系统分发的先决条件
原因是Oracle Client 11g版本不支持最新的Win10系统. 打开Oracle Client 11g安装包目录:\client\stage\cvu 编辑该目录下的两个xml文件:oracl ...
- python构建bp神经网络_鸢尾花分类(一个隐藏层)__1.数据集
IDE:jupyter 目前我知道的数据集来源有两个,一个是csv数据集文件另一个是从sklearn.datasets导入 1.1 csv格式的数据集(下载地址已上传到博客园----数据集.rar) ...
- mycat实现简单的mysql集群负载均衡
什么是mycat呢? 简单理解为一个MySQL中间件,它支持分流.基于心跳的自动故障切换,支持读写分离,支持mysql主从,基于Nio管理线程的高并发… 详见官网:http://www.mycat.i ...
- 05 Zabbix triggers--action--event
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 05 Zabbix triggers--action--event 动作action: 在配置好监 ...
- 洛谷 P2158 [SDOI2008]仪仗队 解题报告
P2158 [SDOI2008]仪仗队 题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线 ...