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. 数据仓库专题20-案例篇：电商领域数据主题域模型设计v0.2(改进意见征集中）

    一.电商分类(平台+自营+复合) (1)平台型电商:淘宝+天猫+百度Mall等: (2)自营型电商: 2.1 综合型:京东(早期)+当当(早期): 2.2 垂直型:好像这种类型越来越少了: (3)复合 ...

  2. ghost之后仍然中病毒----与病毒的斗争

    ghost之后仍然中病毒----与病毒的斗争我的电脑系统是XP,从来都没有安装任何杀毒软件,所有的软件都是安装在C盘的,感觉系统卡顿就用Windows一键还原(基于DOS下的ghost)还原一下,一直 ...

  3. SpringSecurity-ConcurrentSessionFilter的作用

    ConcurrentSessionFilter主要有两个功能: (1)每次request时调用SessionRegistry的refreshLastRequest(String)更新session的最 ...

  4. 阿里云ECS安装Kubernetes问题收集与解答

    问题1 kubernetes pod启动报错open /etc/docker/certs.d/registry.access.redhat.com/redhat-ca.crt: no such fil ...

  5. 字符串分割split()

    知识讲解: split() 方法将字符串分割为字符串数组,并返回此数组. 语法: stringObject.split(separator,limit) 参数说明: 注意:如果把空字符串 (" ...

  6. 网站优化URL需要注意的几个细节

     原文地址:http://www.douban.com/note/474016612/   一个好的URL结构无论是对搜索引擎,还是用户,都具有非常重要的作用,那么什么样的URL才是既能面向搜索引擎, ...

  7. tesseract-ocr4.0 安装部署及训练验证码识别

    1.  下载最新版本的leptonica,  leptonica-1.74.1.tar.gz   2. 编译安装 tar -zxvf leptonica-.tar.gz cd leptonica- . ...

  8. Zabbix系统中的历史数据和趋势数据

    原文:http://blog.chinaunix.net/uid-9411004-id-4139807.html 或许读者还记得,我们在介绍如何创建一个监控项目时,我们介绍过在“配置项目”表单页面上有 ...

  9. log4net 配置允许同时写日志到同一个文件

    RollingFileAppender appender = new RollingFileAppender();... appender.LockingModel = new FileAppende ...

  10. CRM 实体列名和标签名称

    CREATE VIEW v_entity_attribute AS SELECT EntityView.Name AS EntityName, LocalizedLabelView_1.Label A ...