父级页面: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. CF1361C Johnny and Megan's Necklace

    考虑\(2^x | (u \oplus v)\)的最大\(x\)小于等于\(20\) 这种题目,可以考虑搬到图上做. 我们枚举\(x\)那么对\((u\ mod\ 2^x,v\ mod\ 2^x)\) ...

  2. [NOI2021] 量子通信

    嗯. NOI2021最白给的一题. PS:很后悔没打同步赛,少了一张同步赛Ag 考虑加黑的256位01串,我们思考一下. 因为\(k\)小于16,所以我们直接分成16块.所以一定可以的绝对有一块是完全 ...

  3. Atcoder Grand Contest 038 E - Gachapon(Min-Max 容斥+背包)

    Atcoder 题面传送门 & 洛谷题面传送门 我竟然能独立做出 Ag 的 AGC E,incredible!更新了 Atcoder 做题难度上限( 首先按照套路 Min-Max 容斥,\(a ...

  4. 在Telegraf上报的监控数据中添加固定的标签列

    Telegraf作为InfluxData提供的TICK工具栈(由Telegraf, InfluxDB, Chronograf, Kapacitor四个工具的首字母组成)中收集监控数据的一环,功能非常强 ...

  5. git 新建分支并切换到该分支_Git 从master拉取代码创建新分支 并且再将修改合并到master...

    开发过程中会从master主分支copy到另一个开发分支: 1.切换到master分支 git  checkout  master 2.获取最新的代码 git pull origin master 3 ...

  6. python-3.x- 序列操作

    1. list操作 A.添加元素 1 list = ["C++","C", "Java", "Python"] 2 &q ...

  7. accent, accept

    accent A colon (:) is used to represent a long vowel, e.g. sheet /ʃiːt/ and shit /ʃit/. The word bed ...

  8. Learning Spark中文版--第六章--Spark高级编程(1)

    Introduction(介绍) 本章介绍了之前章节没有涵盖的高级Spark编程特性.我们介绍两种类型的共享变量:用来聚合信息的累加器和能有效分配较大值的广播变量.基于对RDD现有的transform ...

  9. Oracle参数文件—pfile与spfile

    oracle的参数文件:pfile和spfile 1.pfile和spfile       Oracle中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件.它们是在数据库实例启动时候加载的, ...

  10. Java SSLSocket

    Java SSLSocket JSSE(Java Security Socket Extension)是Sun公司为了解决互联网信息安全传输提出的一个解决方案,它实现了SSL和TSL协议,包含了数据加 ...