经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面高度进行调整。由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。
·对于同父级域名下的自适应高度：jipiao.taobao.com/index.htm页面中嵌入jiudian.taobao.com/xxx.htm页面
1.0http://jipiao.taobao.com/index.htm中关键代码
viewplaincopytoclipboardprint?
1.<iframeid="J_selfAdapting"src="http://jiudian.taobao.com/xxx.htm"mce_src="http://jiudian.taobao.com/xxx.htm"frameborder="0"scrolling="no"style="height:0;"></iframe>
页面增加如下JS:
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3./**
4.*获取当前域
5.**/
6.function_getDomain(){
7.var_hostname=window.location.hostname.toString();
8.var_hosts=_hostname.split(".");
9.var_len=_hosts.length;
10.if(_len>2){
11.return_hosts[_len-2]+"."+_hosts[_len-1];
12.}
13.return_hostname;
14.}
15.document.domain=_getDomain();
16.})();
17.//--></mce:script>
2.子页面http://jiudian.taobao.com/xxx.htm中嵌入如下代码。即可。
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3./**
4.*获取当前域
5.**/
6.function_getDomain(){
7.var_hostname=window.location.hostname.toString();
8.var_hosts=_hostname.split(".");
9.var_len=_hosts.length;
10.if(_len>2){
11.return_hosts[_len-2]+"."+_hosts[_len-1];
12.}
13.return_hostname;
14.}
15.
16.window.onload=function()
17.{
18.//设置子页面的域
19.document.domain=_getDomain();
20.function_setHeight()
21.{
22.if(window.parent!=window)
23.{
24.try
25.{
26.//设置父级iframe的高度
27.parent.document.getElementById("J_selfAdapting").style.height=document.body.scrollHeight+'px';
28.}
29.catch(e)
30.{
31.}
32.}
33.//每隔2s设置一次，主要为了兼容子页面加载完毕之后高度再变化
34.setTimeout(_setHeight,2000);
35.}
36.//子页面加载完毕之后调用一次
37._setHeight();
38.}
39.})();
40.//--></mce:script>
·不同父级页面，例如jipiao.taobao.com,www.koubei.com域名完全不一样，解决办法是使用一个代理页面jipiao.taobao.com/proxy.htmjipiao.taobao.com/index.htm页面嵌入www.koubei.com/xxxx.htm，而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理，可以将高度写在后面jipiao.taobao.com/proxy.htm#500，表示500px高度。
1.jipiao.taobao.com/index.htm页面中关键代码：
viewplaincopytoclipboardprint?
1.<iframeid="J_selfAdapting"src="http://www.koubei.com/xxxx.htm"mce_src="http://www.koubei.com/xxxx.htm"frameborder="0"scrolling="no"style="height:0;"></iframe>
增加如下JS:
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3./**
4.*获取当前域
5.**/
6.function_getDomain(){
7.var_hostname=window.location.hostname.toString();
8.var_hosts=_hostname.split(".");
9.var_len=_hosts.length;
10.if(_len>2){
11.return_hosts[_len-2]+"."+_hosts[_len-1];
12.}
13.return_hostname;
14.}
15.document.domain=_getDomain();
16.})();
17.//--></mce:script>
2.www.koubei.com/xxxx.htm中关键代码：
viewplaincopytoclipboardprint?
1.<iframescrolling="no"frameborder="0"style="display:none;"mce_style="display:none;"src="http://jipiao.taobao.com/proxy.htm#597"mce_src="http://jipiao.taobao.com/proxy.htm#597"id="taobaoIframe">
2.</iframe>
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3.varpageHeight=document.body.scrollHeight;
4.document.getElementById('taobaoIframe').src='http://jipiao.taobao.com/proxy.htm#'+pageHeight;
5.})();
6.//--></mce:script>
3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下：
viewplaincopytoclipboardprint?
1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<htmlxmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
5.</head>
6.<body>
7.<mce:scripttype="text/javascript"><!--
8.(function(){
9./**
10.*获取当前域
11.**/
12.function_getDomain(){
13.var_hostname=window.location.hostname.toString();
14.var_hosts=_hostname.split(".");
15.var_len=_hosts.length;
16.if(_len>2){
17.return_hosts[_len-2]+"."+_hosts[_len-1];
18.}
19.return_hostname;
20.}
21.document.domain=_getDomain();
22.varheight=window.location.hash.substring(1);
23.try{
24.varel=window.top.document.getElementById('J_selfAdapting');
25.if(el){
26.el.style.height=height+'px';
27.}
28.}
29.catch(e){}
30.})();
31.//--></mce:script>
32.</body>
33.</html>
分享到：
相关推荐
针对`<iframe>`内容高度自适应，上述经典代码提供了一个解决方案。这段JavaScript函数`setIFrameHeight(iframe)`通过获取`<iframe>`内的内容文档（`contentDocument`），然后比较`body`和`documentElement`（HTML根...
标题提到的“iframe自动适应高度（完美自适应高度嵌套代码）”提供了一个解决方案，它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中，`iframe`是一种常用的元素，用于在当前页面中嵌入另一个HTML文档。然而，默认情况下，`iframe`的高度是固定的，这可能会导致内容显示不完全或者出现不必要...
"再谈iframe自适应高度"这个主题，关注的是如何使iframe的内容区域根据所加载页面的高度自动调整，以避免滚动条出现或者内容被截断的问题。在网页设计中，尤其是在构建响应式布局时，这是一个非常关键的优化点。 1....
### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
iFrame 自适应高度是前端开发中常见的问题，很多开发者在搜索引擎中搜索相关解决方案，但大多数文章只能解决静态高度的问题，而忽视了 JS 操作 DOM 之后的动态同步问题。同时，在浏览器兼容性方面也存在一定的漏洞。...
总之，“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具，它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件，可以避免手动计算和调整`iframe`...
"iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...
### iframe自适应高度实现方法详解 在网页设计与开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前文档中嵌入另一个HTML文档。然而，在实际应用过程中，经常会遇到`iframe`内容高度固定导致页面...
在网页设计中，`iframe`（Inline Frame）是一种嵌入其他网页或内容的标签，它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档，你可以得到更详细的步骤和解释，以便更好地理解和应用这些技术。
1. **JavaScript/jQuery解决方案**： 使用JavaScript或jQuery，我们可以监听`iframe`的`load`事件，当`iframe`中的内容加载完毕后，获取其内容的实际高度并设置为`iframe`的高度。例如，使用jQuery的一个简单示例：...
本文将深入探讨如何解决Iframe自适应高度的问题。 首先，我们需要了解Iframe的基本语法。在HTML中，创建一个Iframe的基本结构如下： ```html <iframe src=...
在网页开发中，`iframe`（Inline Frame）是一种嵌入式框架元素，它允许我们在一个HTML文档中嵌入另一个HTML文档。...通过查看并运行这些文件，你可以更好地理解并实践`iframe`自适应高度的JavaScript解决方案。
`iframe-resizer`库提供了一种解决方案，它允许父页面和子页面之间进行通信，动态调整`iframe`的高度。使用方法如下： - 首先，将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加...
### iframe跨域嵌套自适应高度 在网页开发过程中，`iframe`作为一种常见的网页元素，被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而，在实际应用中经常会遇到一些问题，如跨域限制、自适应高度调整以及...
本篇文章将深入探讨`iframe`自适应高度的解决方案，并结合实际应用场景进行分析。 首先，我们需要理解`iframe`的基本属性。`src`属性定义了要加载的URL，`width`和`height`分别定义了`iframe`的宽度和高度。在静态...
首先，我们来探讨同域名下的Iframe自适应高度的处理方法。当Iframe及其所嵌入页面位于同一域名时，可以通过JavaScript来获取嵌入页面的实际高度，并在Iframe的onload事件中设置其高度。具体做法是，在Iframe标签中...