`
chenjian_791
  • 浏览: 20930 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

Iframe自适应

阅读更多
同域时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> 


也可以用这种方法,解决跨二级域
<script language="JavaScript" type="text/javascript">
document.domain = "51.com";
var mtv_height = document.body.scrollHeight;
try{ document.body.onselect = document.body.onselectstart = function() { return false; }; parent.document.getElementById('mtv_iframe').style.height = mtv_height; }catch(e){}
</script>


参考网站:http://www.ccvita.com/376.html
分享到:
评论

相关推荐

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时,如何让`&lt;iframe&gt;`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...

    jquery对iframe自适应高度插件

    为了解决这个问题,`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个插件是专门为了解决`iframe`高度自适应的问题而设计的,它允许`iframe`根据其内部内容自动调整高度,确保用户无需滚动就...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

    iframe自适应高度兼容各主流浏览器

    iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...

    IFRAME自适应

    "IFRAME自适应"是针对不同设备和屏幕尺寸,确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中,IFRAME自适应尤其重要,因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。...

    iframe自适应高度,亲测完美兼容IE6-9,Chrome,Opera,firefox,safari

    因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...

    基于jquery的兼容各种浏览器的iframe自适应高度的脚本

    在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...

    多层嵌套iframe 自适应高度的解决方法

    多层嵌套iframe 自适应高度的解决方法

    iframe自适应高度的简单解决办法

    在网页设计中,`iframe`(Inline Frame)是一种嵌入其他网页或内容的标签,它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档,你可以得到更详细的步骤和解释,以便更好地理解和应用这些技术。

    iframe自适应高度说明文档

    ### iframe自适应高度详解 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,默认情况下,`iframe`的高度是固定的,这可能导致页面布局问题,尤其是当嵌入的内容高度不确定...

    iframe自适应高度(DOM动态操作)

    ### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...

    iframe自适应高度 .txt

    ### iframe自适应高度知识点详解 #### 一、概述 在网页设计与开发中,`&lt;iframe&gt;`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。随着响应式设计的需求日益增加,如何使`&lt;iframe&gt;`内...

    js实现iframe自适应高度

    为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是...

Global site tag (gtag.js) - Google Analytics