昨天遇到的这个问题,觉得有必要记录一下。
简单介绍下原理: 现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。 记住:main.html和agent.html一定要同域啊。
main.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><title>iframe主页面</title></head> |
<body> |
<div style="border:1px solid #ccc;padding:10px;"><iframeid="frame_content" name="frame_content"src="iframe.html"width="100%"height="0"scrolling="no"frameborder="0"></iframe></div><br/>尾部<br/></body> |
</html> |
iframe.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><title>被iframe嵌套页面</title></head> |
<body> |
文字<br/><br /><br/><br /><br/><br /><br/><br /><br/><br />文字<br/><br /><br/><br /><br/><br /><br/><br /><br/><br />文字<br/><br /><br/><br /><br/><br /><br/><br /><br/><br />文字<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><iframeid="iframeC"name="iframeC"src=""width="0"height="0"style="display:none;"></iframe> |
<script type="text/javascript"> |
function sethash(){ |
hashH = document.documentElement.scrollHeight; |
urlC ="agent.html"; |
document.getElementById("iframeC").src=urlC+"#"+hashH; |
} |
window.onload=sethash; |
</script> |
关键的一步 agent.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><title>iframe中介页面</title></head> |
<body> |
<script> |
function pseth(){ |
var iObj= parent.parent.document.getElementById('frame_content'); |
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; //这一步在测试时,我发现有问题,浏览器iframeC 拒绝访问,可以 改 document.location.hash; |
iObj.style.height= iObjH.split("#")[1]+"px"; |
} |
pseth(); |
</script> |
</body> |