Iframe高度自适应
2011-07-31 20:29
169 查看
由于历史遗留和自己需求的原因，没有用模板页，而选择了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，请不吝指教。
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，请不吝指教。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 转载：iframe全跨域高度自适应解决方案
- 新浪旧事-iframe自适应高度
- iframe自适应高度
- css实现iframe的高度自适应
- iframe自适应高度的多种方法方法小结
- 自适应高度div内嵌iframe高度被撑开问题解决
- 关于iframe内页高度自适应
- 解决IFrame高度自适应
- iframe自适应高度
- Iframe高度自适应（兼容IE/Firefox、同域/跨域）
- 实现iFrame自适应高度，原来很简单！
- html之小积累-.-iframe自适应高度
- iframe之自适应高度
- jQuery实现iframe的自适应高度
- 三谈Iframe自适应高度[转自口碑网UED博客]
- 基于jquery后台框架设计(自适应高度，iframe简易版)
- jquery iframe跨域自适应高度。子页面分页，刷新父页面
- jQuery解决iframe高度自适应代码
- iframe 自适应高度
- Iframe自适应高度