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. ALGO-145_蓝桥杯_算法训练_4-1打印下述图形

    记: 这里用到了printf("%*s%s%*s\n",n-i,"",arr,n-i,"");的写法, 其中%*s中的*代表该字符串s的个数 ...

  2. SpringMVC---400错误The request sent by the client was syntactically incorrect ()

    在SpringMVC中使用@RequestBody和@ModelAttribute注解时遇到了很多问题,现记录下来. @ModelAttribute这个注解主要是将客户端请求的参数绑定参数到一个对象上 ...

  3. Javascript之类型转换（二）

    前言 类型转换js中主要有以下几种情况: 1.条件判断时: 2.对象转基本类型时: 3.四则运算时: 4.‘==’操作符比较值时: 5.比较运算符时. 一.条件判断时 在条件判断时,除了 undefi ...

  4. uoj #49. 【UR #3】铀仓库

    http://uoj.ac/problem/49 这题二分答案可以做,同时存在另一个直接二分的解法. 考虑对每个点,二分能向左右延伸的最大半径,由于权值范围较大,不能O(1)查询向一侧走指定距离后到达 ...

  5. 指定分隔符连接数组元素join()

    join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回一个字符串,该字符串把数组中的各个元 ...

  6. Linux 下 MQ 的安装

    在WebSphere MQ 7.1版本以前,同时只能有一个产品的安装实例,在UNIX和Linux系统上,/usr/lib,/usr/bin和/usr/include目录下会增加一些软连接,也指向了这个 ...

  7. typescript可索引接口 类类型接口

    /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据, ...

  8. 做好平衡有多难？谈MMO的职业设计

    转自:http://www.gameres.com/804893.html 首先要明确个概念:平衡不是在YY好的职业设计基础上去做调整,而是从游戏设计的开始就要打造一套有标准.可调节的游戏设计框架. ...

  9. 开始创作自己的VR作品——VR故事叙述终极指南

    转自:http://www.52vr.com/article-1870-1.html       在8月份,YouTube Space LA开展了“VR Creator Lab”的活动,为期三个月.参 ...

  10. C# 自己动手实现Spy++（二）

    昨天已经实现了获取窗口的标题.句柄等信息,但是高亮部分还有问题,而且红色绘制框擦除也有问题,今天就又研究了下上述两个问题. 高亮部分红色框只显示左上的边框,而右下的显示不出来,如图: 代码如下: pu ...