`

jquery 实现iframe 自适应高度

阅读更多
超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
注意别放错地方了哦。



iframe代码,注意要写ID


<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码1:

//注意:下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});


jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
 
自己做的点补充
<iframe name="rightIframeName" id="rightIframe" width="824px" height="100px" scrolling="no" style="margin: 0" frameborder="0" src="/mgr/center"></iframe>
     <script type="text/javascript">     
      $("#rightIframe").load(function(){
       var mainheight = $(this).contents().find("body").height();
       $(this).height(mainheight);
      });
      function reinitIframe(){
       try{
        var mainheight = $("#rightIframe").contents().find("body").height();
        $("#rightIframe").height(mainheight);
       }catch (ex){}
      }
      window.setInterval("reinitIframe()", 200);
     </script>
分享到:
评论

相关推荐

    jquery对iframe自适应高度插件

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

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

    在实现iframe自适应高度方面,jQuery提供了强大的工具集,可以轻松地进行DOM操作,从而实现对iframe内容高度的实时监测和调整。 ### 4. 实现方法 下面是一段基于jQuery实现iframe自适应高度的示例代码: ```...

    教你用jquery实现iframe自适应高度

    可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,今天我们就来分享2种使用jquery实现iframe自适应高度的代码

    jquery ajax应用中iframe自适应高度问题解决方法

    3. 结合jQuery的Ajax全局事件:为了解决iframe在数据动态加载过程中出现的高度无法自适应的问题,可以结合jQuery的Ajax全局事件来实现。具体来说,`ajaxStart`事件在发起Ajax请求前触发,`ajaxComplete`事件则是在...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe自适应宽高

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

    javascript原生和jquery库实现iframe自适应高度和宽度

    关于实现iframe自适应高度和宽度的内容,可以使用原生JavaScript和jQuery库两种方式来完成。下面将详细解释使用这两种技术的实现方法及代码示例。 ### 使用原生JavaScript实现iframe自适应高度和宽度 要使用原生...

    再谈iframe自适应高度

    - 文件`iframe_a.htm`、`iframe_b.htm`、`iframe_c.htm`可能分别展示了不同的iframe自适应高度的实现方案或示例。例如,`iframe_a.htm`可能是纯JavaScript实现,`iframe_b.htm`可能是基于jQuery的,而`iframe_c....

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    以下是一个基本的jQuery实现`iframe`高度自适应的示例代码: ```html &lt;!DOCTYPE html&gt; 用jQuery实现iframe高度自适应 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $(document)....

    iframe自适应高度demo

    为了解决这个问题,我们需要实现`iframe`自适应高度的功能。有多种方法可以实现这一点,下面将详细介绍其中的几种常见方法。 1. **JavaScript/jQuery解决方案**: 使用JavaScript或jQuery,我们可以监听`iframe`的...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    通过使用jQuery来实现iframe的高度自适应,我们可以确保内容在不同浏览器(包括IE、Firefox、Safari和Chrome)中的显示一致性,无论iframe内嵌的页面有多复杂。 首先,我们需要理解iframe的基本概念。IFrame,即...

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

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

    iframe根据页面内容自适应高度和宽度

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html &lt;iframe src=...

    iframe自适应高度 .txt

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

    iframe自适应高度

    因此,“iframe自适应高度”是一个关键的优化技术,旨在确保`iframe`自动调整其高度以适应内部内容的高度。 实现`iframe`自适应高度的方法有很多种,以下是一些常见的技术: 1. **JavaScript/jQuery**: 使用...

    Iframe 高度自适应浏览器高度

    然而,当Iframe的内容动态变化或者内容长度超过预设的高度时,我们就需要实现高度自适应。有几种常见的方法可以实现这一目标: 1. **JavaScript/jQuery**: 一种常见的方法是使用JavaScript或jQuery监听页面的...

    iframe 自适应高度

    这就是所谓的“iframe自适应高度”问题,我们需要解决让`iframe`的高度自动适应其内部内容高度。 首先,理解`iframe`的基本结构是必要的。`iframe`标签的基本用法如下: ```html &lt;iframe src=...

Global site tag (gtag.js) - Google Analytics