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. Nginx配置文件（nginx.conf）配置详解[转]

    转自:http://blog.csdn.net/tjcyjd/article/details/50695922 重新学习,发觉这篇文章写得很详细就摘录了! Nginx的配置文件nginx.conf配置 ...

  2. Linux系统下 Rsync 环境安装搭建

    一.Rsync简介 1.认识 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“Rsync算法”来使本地和远 ...

  3. Zabbix邮件告警提示Couldn't resolve host name解决办法

    zabbix设置好邮件告警,当有触发时邮件未发送 查看zabbix server日志,提示不能连接邮件发送服务器,但是ping是可以通的

  4. 南京网络赛G-Lpl and Energy【线段树】

    During tea-drinking, princess, amongst other things, asked why has such a good-natured and cute Drag ...

  5. SDL结合QWidget的简单使用说明

    SDL(Simple DirectMeida Layer)是一个简单的封装媒体库,功能主要涉及了相关于OpenGL或者DirectX的显卡硬件功能和一些鼠标,键盘等外设访问.这里主要只说明一下它的渲染 ...

  6. Mysql数据库安装与配置

    先介绍下dql,dml,ddl,dcl: 安装: 加上这一行: 接下来把mysql设置成随系统自动启动: 开放3306端口(如果是阿里云服务器需要修改安全规则而不是如下): 或者 这里注意,有时候没有 ...

  7. mysql 数据操作 单表查询 having 过滤

    SELECT 字段1,字段2... FROM 库名.表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 1.首先找到表 库.表 ...

  8. unittest框架（三）unittest+yaml数据驱动

    学习完了如何用yaml文件管理用例,如何进行单元测试,如何产生漂亮的测试报告,那么结合这几点,我们简单学习下unittest+yaml数据驱动来测试. 第一步:首先,我们建一个yaml文件,管理用例, ...

  9. python 操作 mysql 数据库 datetime 属性字段为 0000-00-00 00:00:00 的问题

    撇开 sqlalchemy, 先讲 MySQLdb 和 pymysql mysql 版本 mysql  Ver 14.14 Distrib 5.1.73 新建一个测试表 test, 结构如下: mys ...

  10. Django：学习笔记(9)——视图

    Django:学习笔记(9)——视图 基础视图 基于函数的视图,我们需要在使用条件语句来判断请求类型,并分支处理.但是在基于类的视图中,我们可以在类中定义不同请求类型的方法来处理相对应的请求. 基于函 ...