由于历史遗留和自己需求的原因，没有用模板页，而选择了Iframe（iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。）。Iframe引入简单，但是让高度自适应却也让我吃了点苦头。。。原先以为将其高度Height设成auto就高度了，没想到Chrome和FF上根本就无法自适应。如何解决Iframe高度自适应呢？我的想法是用JS先同步获取页面的高度，再将高度赋给Iframe的高。
HTML Code：
<iframe id="iframContent" name="ifreamMyContent" src="MyInfo.aspx" width="100%"onload="Javascript:SetCwinHeight()"
height="1" frameborder="0" marginwidth="0" marginheight="0"scrolling="no"></iframe>
JS Code：
<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("iframContent"); //iframe id
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
这样就可以解决Iframe高度自适应的问题，但是这种方式只能应用于同域间的页面，而当跨域请求页面时，这种方法显然是不适用的。如何解决跨域iframe高度自适应？对于这个问题的解决我只有模糊的思路，就是避开Javascript的跨域限制，然而具体怎么实现，由于时间关系，我也没去研究，只是在网上找到了一个不错的解决方案：
【原理：现有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的高度。最终实现预期的目标。】
【代码如下：】
Ifream的主界面Main.html Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe主页面</title></head>
<body>
<div style="</SPAN>
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%"
height="0" scrolling="no" frameborder="0">
</iframe>
</div>
<br /><br />
</body>
</html>
Iframe嵌套的页面 Ifream.html Code：
</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 />
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="</SPAN>>
<script type="text/javascript">
function sethash() {
hashH = document.documentElement.scrollHeight;
urlC = "agent.html";
document.getElementById("iframeC").src = urlC + "#" + hashH;
}
window.onload = sethash;
</script>
</body>
</html>
Iframe的中介页面 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;
iObj.style.height = iObjH.split("#")[1] + "px";
}
pseth();
</script>
</body>
</html>
当然可能还有更好的方法，这里只整理近期学习的一些笔记，如果有Bug，请不吝指教。
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
