window.frames && iframe 跨页面通信
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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)