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)