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: {
     randomObj: {
      edit: 'edit_' + new Date().getTime()   // 先定义随机ID
     }
    }
  },
 created() {
let _this = this;
//这里可放到全局,提供给子 iframe 调用
window[this.randomObj.edit] = (_this) => {
this.module_edit(_this) //VUE 中方法
}
  },
// iframe.html 调用 vue 中方法
  var fatherId = null
  把 randomObj 传过来,再使用即可
  window.parent[fatherId.edit](_this)
//如果简单粗暴点,直接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 互调方法的更多相关文章

  1. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  2. C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  3. C#后台程序与HTML页面中JS方法互调

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  4. C# winForm webBrowser页面中js调用winForm类方法(转)

      有时我们在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部:   1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类 ...

  5. iframe与父页面中JS执行顺序控制

    同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载i ...

  6. js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  7. 项目中Ajax调用ashx页面中的Function的实战

    前台页面: 使用几个display=none的空间存储DropdownList中的值,点击Search Button后刷新页面再次给DropdownList赋值使用 <%@ Page Langu ...

  8. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  9. 实现 iframe 子页面调用父页面中的js方法

    父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <s ...

随机推荐

  1. Jfrog 与 jenkins Sonarqube的 测试样例 (From jfrog 培训)

    1. 获取jfrog 仓库地址 sonar的地址 jenkins的地址. 本次例子的地址为: jenkins地址:http://10.24.101.99:8080/ artifactory地址: ht ...

  2. SQLSERVER备份恢复后权限问题简单处理.

    1. 同事的服务器出现无法访问表, 应用连不上数据库... 远程了下 发现. 使用业务用户登录数据库之后查询无法下拉帮助到表, 必须增加schemas才可以访问到具体的表. 2. 问题解决. 1. 修 ...

  3. 关于更改ListBox的ItemsPanel样式

    首先定义一个ListBoxItem的样式,用来显示相应的图片信息 <Style TargetType="{x:Type ListBoxItem}" > <Sett ...

  4. 监控系统 & monitoring & DevOps

    监控系统 & monitoring & DevOps https://github.com/topics/monitoring https://github.com/marketpla ...

  5. http://python.jobbole.com/85056/ 简单 12 步理解 Python 装饰器,https://www.cnblogs.com/deeper/p/7482958.html另一篇文章

    好吧,我标题党了.作为 Python 教师,我发现理解装饰器是学生们从接触后就一直纠结的问题.那是因为装饰器确实难以理解!想弄明白装饰器,需要理解一些函数式编程概念,并且要对Python中函数定义和函 ...

  6. asp.net 性能提升

    原文链接:http://www.oschina.net/translate/8-ways-improve-asp-net-web-api-performance ASP.NET Web API 是非常 ...

  7. python成长之路六-函数的初识

    定义函数 我们现学已知的python函数有<内置函数> 而我们现在要学的是<自定义函数> 1,def  定义一个函数 def name(): # 后接函数名 冒号 pass 2 ...

  8. s - t 平面图最大流 (附例题 bzoj 1001)

    以下均移自 周冬的<两极相通-浅析最大最小定理在信息学竞赛中的应用> 平面图性质 1.(欧拉公式)如果一个连通的平面图有n个点,m条边和f个面,那么f=m-n+2 2.每个平面图G都有一个 ...

  9. 【POJ3045】Cow Acrobats(贪心)

    BUPT2017 wintertraining(16) #4 B POJ - 3045 题意 n(1 <= N <= 50,000) 个牛,重wi (1 <= W_i <= 1 ...

  10. 树剖模板(洛谷P3384 【模板】树链剖分)(树链剖分,树状数组,树的dfn序)

    洛谷题目传送门 仍然是一个板子. 不过蒟蒻去学了一下BIT维护区间修改区间求和,常数果真十分优秀 设数列为\(a_i\),差分数组\(d_ i=a_ i-a_ {i-1}\),前缀和\(s_i=\su ...