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. nump库的简单函数介绍

    1:ones函数(百度知道) ones()函数用以创建指定形状和类型的数组,默认情况下返回的类型是float64.但是,如果使用ones()函数时指定了数据类型,那么返回的就是该类型. 参考NumPy ...

  2. Python error: Microsoft Visual C++ 9.0 is required 解决方案

    换了新电脑,在使用python2.7 pip 安装ipython时,报错了 error: Microsoft Visual C++ 9.0 is required. Get it from http: ...

  3. css-去掉IE浏览器自带×号

    1.去除IE输入框的叉号 /* 去除IE输入框的叉号 */ ::-ms-clear, ::-ms-reveal{ display:none; } 2.前端多行展现代码,多余部分使用...代替 div{ ...

  4. ylbtech-Java-Runoob-高级教程-实例-数组：15. Java 实例 – 判断数组是否相等

    ylbtech-Java-Runoob-高级教程-实例-数组:15. Java 实例 – 判断数组是否相等 1.返回顶部 1. Java 实例 - 判断数组是否相等  Java 实例 以下实例演示了如 ...

  5. [C#][Report]Cry

    本文来自:https://wiki.scn.sap.com/wiki/display/BOBJ/Crystal+Reports%2C+Developer+for+Visual+Studio+Downl ...

  6. Jmeter（三十五）聚合报告

    Jmeter的聚合报告是一个非常nice的listener,接口测试以及性能测试方面都会用到这个nice的监听器. 那么优秀在什么地方呢?上图 日常工作中可能只关注这部分内容: 可是这里边的指标真的都 ...

  7. [UE4]结构体

    只有数据变量属性,没有函数和事件

  8. go语言功能代码

    一.数据类型转换 package main import ( "fmt" "strconv" ) func main() { //int到string str ...

  9. win10间歇性的找不到usb设备

    自从安装了win10,感觉掉了一个好大的坑. 比如win10经常找不到usb 设备,有时候过5-6分钟又有了.除了驱动的问题之外,有时候重启一下就好了. 今天又有一个小发现,笔记本为了省电,会把usb ...

  10. windows 日志解决方法

    1.sql server 2012 报错 MSSQLSERVER 服务无法使用当前配置的密码以 .\MSSQL_SF_A9JGSK 身份登录,错误原因如下: 此帐户的密码已过期. 要确保服务配置正确, ...