1.定义

frames[]是窗口中所有命名的框架组成的数组。这个数组的每个元素都是一个Window对象，对应于窗口中的一个框架。

2.用法

假设iframe 是一个以存在的 iframe 的 ID 和 NAME 值，获取iframe的方法有：

document.getElementById(“iframe”);  (获取的是 iframe 元素，可改变iframe的 src 或者 border , scrolling 等 attributes)

window.frames[“iframe”];  //   window.frames[window.frames.length - 1]     (获取的是window窗体，可通过其 document 属性操作dom， 可使用iframe内的函数、变量)

例子：

$(window.frames["iframe"].document).find("#name").val("");

3. 扩展  iframe 跨页面通信

parent.html

<html>

<head>

    <style>

        h1{

            color: #5dd;

        }

    </style>

</head>

<body>

    <h1>parent</h1>

    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()" />

    <iframe name="myFrame" id="iframea" src="child.html" onload="load()"></iframe>

    <script type="text/javascript">

        function say() {

            alert("parent.say");

        }

        function callChild() {

            myFrame.window.say();

            myFrame.window.document.getElementById("button").value = "parent调用结束";

        }

        function load(){

            // console.log(document.getElementById('iframea').contentDocument.getElementById('button'));

            console.log(document.getElementById('iframea').contentWindow.document.getElementById('button'));

        }

    </script>

</body>

</html>

child.html

<html>

<head>

    <style>

        body{

            background-color: #666;

        }

        h1{

            color:red;

        }

    </style>

</head>

<body>

    <h1>chlid</h1>

    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />

    <script type="text/javascript">

        function say() {

            alert("child.say");

        }

        function callParent() {

            parent.say();

            parent.window.document.getElementById("button").value = "child调用结束";

        }

    </script>

</body>

</html>

知识点：

window.parent 获取上一级的window对象

window.top 获取最顶级容器的window对象
window.self 返回自身window的引用

iframe.contentWindow, 获取iframe的window对象

iframe.contentDocument, 获取iframe的document对象

判断iframe是否加载完成有两种方法：

1. iframe上用onload事件
2. 用document.readyState=="complete"来判断

js在iframe子页面操作父页面元素代码：  window.parent.document.getElementByIdx_x("父页面元素id");

在iframe中调用父页面中定义的方法和变量：   window.parent.window.parentMethod();      window.parent.window.parentValue;

jquery在iframe子页面获取父页面元素代码如下:    $("#objid",parent.document)

js在父页面获取iframe子页面元素代码如下:     window.frames["iframe_ID"].document.getElementByIdx_x("子页面元素id");

父页面操作iframe子页面的方法和变量      window.frames["iframe_ID"].window.childMethod();      window.frames["iframe_ID"].window.childValue;

jquery在父页面获取iframe子页面的元素       $("#objid",document.frames('iframename').document)

window.frames && iframe 跨页面通信的更多相关文章

  1. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  2. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

  3. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  4. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  5. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  6. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  7. iframe父子页面通信

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

  8. 对iframe跨域通信的封装

    github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...

  9. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

随机推荐

  1. 【转】stm32中断嵌套全攻略

    断断续续学习STM32一学期了,时间过的好快,现在对STM32F103系列单片机的中断嵌套及外部中断做一个总结,全当学习笔记.废话不多说,ARM公司的Cortex-m3 内核,支持256个中断,其中包 ...

  2. 修改Docker默认存储位置的方法

    在日常使用中由于我们的根目录通常都比较小,如果想大量存储容器镜像的话很容易导致根目录写满 docker 默认的数据目录是/var/lib/docker 我们想要移动数据目录可以按照下面说明操作即可. ...

  3. 【asm】64位编译32位汇编需要注意的

    汇编语言在32位和64位下有区别    32位的汇编在代码前增加.code32    as可以通过--32指定生成32位汇编 在64位系统下ld链接生成32位程序:    ld: i386 archi ...

  4. python 使用qqwry.dat获取ip物理地址：速度快

    # -*- coding: utf-8 -*- import socket import struct class IPAddresss: def __init__(self, ipdbFile): ...

  5. mysql 约束条件 auto_increment 自动增长目录

    mysql 约束条件 auto_increment 自动增长 mysql 约束条件 auto_increment 自动增长起始值 布长 起始偏移量 mysql 约束条件 auto_increment ...

  6. PAT 1129 Recommendation System[比较]

    1129 Recommendation System(25 分) Recommendation system predicts the preference that a user would giv ...

  7. Windows Server 2008 R2(X64) MSDN镜像简体中文版与英文版ISO下载及Key激活码

    Windows Server 2008 R2 MSDN ISO镜像简体中文版 文件名:cn_windows_server_2008_r2_standard_enterprise_datacenter_ ...

  8. windows live writer backup

    windows live writer backup备份:http://wlwbackup.codeplex.com/

  9. Spring 整合Mybatis 出现了Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception is org.apache.commons.dbcp.SQLNestedException: Cannot create Poola

    我出现的 报错信息如下: ### Error querying database. Cause: org.springframework.jdbc.CannotGetJdbcConnectionExc ...

  10. InFusion错误类型分析

    1       God Class 1.1     特征 上帝类通常过多的操纵其他类的数据,从而破坏了类的封装性.上帝类从其他类中获得功能,同时增加了自身的耦合性,通常会导致自己具有规模过大和较高的复 ...