项目是前后端不分离的,模板引擎使用的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. 关于java基础_方法的简单习题

    package day05; import java.util.Arrays; /** * 方法作业 * @author ASUS * */ public class Demo6 { /* * 1.定 ...

  2. 阿里巴巴内部Java成长笔记,首次曝光!真的香!

    前言 关于技术人如何成长的问题,一直以来都备受关注,因为程序员职业发展很快,即使是相同起点的人,经过几年的工作或学习,会迅速拉开极大的差距,所以技术人保持学习,提升自己,才能够扛得住不断上赶的后浪,也 ...

  3. Python+Appium运行简单的demo,你需要理解Appium运行原理!

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.Appium 的理念 四个原则 1.Web-Selenium 的运行原理 2.Appium ...

  4. php判断请求方式

    1 /** 2 * 判断是否为get请求 3 * 4 * @return bool 5 */ 6 function is_get():bool 7 { 8 return $_SERVER['REQUE ...

  5. profile对比std::regex与boost::regex的性能

    c++11标准库的regex比boost库的regex之间的性能差距接近5倍,这是为什么?stackflow上也找到一篇post<c++11 regex slower than python&g ...

  6. 栈帧的内部结构--操作数栈(Opreand Stack)

    每个栈帧中包含: 局部变量表(Local Variables) 操作数栈(Opreand Stack) 或表达式栈 动态链接 (Dynamic Linking) (或指向运行时常量的方法引用) 动态返 ...

  7. echarts中折线图切换为数据视图(表格布局)表头无法对齐解决方法

                dataView: {               show: true,               readOnly: true,               option ...

  8. Devops实战(一)Docker的部署安装以及Docker-Compose的使用

    Docker的部署安装以及Docker-Compose的使用 1.docker和docker-Compose简介 Docker是一组平台即服务(PaaS)产品,它们使用操作系统级虚拟化以称为容器的软件 ...

  9. 关于VS编译报错,但是错误信息未提示问题解决方案

    可能代码中引用了别的类库中的函数,然后未编译被引用库导致编译报错,重新编译被引用库然后再编译当前库即可解决问题

  10. kubernetes下jenkins实战maven项目编译构建

    关于kubernetes环境的jenkins集群 在kubernetes环境部署的jenkins集群,执行任务时会新建pod,任务完成后pod被销毁,架构如下所示: 在kubernetes搭建jenk ...