父级页面: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. 『MdOI R1』Treequery

    我们可以思考怎么做呢. 首先我们需要进行一些分类讨论: 我们先思考一下如果所有关键点都在 \(p\) 的子树内, 那显然是所有关键点的 \(Lca\) 到 \(p\) 距离. 如果所有关键点一些在 \ ...

  2. NFLSOJ 1060 - 【2021 六校联合训练 NOI #40】白玉楼今天的饭(子集 ln)

    由于 NFLSOJ 题面上啥也没有就把题意贴这儿了( 没事儿,反正是上赛季的题,你们非六校学生看了就看了,况且看了你们也没地方交就是了 题意: 给你一张 \(n\) 个点 \(m\) 条边的图 \(G ...

  3. 洛谷 P6667 - [清华集训2016] 如何优雅地求和(下降幂多项式,多项式)

    题面传送门 wjz:<如何优雅地 AK NOI> 我:如何优雅地爆零 首先,按照这题总结出来的一个小套路,看到多项式与组合数结合的题,可以考虑将普通多项式转为下降幂多项式,因为下降幂和组合 ...

  4. Codeforces 1513F - Swapping Problem(分类讨论+乱搞)

    Codeforces 题目传送门 & 洛谷题目传送门 简单题,难度 *2500 的 D2F,就当调节一下一模炸裂了的自闭的心情,稍微写写吧. 首先我看到这题的第一反应是分类讨论+数据结构,即枚 ...

  5. Nginx编译安装相关参数

    Nginx编译安装相关参数 Nginx插件安装 ------------------pcre------------------ cd /usr/local/source wget http://ww ...

  6. /etc/sudoers 文件

    sudo的权限控制可以在/etc/sudoers文件中查看到 如果想要控制某个用户(或某个组用户)只能执行root权限中的一部分命令, 或者允许某些用户使用sudo时不需要输入密码 格式一般都是 ro ...

  7. Redis源码解析(1)

    在文章的开头我们把所有服务端文件列出来,并且标示出其作用: adlist.c //双向链表 ae.c //事件驱动 ae_epoll.c //epoll接口, linux用 ae_kqueue.c / ...

  8. 静态库动态库的编译、链接, binutils工具集, 代码段\数据段\bss段解释

    #1. 如何使用静态库 制作静态库 (1)gcc *.c -c -I../include得到o文件 (2) ar rcs libMyTest.a *.o 将所有.o文件打包为静态库,r将文件插入静态库 ...

  9. 26. Linux GIT

    windows git 下载链接: Msysgit   https://git-scm.com/download/win 1 进入git bash进行第一次配置 git config --global ...

  10. Azkaban(一)【集群安装】

    目录 一.下载解压 二. 配置Mysql 三. 配置Azkaban Executor 四. 配置Azkaban WebServer 一.下载解压 1.下载地址:https://github.com/a ...