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. java设计模式----迭代子模式

    顺序访问聚集中的对象,主要用于集合中.一是需要遍历的对象,即聚集对象,二是迭代器对象,用于对聚集对象进行遍历访问. 迭代子模式为遍历集合提供了统一的接口方法.从而使得客户端不需要知道聚集的内部结构就能 ...

  2. 微信小程序 --- 完成小程序支付功能

    最近开发小程序,一直在看小程序的支付.经过一天的努力,小程序支付功能最终实现了. 下面感谢 csdn 博主:千堆雪惹尘埃 发布的 " 小程序与php 实现微信支付 " 原文地址: ...

  3. Oracle Database Memory Structures

    Oracle Database creates and uses memory structures for various purposes. For example, memory stores ...

  4. Ubuntu 16.04 安装和配置 Redis

    因为发现之前手动安装的 redis 与现有的教程不一样,所以总结统一一下安装的标准步骤. 安装依赖项 为了获取最新版本的 Redis,我们将从源代码进行编译和安装.下载源代码之前,需要先安装一些编译所 ...

  5. 170615、spring不同数据库数据源动态切换

    spring mvc+mybatis+多数据源切换 选取Oracle,MySQL作为例子切换数据源.mysql为默认数据源,在测试的action中,进行mysql和oracle的动态切换. 1.web ...

  6. Oracle数据类型number

    oracle数值类型只有number number(变长) 1.number可以存放整数,可以存放小数: 2.number(p,s) 说明: p表示有效位,s为小数位:范围p[1,38],s[-84, ...

  7. proxy,https,git,tortoise git,ssh-agent,ssh-add,ssh,ssl,rsync

    看具体应用了,一般的文件复制使用scp,增量同步使用rsync.rsync的认证可以使用ssh,还可以是rsync自己的密码文件. ssh-keygen -l 察看 fineprint 5.1 通过p ...

  8. Web开发者应知的URL编码知识（转）

    原文出处: lunatech   译文出处:oschina - 桔子, lwei, 史涛, Khiyuan, super0555, LinuxQueen, 抛出异常的爱 本文首先阐述了人们关于统一资源 ...

  9. 人人网张铁安：Feed系统架构分析（转）

    原文:http://www.csdn.net/article/2010-07-26/277273 继成功举办首期TUP活动后,日前在北京丽亭华苑酒店鸿运二厅,由CSDN和<程序员> 杂志联 ...

  10. spring登录验证拦截器和根据用户角色登录

    大家都知道spring的用户登录拦截器,确实省去了程序员不少的精力,下面说说我在项目中使用的感受. 德安微信管理后台是管理多个微信帐号的平台,登录到平台的用户有三个角色,游客和微信帐号管理员.超级管理 ...