父级页面:mian.html

子页面1:top.html

子页面2:index.html

页面关系

 <div onclick="_top()">调用contentTop页面的alertTop方法</div>
<iframe id="contentTop" name="contentTop" frameborder="0" th:src="@{/top}" >
你不支持iframe
</iframe>
<iframe id="contentMain" name="contentMain" frameborder="0" th:src="@{/index}" >
你不支持iframe
</iframe>

父页面调用子页面的方法 (mian.html调用top.html页面的方法)

js写法 这里的contentTop对应的是iframe的name名

 function _top() {
contentTop.window.alertTop();
}

子页面调用父页面的方法 (top.html调用frame.html的方法)

在top.html页面写

<div id="_click">调用父级页面的show()方法</div>

js写法

$("#_click").on('click',function () {
parent.show();
})

子页面调用子页面的方法 (top.html调用index.html中的方法)  这有个要求 就是top.html和index.html要同时都显示出来

 <div onclick="_top_index()">调用index.html的_index()方法</div>

js写法 (这里的contentMain对应的是frame.html中index.html的name名)

function _top_index() {
parent.contentMain._index();
}

iframe父子页面js之间的调用的更多相关文章

  1. js和vue方法的相互调用(iframe父子页面的方法相互调用)。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

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

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

  3. iframe父子页面调用小结

     子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法  (子页面同理,需将js方 ...

  4. iframe 父子页面方法调用

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

  5. iframe父子页面通信

    一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...

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

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

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

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

  8. window.postMessage 在iframe父子页面数据传输

    介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...

  9. Flash与JS之间相互调用以及参数传递

    [AS3]ExternalInterface.call传多个参数的写法代码示例 import flash.text.TextField; ; ; var result:uint = ExternalI ...

随机推荐

  1. Atcoder Grand Contest 001E - BBQ Hard(组合意义转化,思维题)

    Atcoder 题面传送门 & 洛谷题面传送门 Yet another 思维题-- 注意到此题 \(n\) 数据范围很大,但是 \(a_i,b_i\) 数据范围很小,这能给我们什么启发呢? 观 ...

  2. 3 - 简单了解一下springboot中的yml语法 和 使用yml赋值

    1.简单了解yml语法 2.使用yml给实体类赋值 准备工作:导入依赖 <!-- 这个jar包就是为了实体类中使用@ConfigurationProperties(prefix = " ...

  3. Spark集群环境搭建——部署Spark集群

    在前面我们已经准备了三台服务器,并做好初始化,配置好jdk与免密登录等.并且已经安装好了hadoop集群. 如果还没有配置好的,参考我前面两篇博客: Spark集群环境搭建--服务器环境初始化:htt ...

  4. flink-----实时项目---day04-------1. 案例:统计点击、参与某个活动的人数和次数 2. 活动指标多维度统计(自定义redisSink)

    1. 案例 用户ID,活动ID,时间,事件类型,省份 u001,A1,2019-09-02 10:10:11,1,北京市 u001,A1,2019-09-02 14:10:11,1,北京市 u001, ...

  5. 设计和实现OLAP解决方案 [转]

    第一讲 简介首先,啥叫数据仓库? 数据仓库就是数据的仓库!用外文说叫Data Warehouse,简称DW. 是不是哐当倒下一片啊,要不咱换个专业点的说法? 数据仓库是一个面向主题的.集成的.相对稳定 ...

  6. hashtable深度探索

    1.什么是哈希表(hashtable)?为什么要发明哈希表? 首先回答第二个问题,在之前的数据结构中我们学习了数组,链表,二叉树等数据结构,记录在结构中的相对位置是随机的,和记录的关键字之前不存在确定 ...

  7. zabbix之微信报警

    #:先在企业微信注册一个企业微信号 #:注册好之后,进入微信 #:测试一下 #:获取access_token #:开始获取 #:获取 #:在server端安装pip root@ubuntu:~# ap ...

  8. Private Destructor

    Predict the output of following programs. 1 #include <iostream> 2 using namespace std; 3 4 cla ...

  9. 【Java 8】Stream API

    转自 Java 8 Stream Java8的两个重大改变,一个是Lambda表达式,另一个就是本节要讲的Stream API表达式.Stream 是Java8中处理集合的关键抽象概念,它可以对集合进 ...

  10. springboot-devtools实现项目的自动重启

    热部署的引入依赖: <!-- 热部署 --> <dependency> <groupId>org.springframework.boot</groupId& ...