vue中html标签调window方法,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: {

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 最方便：

...

methods:{

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 ");

}

},

}

.

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

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

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

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?

aspx 页面中 js 引用与页面后台的数据交互 --【 后台调用 js 】

js 中调用后台方法   一.用Response.Write方法 Response.Write("

随机推荐

(Beta)Let's-版本发布说明

Let's App(Beta)现已隆重上市   GIT源码请戳此处 版本的新功能 我们在这一版本对于项目的规划目标主要集中在三个方面——预约用户观感,完善功能链条,改善用户体验 界面 首先,在β阶 ...

laravel homestead

laravel homestead真是个好东西啊,折腾了很长时间,终于ok啦. 安装成功之后,在-目录下有个homstead,进入执行vagrant up clzdeMBP:Homestead clz ...

xquery

XQuery 相对于 XML,等同于 SQL 相对于数据库.设计用来查询 XML 数据.- 不仅仅限于 XML 文件,还包括任何可以 XML 形态呈现的数据,包括数据库. FLWOR 是 " ...

Jsp页面获取项目名称

方式一: ${pageContext.request.contextPath} 方式二: <%= this.getServletContext().getContextPath() %>

MySQL create table 语法

MySQL中create table语句的基本语法是: CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name     [(create_definitio ...

Spark学习之在集群上运行Spark

一.简介 Spark 的一大好处就是可以通过增加机器数量并使用集群模式运行,来扩展程序的计算能力.好在编写用于在集群上并行执行的 Spark 应用所使用的 API 跟本地单机模式下的完全一样.也就是说 ...

web服务器之nginx和apache的区别

① apache属于重量级的服务器,nginx属于轻量级的服务器; 区别在于对一些功能的支持,比如:  pathinfo,php模块方面 ② nginx抗高并发能力强. 由于nginx采用的是异步非阻 ...

清除代码中的svn文件。

@echo on color 2f mode con: cols=80 lines=25 @REM @echo 正在清理SVN文件,请稍候...... @rem 循环删除当前目录及子目录下所有的SVN ...

MR数据生成工具指向目录

mrDataTidy_SaveTwoDays.jar 原始路径 :D:\太原MR数据\一天数据整理 目标路径 : D:\MR现场数据整理\保存两天_整理后数据 例如 当前时间:2017-5-17 10 ...

AangularJS入门总结一

CRUD(增加Create.查询Retrieve.更新Update.删除Delete) 一.angularjs是为了克服HTML在构建应用上的不足而设计的: 二.AngularJS的出众之处: 构建一 ...