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 ...
随机推荐
- SQL SELECT INTO
SQL SELECT INTO 语句 1. SELECT *INTO table1 FROM table //将table的数据复制到 table2中 但是我自己进行试验时, SELECT * INT ...
- mysql理论结合实际篇(一)
最近两天做需求,是要将退款和退货报表里使用的临时表改用固定表, 自己建表时,如(只是举例): CREATE TABLE tasks ( task_id INT UNSIGNED NOT NULL AU ...
- PSP(4.27——5.3)以及周记录
1.PSP 4.27 11:40 18:10 125 265 Cordova A Y min 4.28 10:00 16:50 200 210 Cordova A Y min 4.29 15:30 2 ...
- timescale 时间尺度
1 `timescale为模块指定参考时间单位 `timescale<reference_time_unit>/<time_precision> 2 module endmou ...
- scrapy 简单爬虫实验
利用python的模块requests来爬取百度搜索出来的url 使用环境为python3 #!/use/bin/env python # -*- coding:utf-8 -*- import re ...
- 【Linux】memcache和memcached的自动安装
赶时间所以写一个简单的一个脚本,没有优化,想优化的可以学习下shell,自己优化下. 且行且珍惜,源码包+脚本领取处 链接:https://pan.baidu.com/s/1wIFR1wY-luDKs ...
- HDU4409-LCA模拟
给一个家谱,回答给的操作结果. 1)L 按照字典序排序儿子,输出整个家谱. 2)b 求出所给name的所有兄弟. 3)c 求出两个name的LCA 读入数据时,我用一个curfather数组维护固定深 ...
- day11 高阶函数 函数式编程
高阶函数,满足 接收函数作为参数或者返回有函数 函数可以当做参数传递给另一个函数 def foo(n): print(n) def bar(name): print("my name is ...
- mysql case when 判断null
select name,case WHEN m.NAME is null THEN '' else m.NAME end NAME1 from sys_users
- Linux 下统计Apache每分钟的并发数
脚本非常简单,不清楚原理,逐行运行即可. 使用时将脚本复制到home目录,并添加执行权限.定时任务即可. 代码内容如下: #!/bin/sh date >> /home/date-time ...