参考自:
http://www.ccvita.com/376.html
同域时Iframe高度自适应
下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。
<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //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 width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="kimi.php"></iframe>
跨域时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的高度。最终实现预期的目标。
iframe主页面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;">
<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嵌套页面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 />
<iframe id="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>
</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>
分享到:
相关推荐
"Iframe 高度自适应,js 控制 Iframe 高度自适应" Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度,以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript ...
这种技术常被用来实现...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点,实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中,还要考虑到兼容性问题,确保在不同浏览器和设备上都能正常工作。
iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js
### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`<iframe>`标签。然而,默认情况下,`<iframe>`的高度是固定的,当其内部内容发生变化时,可能...
### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...
jsp 页面 iframe 高度自适应的 js 代码详解 jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素,並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用,例如在某些网页中,我们...
iframe包含的页面的高度,兼容性好,iframe高度自适应
用jQuery实现iframe高度自适应 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function() { function resizeIframe() { var iframe = $('#myIframe'); if ...
### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就需要用到`<iframe>`标签。但是,默认情况下,`<iframe>`的高度是固定的,这往往会导致...
然而,`<iframe>`的高度自适应问题常常困扰着开发者,尤其是当`<iframe>`内部的内容动态加载或者变化时,如何让`<iframe>`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...
"iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)"这个标题所指向的,就是一种跨浏览器的策略,确保iFrame内容无论何时更新,都能自动调整其高度,从而避免滚动条的出现和内容溢出。...
1. **Iframe高度自适应原理** - 通常,Iframe的高度是由其内容决定的,但浏览器默认并不会自动更新其高度以适应内容的变化。为了解决这个问题,我们需要编写JavaScript代码来检测Iframe内部页面的加载状态,并根据...
标题提到的“可编辑iframe高度自适应”问题,主要涉及如何确保`iframe`的高度能根据其内容动态调整,从而提供良好的用户体验,避免滚动条的出现或页面布局的混乱。`iframe`高度自适应是解决这个问题的关键技术。 ...
"Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...
`iframe`的使用涉及到许多关键点,尤其是高度自适应和多浏览器兼容性,这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...
标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
这个简单的JavaScript解决方案能帮助我们实现`iframe`的高度自适应,使得内容始终完全显示,避免滚动条的出现。然而,实际应用中可能还会遇到其他复杂情况,如延迟加载、动态插入的`iframe`等,这时可能需要结合更多...
为了实现iframe高度自适应的功能,我们通常需要借助于JavaScript库来简化开发过程,其中jQuery无疑是一个广受欢迎的选择。jQuery提供了一套简洁的API,可以让我们轻松地进行DOM操作、事件处理以及动画效果等操作。在...