iframe父子页面js之间的调用
父级页面: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之间的调用的更多相关文章
- js和vue方法的相互调用(iframe父子页面的方法相互调用)。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- iframe父子页面调用小结
子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法 (子页面同理,需将js方 ...
- iframe 父子页面方法调用
在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...
- iframe父子页面通信
一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...
- iframe父子页面互调方法和属性
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...
- iframe父子页面相互调用方法,相互获取元素
父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...
- window.postMessage 在iframe父子页面数据传输
介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...
- Flash与JS之间相互调用以及参数传递
[AS3]ExternalInterface.call传多个参数的写法代码示例 import flash.text.TextField; ; ; var result:uint = ExternalI ...
随机推荐
- 【POJ3614 Sunscreen】【贪心】
题面: 有c头牛,需要的亮度在[min_ci,max_ci]中,有n种药,每种m瓶,可以使亮度变为v 问最多能满足多少头牛 算法 我们自然考虑贪心,我们首先对每头牛的min进行排序,然后对于每种药,将 ...
- ABC 210
A 按题意模拟. scanf("%lld%lld%lld%lld",&n,&a,&x,&y); std::cout<<n * x - ( ...
- Python基础之字典内置方法
目录 1. 字典 1.1 字典的作用 1.2 创建和使用字典 1.2.1 dict类 1.2.2 基本的字典操作 1.2.3 字典方法 1. 字典 映射:可以通过名称来访问其各个值的数据结构. 字典是 ...
- springcloud报Load balancer does not have available server for client: PROVIDER-SERVER
1.后台报错截图 这个的意思就是:负载均衡服务器中没有这个我自定义的PROVIDER-SERVER.开始我以为是Ribbon的原因,所以去折腾了一下,但是:最后不断往前推到之后发现本质是:在注册中心E ...
- HDFS03 HDFS的API操作
HDFS的API操作 目录 HDFS的API操作 客户端环境准备 1.下载windows支持的hadoop 2.配置环境变量 3 在IDEA中创建一个Maven工程 HDFS的API实例 用客户端远程 ...
- 日常Java 2021/10/17
今天开始Javaweb编译环境调试,从tomcat容器开始,然后mysql的下载,连接工具datagrip,navicat for mysql,然后就是编写自己的sql,安装jdbc,eclipse连 ...
- A Child's History of England.45
To forgive these unworthy princes was only to afford them breathing-time for new faithlessness. They ...
- D3学习-加载本地数据
在加载本地数据时,弄了很久都无法显示出来,后来才知道是要把数据文件和html文件都加载到服务器上面 这样就可以显示出来了,
- 100个Shell脚本——【脚本4】自定义rm命令
[脚本4]自定义rm命令 linux系统的rm命令太危险,一不小心就会删除掉系统文件. 写一个shell脚本来替换系统的rm命令,要求当删除一个文件或者目录时,都要做一个备份,然后再删除.下面分两种情 ...
- Android给页面添加横线和竖线
竖线 <View android:layout_width="1dip" android:layout_height="match_parent& ...