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单元测试框架之pytest 4 -- 断言

    From: https://www.cnblogs.com/fnng/p/4774676.html Python单元测试框架之pytest -- 断言 2015-08-31 23:57 by 虫师, ...

  2. pytest.10.使用fixture参数化测试预期结果

    From: http://www.testclass.net/pytest/test_api_with_expected_result/ 背景 接上一节v2ex网站的查看论坛节点信息的api. 我们在 ...

  3. 图像处理PILLOW的使用

    1.安装 pip install Pillow 2.使用 1)图片缩放 from PIL import Imageim = Image.open('dog.jpg') w,h = im.size #获 ...

  4. 将OpenVZ系统硬盘从200G升级到400G

    平时习惯性动作df了一下,结果发现...... ‘ 200G的磁盘空间快满了(99%),只剩下2G多了. 索性一下加到400G空间 目前为止很顺利. 但是OpenVZ这台需要关机再开机才行. 重新开机 ...

  5. rabbitmq的vhost与用户管理(转)

    原文地址:https://blog.csdn.net/leisure_life/article/details/78707338 当我们在创建用户时,会指定用户能访问一个虚拟机,并且该用户只能访问该虚 ...

  6. Unity中进程间通信——使用异步Socket

    开发Unity项目过程中,即时通信功能来完成服务器与客户端自定义的数据结构封装. 如果要序列化和数据封装参考:Unity3D之C#用Socket传数据包 蓝鸥3G封装的类 客户端脚本ClientScr ...

  7. Delphi 解决Utf8ToAnsi和Utf8DeCode转换编码为空的问题

    //delphi DecodeUtf8Str解决系统自带UTF8解码缺陷 function DecodeUtf8Str(const S: UTF8String): WideString; var le ...

  8. opencv 基础数据结构

    头文件:cxcore/include/cxtypes.h CvPoint: CvPoint:(构造cvPoint) CvPoint2D32f: CvPoint3D32f: CvSize: CvSize ...

  9. solr defType查询权重排序

    Solr的defType有dismax/edismax两种,这两种的区别,可参见:http://blog.csdn.net/duck_genuine/article/details/8060026 下 ...

  10. C#winform抓取百度,Google搜索关键词结果

    基于网站seo,做了一采集百度和Google搜索关键字结果的采集.在这里与大家分享一下 先看先效果图 代码附加:  1   private void baidu_Click(object sender ...