项目是前后端不分离的,模板引擎使用的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基础语法的学习笔记

    *java语言特点 1,简单易用 2,跨平台 拥有JVM虚拟机(运行程序) 3,面向对象 4,支持多线程*java核心机制 1,java虚拟机 JVM 2,垃圾回收机制*JDK和JRE JDK JRE ...

  2. ribbon源码(1) 概述

    ribbon的核心功能是提供客户端在进行网络请求时负载均衡的能力.主要有以下几个模块: 负载均衡器模块 负载均衡器模块提供了负载均衡能力,详细参见ribbon源码之负载均衡器. 配置模块 配置模块管理 ...

  3. 预科班D11

    2020.09.21星期一 预科班D11 学习内容: 一.基本数据类型及内置方法 1.整形int及浮点型float + - * / // ** % > < >= <= 2.字符 ...

  4. 研究生杂谈-1粗粒度(Coarse-grained)VS细粒度(fine-grained)

    粒度似乎是根据项目模块划分的细致程度区分的,一个项目模块(或子模块)分得越多,每个模块(或子模块)越小,负责的工作越细,就说粒度越细,否则为粗粒度. 简而言之: 粗粒度:模块的功能太过于集中. 细粒度 ...

  5. C# NX二次开发环境搭建

    在网上看到一篇C#二次开发环境搭建的文章:NX二次开发-使用NXOPEN C#手工搭建开发环境配置 ,写得非常好.我按照文章操作,过程中遇到几个问题,把问题分享给大家,希望对各位有帮助. 注意三点: ...

  6. IDEA 2020.2 最新激活教程,有效期到2089年!

    这段时间众多粉丝私信说需要IDEA 2020.2 最新激活教程,于是!他来了他带着最新激活教程来了. 注意: 本教程适用于 JetBrains 全系列产品 IDEA 2020.2 以下所有版本,请放心 ...

  7. 基于vue2定义自己的图表echart组件

    先安装echarts cnpm i echarts -S,然后定义父组件 <template> <div> <echarts :option="echartOp ...

  8. Book of Shaders 00 - 使用 VS Code 编写 GLSL

    0x00 写在前面 最近在学习由 Patricio 编写的 The Book of Shaders,这是一本关于 Fragment Shaders(片段着色器)的入门指南.为了在一个相对熟悉的平台运行 ...

  9. Matlab 中 imshow 函数

    转自: https://blog.csdn.net/xiaochou87/article/details/43488829 matlab中显示图像的语句是:                       ...

  10. Arduino - 串口操作函数与示例代码大全

    来源:https://blog.csdn.net/iracer/article/details/50334041 Arduino - 串口操作函数与示例代码大全 本文总结了Arduino常用串口操作函 ...