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 ...
随机推荐
- 周刷题第二期总结(Longest Substring Without Repeating Characters and Median of Two Sorted Arrays)
这周前面刷题倒是蛮开心,后面出了很多别的事情和问题就去忙其他的,结果又只完成了最低目标. Lonest Substring Without Repeating Characters: Given a ...
- 科普一下bl锁的知识,没解锁的必看!
今天给大家科普一下. 科普分为两版,一个详细版一个简单版.简单版往下翻. bl是什么?其实详细的我也不知道,我就知道原理和他的全称是bootloader.我们所说的解锁里面的“锁”,就是blbl锁的功 ...
- map()实现zip()功能
c = (map(lambda x,y:(x,y),[1,2,3],["abd","def","ghi"]))print(list(c)) ...
- 读取excel思路
1.输入地址 2.输入指定的sheet 通过sheet()[]方式指定 3.输入执行的单元位置 通过 .cell_value(x,y)方式指定 示例 data = xlrd.open_workboo ...
- ubuntu 安装 postgresql
安装环境: Ubuntu 10.04-desktop-i386 PostgreSQL 8.4 1. 安装PostgreSQL 输入如下命令 sudo apt-get install postgresq ...
- John's trip POJ - 1041(这题数据有点水)
题意: 其实还是一个欧拉回路,但要按字典序走路: 解析: 我真是蠢啊emm... map[i][j]表示由顶点i经街道j会到达的顶点编号 然后枚举j就好了 用栈储存.. 虽然我不是这样写的 #incl ...
- MT【206】证明整数数列
已知方程$x^3-x^2-x+1=0$,的三根根为$a,b,c$,若$k_n=\dfrac{a^n-b^n}{a-b}+\dfrac{b^n-c^n}{b-c}+\dfrac{c^n-a^n}{c-a ...
- Min_25 筛
Min_25 筛 yyb好神仙啊 干什么用的 可以在\(O(\frac{n^{\frac 34}}{\log n})\)的时间内求积性函数\(f(x)\)的前缀和. 别问我为什么是这个复杂度 要求\( ...
- CSS选择器,选择器的优先级
CSS选择器 CSS基本语法 选择器 + 声明块 选择器 - 通过CSS选择器选中页面中的指定元素,下面会重点写. 声明块 - 选择器后面跟着的是声明块,使用{}括起来,由一个个声明组成,声明由名值对 ...
- 牛客练习赛 小A与任务 解题报告
小A与任务 链接: https://ac.nowcoder.com/acm/contest/369/B 来源:牛客网 题目描述 小A手头有 \(n\) 份任务,他可以以任意顺序完成这些任务,只有完成当 ...