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 ...
随机推荐
- MES方向准备
与WMS系统对接,实现MES系统中原材料入库.采购退货.生产订单.原材料出库.成品入库单.完工报告.成品出库单.成品入库单.成品出库单.标准出货.出货计划等数据与单据作业数据同步. 车间立体仓库.AG ...
- Mysql8 连接提示 Client does not support authentication protocol requested by server; consider upgrading MySQL client 解决方法
USE mysql;ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';FLUSH PR ...
- Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 6. 条件
前面的教程中,我们已经可以让小海龟绘制出各种图形了.但是,所有绘图的代码都是预先编好的,程序一旦运行起来,运行结果(绘制的图形)就是固定不变的.这一节中,咪博士将教大家如何让海龟响应用户的输入. im ...
- YII2十三大特性2
第十三 场景(scenario)的使用 例如:有三个场景,分别为创建,更新,确认回款 首先,定义所有的场景,及规则,如下所示: <?php namespace core\models; use ...
- JavaScript——闭包机制
闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包 一.什么是闭包? 闭包就是可以访问另一个函数作用域中变量的函数.下面列举出常见的闭包实现方式,以例子讲解闭包概念 func ...
- Bootstrap媒体对象
前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...
- pgm11
这里简要的讨论 hybrid network 与一些时序数据的分析. hybrid network 指网络中存在离散随机变量与连续随机变量,这种情况下一般非常麻烦,这主要是因为连续型随机变量需要使用某 ...
- BZOJ2796[Poi2012]Fibonacci Representation——贪心+二分查找
题目描述 给出一个正整数x,问x最少能由多少个Fibonacci数加减算出. 例如1070=987+89-5-1,因此x=1070时答案是4. 输入 第一行一个正整数q (q<=10),表示有q ...
- Spring StringRedisTemplate 配置
1 先看pom.xml <dependency> <groupId>org.apache.commons</groupId> <artifactId>c ...
- 自学Linux Shell12.3-case命令
点击返回 自学Linux命令行与Shell脚本之路 12.3-case命令 有了case命令,就不需要写出所有elif语句来不停的检查同一个变量的值了.case命令会采用列表格式来检查单个变量的多个值 ...