父级页面: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. 从一个简单的Delete删数据场景谈TiDB数据库开发规范的重要性

    故事背景 前段时间上线了一个从Oracle迁移到TiDB的项目,某一天应用端反馈有一个诡异的现象,就是有张小表做全表delete的时候执行比较慢,而且有越来越慢的迹象.这个表每次删除的数据不超过20行 ...

  2. 【2020五校联考NOIP #6】最佳观影

    题意: 给出一个 \(k \times k\) 的网格和 \(n\) 次操作.其中 \(k\) 为奇数. 每次操作给出一个数 \(m\).每次你要找出一个三元组 \((x,l,r)\) 使得: \(r ...

  3. python8 标准模块和第三方模块

  4. Linux非root安装Python3以及解决SSL问题

    说明 接上一篇. [Linux]非root安装Python3及其包管理 上一篇虽然成功安装了Python3及一些常用的模块,但因为一直装不上SSL模块,导致一些包无法安装,尝试了不少方法都失败了(网上 ...

  5. 如何优雅地将printf的打印保存在文件中?

    我们都知道,一般使用printf的打印都会直接打印在终端,如果想要保存在文件里呢?我想你可能想到的是重定向.例如: $ program > result.txt 这样printf的输出就存储在r ...

  6. 分布式事务(4)---最终一致性方案之TCC

    分布式事务(1)-理论基础 分布式事务(2)---强一致性分布式事务解决方案 分布式事务(3)---强一致性分布式事务Atomikos实战 强一致性分布式事务解决方案要求参与事务的各个节点的数据时刻保 ...

  7. android studio Please configure Android SDK / please select Android SDK

    有可能是sdk文件损坏造成的. file->settings->appearance&behavior->system settings->android sdk-&g ...

  8. Java交换数组元素

    Java 交换数组元素 代码示例 import java.util.Arrays; import java.util.Collections; import java.util.List; impor ...

  9. SQLITE_BTREE_H

    sqlite3.c, 237436行 = 全部源文件,找东西比多文件查找方便多了:-),字符串查找一点都不慢. 不要太害怕,SQLite说它的代码里有非常多是用来做数据完整性检查和测试的.但愿B树,虚 ...

  10. Web安全学习二

    目录 常见漏洞攻防 SQL注入 注入分类 按技巧分类 按获取数据的方式分类 注入检测 权限提升 数据库检测 绕过技巧 CheatSheet SQL Server Payload MySQL Paylo ...