<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS操作iframe里的dom</title>
<meta name="keywords" content="JavaScript, 网络技术, dom, iframe, javascript" />
<meta name="description" content="使用JavaScript在IE和Firefox下进行iframe的DOM操作今天就写个完整的使用JavaScript进行iframe DOM操作的文章啦~跟大家讨论下IE和Firefox下iframe DOM操作的差异,然后写一个父窗口操作子窗口DOM,子窗口操作父窗口DOM,子窗口操作子窗口DOM的实例。" />
<style type="text/css">
body{
margin:0;
padding:0;
}
#wIframeA,#wIframeB{
width:400px;
height:400px;
float:left;
}
</style>
</head>
<body>
<h1 style="text-align:center">JS操作iframe里的dom</h1>
<p style="margin:0px auto;width:210px;display:block;"><a href="http://www.css88.com/archives/2343" title="使用JavaScript在IE和Firefox下进行iframe的DOM操作" target="_blank">文章地址</a> </p>
<div style="margin:10px auto;width:500px;height:40px;">
<input type="button" value="父窗口操作iframeA" οnclick="iframeA();" style="width:150px;float:left;"/>
<input type="button" value="将父窗口的h1标签内的代码复制到iframeA中" οnclick="iframeC();" style="float:left;"/>
</div>
<div id="pHello" style="margin:10px auto;width:360px;height:30px;">点击此处可通过iframeB的JavaScript函数,来替换哦~</div>
<div style="margin:10px auto;width:810px;height:300px;">
<iframe id="wIframeA" name="myiframeA" src="iframe_Box.html" scrolling="no" frameborder="0"></iframe>
<iframe id="wIframeB" name="myiframeB" src="iframeB.html" scrolling="no" frameborder="0"></iframe>
</div>
<script type="text/javascript">
function getIFrameDOM(iID){
return document.getElementById(iID).contentWindow.document;
} //必须先写好这个功能函数
getIFrameDOM("wIframeA").getElementById('hello').style.background = "red";//调用功能函数
}
function iframeC(){
getIFrameDOM("wIframeA").getElementById('hello').innerHTML = document.getElementsByTagName("h1")[0].innerHTML;//调用功能函数
}
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3448069-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>