`

jQuery js iframe 自适应高度

 
阅读更多

方法一、jQuery

 

  <script type="text/javascript">  
<!--  
$(function(){  
    $("#workArea").load(function(){       
        var height = $(this).contents().find("#box").height() + 40;  
//这样给以一个最小高度  
        $(this).height( height < 400 ? 400 : height );  
    });  
      
});  
-->  
</script>  

 

方法二:js

 

 function dyniframesize(iframename) {
  var pTar = null;
  if (document.getElementById){
    pTar = document.getElementById(iframename);
  }
  else{
     eval('pTar = ' + iframename + ';');
  }
  if (pTar && !window.opera){
    pTar.style.display="block";
     if (pTar.Document  && pTar.Document.body.scrollHeight){  
      pTar.height = pTar.Document.body.scrollHeight;
    }
  }
}
//window.onload =dyniframesize("leftFrame");

 

 

另转——————————————————————未验证

 

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

在网上找了很多的iframe自适应高度 的脚本,对浏览的的兼容性都不好。所以就想利用jquery 强大的兼容性,写一个iframe自适应高度 的脚本。 

jquery 很强大,代码很简单:

$("#iPersonalInfo").load(function() { 

$(this).height($(this).contents().height()); 

}) 

有一点需要注意的,我也在调试的时候才发现的,耽误了不少时间。就是绑定事件必须在iframe 加载完毕之前绑定,否则不会执行。 
以下是jQuery,load事件的概述 
在每一个匹配元素的load事件中绑定一个处理函数。 
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。 
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

 

另外一种方法实现自适应iframe高度 自适应

 function adjustIFramesHeightOnLoad(iframe ) {

var iframe Height = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);

 $(iframe).height(iframeHeight);
 }
分享到:
评论

相关推荐

    jquery对iframe自适应高度插件

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

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

    这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段,它可能包含了针对不同浏览器的兼容性处理,比如对于IE6-9这些老版本浏览器的特殊处理,因为它们对某些DOM操作和事件处理的支持...

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

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

    再谈iframe自适应高度

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

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

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

    iframe自适应高度demo

    综上所述,`iframe`自适应高度是通过JavaScript、CSS布局技术(如Flexbox或Grid)、或者通过跨窗口通信来实现的。选择哪种方法取决于你的项目需求,如兼容性、复杂性、是否能控制`iframe`源等因素。正确实现`iframe`...

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

    这种方法通过结合iframe的实时高度获取和jQuery的Ajax事件处理机制,有效地解决了iframe在内容动态加载时的高度自适应问题,提高了Web应用的用户体验和界面的一致性。在具体的实现过程中,开发人员需要确保相关函数...

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

    总结来说,实现`iframe`根据页面内容自适应高度和宽度,可以通过CSS、JavaScript以及第三方库如`iframe-resizer`来完成。不同的方法适用于不同的场景,开发者可以根据实际需求选择合适的方式。在处理跨域问题时,第...

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

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

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

    2. `order_list.html`: 这个文件很可能被用作iframe的源,即被嵌入到index.html中的页面,可能包含了一些需要自适应高度的内容。 3. `jquery-1.7.2.min.js`: 这是jQuery库的版本1.7.2的压缩版,它是实现iframe高度...

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

    最后,`MainFrame.html`和`用jquery实现iframe高度自适应完美兼容多数浏览器.html`可能是包含上述代码的实际示例页面,而`js`文件夹可能包含了jQuery库和其他可能的辅助脚本。 总结,通过jQuery,我们可以优雅地...

    iframe自适应高度 .txt

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

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

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

    iframe自适应高度

    总结来说,“iframe自适应高度”是提高用户体验的重要手段,通过利用JavaScript、CSS3的新特性或是跨域通信,我们可以使`iframe`始终展示完整的内容,无需用户手动滚动。理解并掌握这些技术对于构建高质量的Web应用...

    iframe 自适应高度

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

    Iframe 高度自适应浏览器高度

    一种常见的方法是使用JavaScript或jQuery监听页面的“load”事件,当Iframe的内容加载完成后,获取内容的实际高度并设置给Iframe。例如,使用jQuery: ```javascript $(document).ready(function() { var ...

    iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)

    对于不熟悉原生JavaScript的开发者,可以借助jQuery的插件如`jquery.iframe-auto-height`,它能简化高度自适应的实现。 5. **PostMessage API**: 这是一种跨文档通信的方式,允许父页面与iFrame或iFrame与父页面...

Global site tag (gtag.js) - Google Analytics