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之父子页面通信的更多相关文章

  1. iframe父子页面通信

    一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...

  2. js Iframe与父级页面通信及IE9-兼容性

    一. postMessage window.postMessage()方法安全地启用Window对象之间的跨源通信:例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间. 二.语 ...

  3. 六）iframe 及父子页面之间获取元素、方法调用

    http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...

  4. 关于使用iframe的父子页面进行简单的相互传值

    当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢 ...

  5. HTML父子页面通信问题（showModalDialog）

    1. showModalDialog参数说明 window.showModalDialog(URL, ARGS,Features)(在父窗口中调用打开新的窗口) URL          --  必选 ...

  6. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  7. js之iframe父、子页面通信

    注意事项 一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断ifra ...

  8. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. iframe子页面与父页面通信

    同域下父子页面的通信 父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

随机推荐

  1. python的Socket网络编程

    计算机网络: 多台独立的计算机用网络通信设备连接起来的网络.实现资源共享和数据传递.比如,我们之前的学过的知识可以将D盘的一个文件传到C盘,但如果你想从你的电脑传一个文件到我的电脑上目前是做不到的; ...

  2. Windowsx64位安装pymssql并完成与数据库链接

    常流程只需要打开下载并按照常规方法安装mssql包即可在程序中import pymssql,不过安装mssql确实有些小麻烦. 从开始安装就开始出现了各种异常错误 首先出现sqlfront.h文件找不 ...

  3. 中级 jQuery 了解

    初级阶段的知识已经结束:中级要接触的东西:jQuery  php  css3  移动端: get Context("2d")   2d画布: draw Image()     绘制 ...

  4. Ring0 - Lookaside结构

    由于频繁的申请,回收内存会导致在内存上产生大量的内存"空洞".这时使用Lookaside. 1.每次申请固定大小的内存. 2.申请和回收的操作十分频繁. 实现原理: 他先向wind ...

  5. Eclipse使用Maven创建Web时错误：Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webap

    网上也有好多方法我没有试成功,不过我将maven的conf setting.xml里的 阿里镜像给注释就可以了,你们也可以试试

  6. [UE4]RPC，远程调用

    RPC 一.Remote Procedure Call:远程程序调用 二.一个进程调用另外一个进程上的函数 由于“Server-shoot”方法被标记为“在服务器上运行”,所以尽管是在第二个窗口(客户 ...

  7. VMware虚拟机上配置nginx后，本机无法访问问题（转载）

    转自:http://www.server110.com/nginx/201407/10794.html 把nginx装在CentOS上,用本机访问虚拟机的时候却出现了不能访问的问题,查了资料以后,原来 ...

  8. sqlserver基本增删查语句

    use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,StudentIdNo ,PhoneNumbe ...

  9. 2012 - AD FSMO操作主机角色 -- 作用

    林范围:(林中唯一) 架构主机角色(Schema Master) 定义所有域对象属性 域命名主机角色(Domain Naming Master) 控制域林内域的添加或删除(必须为GC)   域范围:( ...

  10. 0002 - Spring MVC 拦截器源码简析：拦截器加载与执行

    1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日 ...