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. 微信小程序 --- 获取当前坐标

    获取位置:get.location type:wgs84(是全球定位系统,获取的坐标,gcj02是国家测绘局给出的坐标) btnclick:function(){ wx.getLocation({ t ...

  2. C++ string append方法的常用用法

    append函数是向string的后面追加字符或字符串. 1).向string的后面加C-string string s = “hello “; const char *c = “out here “ ...

  3. Drools规则引擎

    一.简介 Drools is a Business Rules Management System (BRMS) solution. It provides a core Business Rules ...

  4. Oracle安装部署之 timesten install on redhat6.5

    一.安装前检查 [root@localhost ~]# cat /etc/redhat-release Red Hat Enterprise Linux Server release 6.5 (San ...

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

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

  6. [Axiom 3D]1.初识Axiom

    1. 简介 The Axiom 3D Rendering Engine is a fully object oriented 3D graphics engine using C# and the . ...

  7. kafka详解

    一.基本概念 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语:Kafk ...

  8. Swagger2 生成 Spring Boot API 文档

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.本文主要介绍了在 Spring Boot 添加 Swagger 支持, 生成可自动维护的 A ...

  9. linux进程间通讯的几种方式的特点和优缺点

    # 管道( pipe ):管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进程间使用.进程的亲缘关系通常是指父子进程关系.# 有名管道 (named pipe) : 有名管道也是 ...

  10. c/c++ json使用

    比如出名的有CJson,c++一般用jsoncpp http://sourceforge.net/projects/jsoncpp/ jsoncpp:http://www.cnblogs.com/fe ...