项目是前后端不分离的,模板引擎使用的JSP。

但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能。

在js里调用vue方法

我们需要把方法注册到vue对象之外的页面,所以对与在methods中定义的方法,需要在mounted中注册给window。之后我们可以在js里直接调用,

在vue里调用js方法

直接使用window.方法名就可以调用

在主页面中调用iframe子页面的代码:

<!--主页面中的JS代码-->
<script type="text/javascript">
//调用子页面的方法.
var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象,用DOM对象的contentWindow获取子页面window对象。
childWindow.subFunction(); //调用子页面中的subFunction方法。
</script> <!--子页面中的JS代码-->
<script type="text/javascript">
//子页面调用父页面中的方法。
window.parent.parentFunction(); //parentFunction是父页面中自定义的JS方法。
</script>

在iframe子页面(vue环境一样)中调用父页面代码:

子页面:

主页面:

在一个iframe子页面调用另一个iframe子页面的方法,并且同为Vue环境

主页面:

子页面1,调用的一方:

子页面2,被调用的一方,需要注册:

js和vue方法的相互调用(iframe父子页面的方法相互调用)。的更多相关文章

  1. iframe父子页面互调方法和属性

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...

  2. iframe父子页面js之间的调用

    父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...

  3. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  4. iframe父子页面相互调用方法,相互获取元素

    父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...

  5. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  6. iframe 父子页面方法调用

    在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...

  7. JQuery调用iframe子页面函数/对象的方法例子

    父页面有个ID为mainfrm.name为Iframe1的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: $("#mainfr ...

  8. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. JQuery调用iframe子页面函数/对象的方法

    父页面有个ID为mainfrm的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: $("#mainfrm")[0].c ...

随机推荐

  1. 解决spark streaming集成kafka时只能读topic的其中一个分区数据的问题

    1. 问题描述 我创建了一个名称为myTest的topic,该topic有三个分区,在我的应用中spark streaming以direct方式连接kakfa,但是发现只能消费一个分区的数据,多次更换 ...

  2. 数据库:浅谈DML、DDL、DCL的区别

    简介 SQL是一个标准的数据库语言,是面向集合的描述性非过程化语言.它功能强,效率高,简单易学易维护(迄今为止,我还没见过比它还好学的语言).然而SQL语言由于以上优点,同时也出现了这样一个问题:它是 ...

  3. vue自适应布局的n中方法

    在index.html中 head标签中 <script> //通过window.screen.width获取屏幕的宽度 var offWidth = window.screen.widt ...

  4. session、闪现、请求扩展

    session 除请求对象之外,还有一个session对象.它允许你在不同请求储存特定用户的信息.它是在Cookies的基础上实现的,并且对,Cookies进行密钥签名要使用会话,你需要设置一个密钥. ...

  5. 一文读懂MySQL的索引结构及查询优化

    回顾前文: 一文学会MySQL的explain工具 (同时再次强调,这几篇关于MySQL的探究都是基于5.7版本,相关总结与结论不一定适用于其他版本) MySQL官方文档中(https://dev.m ...

  6. JavaFX桌面应用-构建程序框架

    看到JavaFX应用很多人都会说JavaFX应用太丑了,确实JavaFX比起Qt.MFC.Delphi这些界面确实丑了一点,但也不是没有可以美化的空间. 跟网页一样,单纯HTML不加任何CSS的时候也 ...

  7. Windows批处理(cmd/bat)常用命令学习

    前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...

  8. BTRsys1~2系列靶机渗透

    BTRsys系列靶机渗透 BTRsys1 端口发现加目录扫描. 发现目录:http://192.168.114.161/login.php 尝试弱密码失败,查看源代码. <script type ...

  9. 智慧矿山-选矿工艺数字 3D 可视化

    前言 现代科技和工业的发展对矿物原料的要求越来越高,直接开采的原矿石往往达不到标准,而原矿通过选矿加工后则可以满足要求.选矿技术在冶金.煤炭.化工.建材和环保等部门都得到应用,对国民经济的发展意义重大 ...

  10. Android Widget开发过程中的一些问题汇总

    一.基本实现要点 布局文件 配置文件 控制文件 AndroidManifest.xml