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. .NET获取Html字符串中指定标签的指定属性的值

    using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...

  2. Oracle Schema Objects——Index

    索引主要的作用是查询优化. Oracle Schema Objects 查看执行计划的权限:查看执行计划plustrace:set autotrace trace exp stat(SP2-0618. ...

  3. Scanline Fill Algorithm

    https://www.sccs.swarthmore.edu/users/02/jill/graphics/hw3/hw3.html http://web.cs.ucdavis.edu/~ma/EC ...

  4. 查看MySQL锁定情况

    SHOW STATUS LIKE '%Table_locks%' Table_locks_immediate | 105         | Table_locks_waited   | 3      ...

  5. python3 备份mysql小程序

    为了保证数据安全,一般都会定期备份数据库,备份数据库也有自己的命令可以执行,下面就是一个每天备份mysql数据库的一个小程序. mysql备份的命令如下: mysqldump -uroot -p123 ...

  6. 特定于类的内存管理---《C++必知必会》 条款36

    我们可以量身定制 operator new 和 operator delete 用于某个类类型,而不是必须使用标准版的 operator new 和 operator delete. 注意:我们不可以 ...

  7. 26. Remove Duplicates from Sorted Array(删除排序数组中的重复元素，利用排序的特性，比较大小)

      Given a sorted array, remove the duplicates in-place such that each element appear only once and r ...

  8. zw版【转发·台湾nvp系列Delphi例程】HALCON MoveRectangle

    zw版[转发·台湾nvp系列Delphi例程]HALCON MoveRectangle procedure TForm1.Button1Click(Sender: TObject);var img : ...

  9. FTRL与Online Optimization

    1. 背景介绍 最优化求解问题可能是我们在工作中遇到的最多的一类问题了:从已有的数据中提炼出最适合的模型参数,从而对未知的数据进行预测.当我们面对高维高数据量的场景时,常见的批量处理的方式已经显得力不 ...

  10. 【android】如何实现猿题库题目的排版

    最近我们的产品来了个新的模块,类似猿题库一样,给学生做题提高成绩的. 要求如下: 1:支持单选.多选.填空题 2:支持图片文字混排 3:输入框有交互,排版精致美观 4:为了体验优化,不能使用网页实现效 ...