1,父 html 调用子 iframe 内方法:

  1. document.getElementById("iframe").contentWindow.func(data1,data2...);

2,子 Iframe 中 调用 父html中方法:

  1. parent.func(data1,data2...)

在VUE中:

  1. // 父vue文件调用 iframe html文件中方法:
    this.$refs.iframe.contentWindow.func(data1,data2...);
  1. // 在 iframe 的 html文件中,调父 vue 中方法: (这里有点麻烦,.html 非vue组件,得借用js的全局变量做桥梁来实现)
    data(){
    return: {
     randomObj: {
      edit: 'edit_' + new Date().getTime()   // 先定义随机ID
     }
    }
  },
  1. created() {
  2. let _this = this;
  3. //这里可放到全局,提供给子 iframe 调用
window[this.randomObj.edit] = (_this) => {
this.module_edit(_this) //VUE 中方法
}
  },
  1. // iframe.html 调用 vue 中方法
  var fatherId = null
  把 randomObj 传过来,再使用即可
  window.parent[fatherId.edit](_this)
  1. //如果简单粗暴点,直接load 最方便:
  2. <iframe ref="iframe" src="/static/index.html" frameborder="" scrolling="no" marginheight="" marginwidth="" width="100%" height="100%" @load="vueFunc"></iframe>
    ...
    methods:{
      vueFunc(){}
    }

iframe 上自适应高

  1.  
  1. <iframe ref="iframe" src="/static/index.html" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="100%" @load="vueFunc"></iframe>
    ...
  1. methods:{
  1. vueFunc() {
  2. try {
  3. setTimeout(function() {
  4.  
  5. let autoHeight = _this.$refs.iframe.contentWindow.document.documentElement.scrollHeight;
  6. _this.$refs.iframe.style.height = autoHeight + "px";
  7.  
  8. }, );
  9. } catch (err) {
  10.   console.log("vueFunc ");
  11. }
  12. },
    }

.

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. SQL SELECT INTO

    SQL SELECT INTO 语句 1. SELECT *INTO table1 FROM table //将table的数据复制到 table2中 但是我自己进行试验时, SELECT * INT ...

  2. mysql理论结合实际篇(一)

    最近两天做需求,是要将退款和退货报表里使用的临时表改用固定表, 自己建表时,如(只是举例): CREATE TABLE tasks ( task_id INT UNSIGNED NOT NULL AU ...

  3. 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 ...

  4. timescale 时间尺度

    1 `timescale为模块指定参考时间单位 `timescale<reference_time_unit>/<time_precision> 2 module endmou ...

  5. scrapy 简单爬虫实验

    利用python的模块requests来爬取百度搜索出来的url 使用环境为python3 #!/use/bin/env python # -*- coding:utf-8 -*- import re ...

  6. 【Linux】memcache和memcached的自动安装

    赶时间所以写一个简单的一个脚本,没有优化,想优化的可以学习下shell,自己优化下. 且行且珍惜,源码包+脚本领取处 链接:https://pan.baidu.com/s/1wIFR1wY-luDKs ...

  7. HDU4409-LCA模拟

    给一个家谱,回答给的操作结果. 1)L 按照字典序排序儿子,输出整个家谱. 2)b 求出所给name的所有兄弟. 3)c 求出两个name的LCA 读入数据时,我用一个curfather数组维护固定深 ...

  8. day11 高阶函数 函数式编程

    高阶函数,满足 接收函数作为参数或者返回有函数 函数可以当做参数传递给另一个函数 def foo(n): print(n) def bar(name): print("my name is ...

  9. mysql case when 判断null

    select  name,case WHEN m.NAME is null THEN '' else m.NAME end NAME1 from  sys_users

  10. Linux 下统计Apache每分钟的并发数

    脚本非常简单,不清楚原理,逐行运行即可. 使用时将脚本复制到home目录,并添加执行权限.定时任务即可. 代码内容如下: #!/bin/sh date >> /home/date-time ...