当父页面和子页面都属于同一个域下，那么它们之间的js方法是可以相互调用的。在调用方法前指定function所属对象即可，父页面获取iframe所属对象方法为：iframe的name.window.方法名()，iframe页面获取父页面所属对象方法为：parent.方法名()。
但是这里有一个非常重要的限制，由于浏览器基于安全考虑，是不允许js在不同域名间进行通信，所以父子页面必须属于同一个域，即使是相同主域下的不同二级域也是不行的。
对于父子页面完全属于两个不同的域名，那么它们之间永远无法直接进行通信；如果父子页面是属于同一个主域下的不同二级域，则可以使用强制设置document.domain的方式来达到让其互相通信。document.domain默认值是window.location.host，可以js中设置为window.location.host的上一级域，但是不能为根域，例如：可以在页面www.duankou.com设置document.domain为duankou.com，但是不能设置为other.duankou.com或com。
document.domain在一定程度上解决了不同二级域名页面的跨域问题。需要注意的是，如果父页面包含多个iframe且设置了document.domain，那么要与其进行通信的iframe也必须设置document.domain。
iframe 父窗口和子窗口相互的调用方法
1、IE中使用方法：
父窗口调用子窗口：iframe_ID.iframe_document_object.object_attribute = attribute_value
例子：onClick="iframe_text.myH1.innerText='http://www.pint.com';"
子窗口调用父窗口：parent.parent_document_object.object_attribute = attribute_value
例子：onclick="parent.myH1.innerText='http://www.pint.com';"
2、Firefox中使用方法：
上面在IE下没有问题，但在firefox下不正常。在firefox下，应该是如下调用方法：
父窗口调用子窗口：window.frames["iframe_ID"].document.getElementById("iframe_document_object").object_attribute = attribute_value
例： window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://hi.www.111cn.net";
子窗口调用父窗口：parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例： parent.document.getElementById("myH1").innerHTML = "http://www.111cn.net";
具体例子如下：
父页面：parent.html
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>parent</title> <script> function parentFunction() { alert('function in parent'); } function callChild() { |
|
子页面：child.html
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>child</title> <script> function childFunction() { alert('function in child'); } function callParent() { |
|