父级页面: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. GWAS数据分析常见的202个问题?

    生信其实很简单,就是用别人的工具调参就行了.生信也很折腾,哪一步都可能遇到问题,随时让你疯掉(老辩证法了~).但是,你遇到的问题大部分人也都经历过.这时,检索技能就显得很重要了.平时Biostar和S ...

  2. windows下的python安装pysam报错

    安装pysam时报错: 指定版本仍报错: 使用pysam-win安装: 但是import时不行: 貌似pysam在windows下难以正常配置,还是在Linux中用吧. https://www.jia ...

  3. 远程登录Linux系统及上传下载文件

    目录 1. 远程登录Linux系统 1.1 为什么要远程登录 1.2 Xshell6安装 1.3 连接登录 1.3.1 连接前提 1.3.2 Xshell连接配置 2. 远程上传下载文件 2.1 Xf ...

  4. 07 MySQL安装图解--Windows版本

    MySQL安装图解 使用微信扫码关注微信公众号,并回复:"MySQL环境",免费获取下载链接! 1.安装MySQL 2.校验MySQL 3.登录MySQL 登录MySQL:mysq ...

  5. LeetCode 从头到尾打印链表

    LeetCode 从头到尾打印链表 题目描述 输入一个链表头节点,从尾到头反过来返回每个节点的值(用数组返回). 示例 1: 输入:head = [1,3,2] 输出:[2,3,1] 一得之见(Jav ...

  6. Vue相关,Vue生命周期及对应的行为

    先来一张经典图 生命钩子函数 使用vue的朋友们知道,生命周期函数长这样- mounted: function() { } // 或者 mounted() { } 注意点,Vue的所有生命周期函数都是 ...

  7. myatoi

    atoi (表示 ascii to integer)是把字符串转换成整型数的一个函数,应用在计算机程序和办公软件中.int atoi(const char *nptr) 函数会扫描参数 nptr字符串 ...

  8. iOS-调用系统的短信和发送邮件功能,实现短信分享和邮件分享

    一.邮件分享 1.iOS系统自带邮件设置邮箱(此处以QQ邮箱为例)(http://jingyan.baidu.com/album/6181c3e084cb7d152ef153b5.html?picin ...

  9. OkHttp3 使用

    导入 compile 'com.squareup.okhttp3:okhttp:3.3.0' GET请求 String url = "https://www.baidu.com/" ...

  10. 【JAVA】【Basic】MacOS上搭建JAVA开发环境

    1. JRE 1.1. 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html 1.1.1. dmg格式安装: ...