项目是前后端不分离的,模板引擎使用的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. Kubernetes调度流程与安全(七)

    一.Kubernetes中的调度流程 1,介绍 Scheduler 是 k8s 中的调度器,主要的任务是把定义的 Pod 分配到集群的节点上.Scheduler 是作为一个单独的程序运行的,启动之后会 ...

  2. T和Class以及Class的理解

    转载自https://blog.csdn.net/witewater/article/details/53462385 首先看下Class类 ,普通的非泛型类Class. 注意:class是java的 ...

  3. Jakartase_IO流_ — Commons IO_(IO流终极篇)

    一.前言 Apache Commons IO是Apache基金会创建并维护的Java函数库. 它提供了许多类使得开发者的常见任务变得简单,同时减少重复代码 二.Commons IO 类库 2.1 Fi ...

  4. Windows上使用jekyll+github搭建免费博客

    jekyll+github搭建个人博客 (一)下载Ruby (二)安装jekyll (三)开启jekyll服务器 (四)使用github展示博客 一.下载Ruby Ruby,一种简单快捷的面向对象(面 ...

  5. vue +signalR 实现服务端到客户端消息发送

    承接上一篇 上一篇博客实现是了消息的实时通信,这一篇博客主要讲如何从中心服务内部向客户端发送消息. 先看下最终效果: 在core应用程序里加一个控制器TestController 注入控制器中的IHu ...

  6. 消息队列MQ面试专题(rabbitmq)

    正文: 1.什么是 rabbitmq 采用 AMQP 高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需要确保提供方存在,实现了服务之间的高度解耦 2.为什么要使用 rabbitmq 在分布 ...

  7. Activiti工作流系统环境搭建

    一.创建Activiti工程,并导入Activiti包及数据库驱动包 二.用代码方式创建 流程引擎 1 @Test 2 public void createProcessEngineWithCode( ...

  8. Python-信号量和线程池-semaphore ThreadPollExector

    信号量 其实本质上是锁,Lock是单锁,信号量是指定多把锁,也就是说通过信号量指定多个数线程可以访问相同资源,一般情况下读操作可以有多个,但写操作同时只有一个 信号量模块 semaphore # 使用 ...

  9. 日志分析平台ELK之日志收集器logstash

    前文我们聊解了什么是elk,elk中的elasticsearch集群相关组件和集群搭建以及es集群常用接口的说明和使用,回顾请查看考https://www.cnblogs.com/qiuhom-187 ...

  10. 什么是ICD文件

    ICD就是IED Capability Description的简称,中文为IED能力描述文件.其中 IED是Intelligent Electronic Device的简称,是智能电子设备 智能电子 ...