iframe之父子页面通信
iframe之父子页面通信
1、获取 子页面 的 window 对象
在父页面中,存在如下两个对象
window.frames
document.iframeElement.contentWindow
可以获取到 子页面 window 对象
// iframe id
document.getElementById('menuIframe').contentWindow // iframe name
window.frames['menuIframe'].window // iframe index 当前窗体的第几个 iframe
window.frames[1].window
既然拿到了 window 对象,那函数和DOM就到手了。
2、子 iframe 获取 父页面
window.parent 对象
window.top对象
// 判断当前页面是否是 iframe 或 顶级页面
window.parent == window
window.top == window
window.parent 即为当前页面的上一级页面的 window 对象,如果当前页面已是 顶层 页面,则 window.parent 就是自己。
3、小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="/sub.html" name="iframeContainer" id="iframeContainer"></iframe>
<script type="text/javascript">
function parentHello() {
alert("this is parent hello function!");
}
window.frames['iframeContainer'].subHello();
</script>
</body>
</html> <!-- sub.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function subHello() {
alert("this is sub hello function!");
} window.parent.parentHello();
</script>
</body>
</html>
转载自:https://my.oschina.net/sallency/blog/1618971
iframe之父子页面通信的更多相关文章
- iframe父子页面通信
一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...
- js Iframe与父级页面通信及IE9-兼容性
一. postMessage window.postMessage()方法安全地启用Window对象之间的跨源通信:例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间. 二.语 ...
- 六)iframe 及父子页面之间获取元素、方法调用
http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...
- 关于使用iframe的父子页面进行简单的相互传值
当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢 ...
- HTML父子页面通信问题(showModalDialog)
1. showModalDialog参数说明 window.showModalDialog(URL, ARGS,Features)(在父窗口中调用打开新的窗口) URL -- 必选 ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- js之iframe父、子页面通信
注意事项 一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断ifra ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- iframe子页面与父页面通信
同域下父子页面的通信 父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset ...
随机推荐
- python的Socket网络编程
计算机网络: 多台独立的计算机用网络通信设备连接起来的网络.实现资源共享和数据传递.比如,我们之前的学过的知识可以将D盘的一个文件传到C盘,但如果你想从你的电脑传一个文件到我的电脑上目前是做不到的; ...
- Windowsx64位安装pymssql并完成与数据库链接
常流程只需要打开下载并按照常规方法安装mssql包即可在程序中import pymssql,不过安装mssql确实有些小麻烦. 从开始安装就开始出现了各种异常错误 首先出现sqlfront.h文件找不 ...
- 中级 jQuery 了解
初级阶段的知识已经结束:中级要接触的东西:jQuery php css3 移动端: get Context("2d") 2d画布: draw Image() 绘制 ...
- Ring0 - Lookaside结构
由于频繁的申请,回收内存会导致在内存上产生大量的内存"空洞".这时使用Lookaside. 1.每次申请固定大小的内存. 2.申请和回收的操作十分频繁. 实现原理: 他先向wind ...
- Eclipse使用Maven创建Web时错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webap
网上也有好多方法我没有试成功,不过我将maven的conf setting.xml里的 阿里镜像给注释就可以了,你们也可以试试
- [UE4]RPC,远程调用
RPC 一.Remote Procedure Call:远程程序调用 二.一个进程调用另外一个进程上的函数 由于“Server-shoot”方法被标记为“在服务器上运行”,所以尽管是在第二个窗口(客户 ...
- VMware虚拟机上配置nginx后,本机无法访问问题(转载)
转自:http://www.server110.com/nginx/201407/10794.html 把nginx装在CentOS上,用本机访问虚拟机的时候却出现了不能访问的问题,查了资料以后,原来 ...
- sqlserver基本增删查语句
use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,StudentIdNo ,PhoneNumbe ...
- 2012 - AD FSMO操作主机角色 -- 作用
林范围:(林中唯一) 架构主机角色(Schema Master) 定义所有域对象属性 域命名主机角色(Domain Naming Master) 控制域林内域的添加或删除(必须为GC) 域范围:( ...
- 0002 - Spring MVC 拦截器源码简析:拦截器加载与执行
1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日 ...