javascript关于Iframe父窗口和子窗口交互

来源：互联网发布：红太阳大数据产业中心编辑：程序博客网时间：2024/06/05 02:27

//兼容IE、Firefox的iframe DOM获取函数function getIFrameDOM(id){return document.getElementById(id).contentDocument || document.frames[id].document;}

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" /></head><body><div id="pHello" style="margin:10px auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数，来替换哦~</div><iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" frameborder="1"></iframe><iframe id="wIframeB" name="myiframeB" src="b.html" scrolling="no" frameborder="1"></iframe><div style="margin:10px auto;width:300px;height:40px;"><input type="button" value="父窗口操作iframeA" onclick="iframeA();" style="width:150px;float:left;"/><input type="button" value="父窗口操作iframeB" onclick="iframeB();" style="width:150px;float:left;"/></div><script type="text/javascript">function iframeA(){var a = getIFrameDOM("wIframeA");a.getElementById('hello_a').style.background = "red";}function iframeB(){var a = getIFrameDOM("wIframeB");a.getElementById('hello_b').style.background = "green";}function getIFrameDOM(id){return document.getElementById(id).contentDocument || document.frames[id].document;}</script></body></html>

a.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" /></head><body><div id="hello_a">Hello a.html</div><script></script></body></html>

b.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" /></head><body><div id="hello_b">Hello b.html</div><input type="button" value="子窗口操作父窗口" onclick="parentIframe();" style="width:150px;float:left;"/><input type="button" value="子窗口操作iframeA" onclick="iframeA();" style="width:150px;float:left;"/><script type="text/javascript">function iframeA(){var a = parent.getIFrameDOM("wIframeA");a.getElementById('hello_a').style.background = "blue";}function parentIframe(){parent.document.getElementById("pHello").innerHTML = "<p style='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O哈哈~用子窗口B就可以替换你！不服吗？</p>";}</script></body></html>

注意：

--------------------------------------------

在firefox下，iframe背景默认的是透明的，在IE下默认不是透明的，

我们可以使用allowTransparency='true' 来设置IE下的iframe为透明，

另外我们使用scrolling ='no' frameborder='0'分别来实现iframe页面没有滚动条，边框宽度。

动态将Iframe背景置为透明

iframeObj.allowTransparency = true;