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 ...
随机推荐
- ubunut下使用kubeadm离线安装k8s1.9
模仿转载的那个博客,简单记录下过程. 需要的文件. 原贴里面的:http://www.bladewan.com/2018/01/02/kubernetes_install/ 镜像文件,以及单独下载一些 ...
- BOM嵌套简单写法
WITHTREE AS( SELECT a.FItemID cfitemid,b.FItemID pfitemid FROM dbo.ICBOMChild a,dbo.ICBOM b WHERE a. ...
- HTTP消息头(HTTP headers)-常用的HTTP请求头与响应头
HTTP消息头是指,在超文本传输协议( Hypertext Transfer Protocol ,HTTP)的请求和响应消息中,协议头部分的那些组件.HTTP消息头用来准确描述正在获取的资源.服务器或 ...
- SVG to Image in js
SVG to Image in js SVG to Image https://image.online-convert.com/convert-to-svg https://stackoverflo ...
- Java微信二次开发(三)
各种类型消息的封装 第一步:找到com.wtz.message.response包,新建类Image.java package com.wtz.message.response; /** * @aut ...
- html web服务器
web服务器可以发布网站,从而使得网站可以被全世界访问: 在自己服务器上托管自己的网站的要求: 硬件搭建:强大的服务器硬件,保证24小时高速连接, 软件搭建:服务器授权比客户端授权更贵: 人工费:环境 ...
- MVC 多submit
直接上代码 3种情况: 第一种,由于form已经可以支持多个了.所以我们分成2个form来提交,submit会根据自己所在的form来提交当前表单的内容 @using (Html.BeginForm( ...
- day30 hashlib模块
hashlib 提供摘要算法 最常见的就是MD5,当然一般来说MD5已经被足够了 不管算法多不一样,但是摘要的功能是不变的 对于相同的字符串进行摘要,使用同一个算法得到的值总是不变的 不同算法的话,会 ...
- 【Gym - 101164I】Cubes(dfs,剪枝)
BUPT2017 wintertraining(15) #4 A - I.Cubes Gym - 101164I 题意 将n拆成最少个立方数相加的形式. 题解 根据n的范围,立方数最大不超过400的立 ...
- 【BZOJ4712】洪水(动态dp)
[BZOJ4712]洪水(动态dp) 题面 BZOJ 然而是权限题QwQ,所以粘过来算了. Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开 ...