怎么让iframe自适应高度_框架

什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态 *** 作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：

方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。

方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM *** 作，那仍然可以用最简单最方便的传统处理方式：

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去 *** 作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS *** 作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_ahtml ，被包含页面 iframe_bhtm 和 iframe_chtml

主页面代码示例：

function reinitIframe(){

var iframe = documentgetElementById("frame_content");

try{

iframeheight = iframecontentWindowdocumentdocumentElementscrollHeight;

}catch (ex){}

}

windowsetInterval("reinitIframe()", 200);

</script>

一直执行，效率会不会有问题？

我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对bodyscrollHeight和documentElementscrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC "

在主页面追加以下测试代码，以输出这两个值，代码示例：

<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">

function checkHeight() {

var iframe = documentgetElementById("frame_content");

var bHeight = iframecontentWindowdocumentbodyscrollHeight;

var dHeight = iframecontentWindowdocumentdocumentElementscrollHeight;

alert("bHeight:" + bHeight + ", dHeight:" + dHeight);

}

</script>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

<div><button onclick="toggleOverlay()">Toggle Overlay</button>

</div>

</div>

function toggleOverlay() {

var overlay = documentgetElementById('overlay');

overlaystyledisplay = (overlaystyledisplay == 'none') 'block' : 'none';

}

</script>

下面列出以上代码在各浏览器的测试值：

（bHeight = bodyscrollHeight, dHeight = documentElementscrollHeight, 红色 = 错误值, 绿色 = 正确值）

层隐藏时

层展开时

bHeight

dHeight

bHeight

dHeight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。

但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe(){var iframe = documentgetElementById("frame_content");

try{

var bHeight = iframecontentWindowdocumentbodyscrollHeight;

var dHeight = iframecontentWindowdocumentdocumentElementscrollHeight;

var height = Mathmax(bHeight, dHeight);

iframeheight = height;

}catch (ex){}

}

windowsetInterval("reinitIframe()", 200);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。

可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”thisheight=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。

这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM *** 作的时候主页面无法监听到，只能DOM *** 作完了之后把高度变小了。

在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

function reinitIframe(){

var iframe = documentgetElementById("frame_content");

try{

var bHeight = iframecontentWindowdocumentbodyscrollHeight;

var dHeight = iframecontentWindowdocumentdocumentElementscrollHeight;

var height = Mathmax(bHeight, dHeight);

iframeheight = height;

}catch (ex){}

}

windowsetInterval("reinitIframe()", 200);

</script>

附Demo页面：主页面 iframe_ahtml ，被包含页面 iframe_bhtm 和 iframe_chtml

SHTML和HTML的区别,如果用一句话来解释就是:SHTML 不是HTML而是一种服务器 API,shtml是服务器动态产成的html

虽然两者都是超文本格式,但shtml是一种用于SSI技术的文件。也就是Server Side Include--SSI 服务器端包含指令。如果Web Server有SSI功能的话(大多数（尤其是基于Unix平台）的WEB服务器如Netscape Enterprise Server等均支持SSI命令)。

会对shtml文件特殊招待。先扫一次shtml文件看没有特殊的SSI指令现在。

有就按Web Server设定规则解释SSI指令。解释完后跟一般html一起掉去客户端。

shtml

使用SSI(Server Side Include)的html文件扩展名，SSI（Server Side Include)，通常称为"服务器端嵌入"或者叫"服务器端包含"，是一种类似于ASP的基于服务器的网页制作技术。

SSI工作原理：

将内容发送到浏览器之前，可以使用“服务器端包含 (SSI)”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用 SSI 包含时间/日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。

因为包含 SSI 指令的文件要求特殊处理，所以必须为所有 SSI 文件赋予 SSI 文件扩展名。默认扩展名是 stm、shtm 和 shtml

Web 服务器在处理网页的同时处理 SSI 指令。当 Web 服务器遇到 SSI 指令时，直接将包含文件的内容插入 HTML 网页。如果“包含文件”中包含 SSI 指令，则同时插入此文件。除了用于包含文件的基本指令之外，还可以使用 SSI 指令插入文件的相关信息（如文件的大小）或者运行应用程序或 shell 命令。

网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的HTML文件中（模板），以后我们要做的只是将文本传到服务器，让程序按照模板自动生成网页，从而使管理大型网站变得容易。

所以,利用SHTML格式的页面目的和 ASP 差不多，但是因为是 API 所以运转速度更快，效率更高,比ASP快，比HTML慢，但由于可以使用服务器端包含，因此使页面更新容易（特别是批量更新banner，版权等）,想象一下吧,你有一段 HTML,要在中间穿插一些特殊的服务端脚本,比如插入其他 HTML 段落,你选择 ASP 来完成这个任务,但是如果任务更繁重，需要更多的时间，比如 5 s,这个时候你不用 ASP 而用 SHTML,或许处理时间就只用 4 s 了

htm是html的缩写。例如，网页“computerhtml”可以缩写为“computerhtm”。这种写法的主要优点是字符数减少了一个。缺点在于，这种写法意义模糊，不容易记忆。htm的出现还有一个原因，在windows95还没有流行以前，一些 *** 作系统（DOS，windows31以及32）只支持三个字符长短的后缀名。因此如果将网页文件命名为html为后缀，那么将网页上传到某个只允许三个字符长度的网站服务器上时，服务器将不能识别网页。因此，将html同一缩写为htm。

不过现在大部分 *** 作系统都已经支持长文件名，同样也支持长后缀名，这些系统包括windows95/98/NT/2000/XP/2003系列、Mac OS以及UNIX系列 *** 作系统。因此如果现在创建新网站时，可以将网页后缀定为“html”来增强文件名的可读性。

不过，如果是在原网站基础上进行更新，就要注意文件名兼容的问题，如果原网络服务器只支持三个字符长的后缀名，就得保留htm这种形式的后缀。如果要更换网络服务器，而新网络服务器又恰好只支持三个字符长后缀名，那就得耐心的用“查找－替换”功能将所有的html替换为htm了。

size的取值范围是 1 到 7

也可以是 +1 到 +6 （表示当前size再+1到+6）

或者 -1 到 -6 （表示当前size再-1到-6）

顺便说说，font标签目前基本上已经废弃不用了，因为它完全受浏览器字体设置的限制，不符合div+css的布局需求。

A域名下的页面indexhtm中内嵌了一个iframe页面，iframe内引用的是B域名的sub-indexhtm页面，但是为了避免出

现在indexhtm页面中出现滚动条，需要明确知道sub-indexhtm页面的高度和宽度，可是sub-indexhtm的页面内容是不可控的，可能会根据不同用户页面大小会不一样；问题就是如何把sub-indexhtm页面的高度和宽度传递给indexhtm页面？

具体解决：

1、在indexhtm页面中声明一个js函数process(height, width);用来实现设置页面内iframe的高度和宽度；

2、

在sub-indexhtm页面中再内嵌一个隐藏的iframe，iframe的src指向A域名下的页面exhtmheight=xx&

width=yy，该页面没有任何内容，只是用来传递sub-indexhtm页面加载完之后的宽度和高度这两个数据的，页面内js拿到request

中的参数之后直接调用parentparentprocess(height, width);完成对父页面宽度和高度的设置；

如图：

以上就是关于怎么让iframe自适应高度全部的内容，包括:怎么让iframe自适应高度、html,shtml和htm的区别、htm是什么文件 htm文件如何打开等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9669071.html

怎么让iframe自适应高度

发表评论

评论列表（0条）