`
jinyanhui2008
  • 浏览: 319541 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

转,存档,通过jq实现iframe自适应高度

阅读更多

很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题。 

失败的测试就不说了,来直接的。 

两个链接和iframe: 

Java代码 
  1. <li><a href="selfinfo.jsp" target="c-c-iframe" title="个人信息" >个人信息</a></li>  
  2. <li><a href="modifypass.jsp" target="c-c-iframe" title="修改密码" >修改密码</a></li>  
  3.   
  4. <iframe src="init.jsp" id="c-c-iframe" name="c-c-iframe" width="500px;"  frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>  


js代码: 

Java代码 
  1. <script type="text/javascript">  
  2. <!--  
  3. $(function(){  
  4.     $("#c-c-iframe").load(function(){         
  5.         $(this).height($(this).contents().find("#content").height() + 40);  
  6.     });  
  7.       
  8. });  
  9. -->  
  10. </script>  


这里的find("#content")是找出iframe内容文档中的id为content的高度(另外比如find("body")),并设置给iframe, 
类似的还可以设置宽度,留给需要的朋友尝试吧。 

这样就解决了iframe不会因为内容过大被挡住的问题(因为我设置了scrolling="no")。 


PS:基本上我会优先考虑使用iframe来实现无刷新,兼容浏览器的后退按钮;而且使用iframe加载flash是很爽的,不用写什么js调用,object标签,还符合W3C标准。 

2008年11月28日17:13:31 ,今天使用过程中根据实际情况进行了一下改良,代码如下: 

Java代码 
  1.     <script type="text/javascript">  
  2. <!--  
  3. $(function(){  
  4.     $("#workArea").load(function(){       
  5.         var height = $(this).contents().find("#box").height() + 40;  
  6. //这样给以一个最小高度  
  7.         $(this).height( height < 400 ? 400 : height );  
  8.     });  
  9.       
  10. });  
  11. -->  
  12. </script>  


另发现使用find("body")不太好使,高度不准确。

分享到:
评论

相关推荐

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

    iframe代码,注意要写ID 代码如下:&lt;iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”&gt;&lt;/iframe&gt;jquery代码一: 代码如下://注意:下面的代码...

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

    javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码! ‍&lt;iframe src=index....

    jq简洁大气自适应横排导航.zip

    【标题】"jq简洁大气自适应横排导航.zip" 提供的是一个基于jQuery实现的、设计简洁大气且具有自适应横排布局的导航栏解决方案。这个压缩包内包含的资源可能是一个网页模板或者一个插件,用于快速构建网站头部导航...

    jquery实现文本框textarea自适应高度

    在网页设计中,为了提供更好的用户体验,经常需要对文本框(`textarea`)进行自适应高度的设置,以便用户在输入大量文字时,文本框能够自动扩展高度,避免出现滚动条。`jQuery`库提供了一个方便的方法来实现这一功能...

    jquery实现textarea 高度自适应

    之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 代码如下: jQuery.fn.extend({  autoHeight: function(){  return this.each(function(){  ...

    jQuery简单实现iframe的高度根据页面内容自适应的方法

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var ...

    jQuery自动适应高度布局代码.zip

    在网页设计中,为了实现良好的用户体验,经常需要让页面元素能够根据浏览器窗口的大小自动调整其高度,确保内容能够完整且美观地展示。jQuery库提供了一系列强大的API,使得这种自动适应高度的布局变得简单易行。...

    html+jq+css 自适应屏幕居中

    标题中的“html+jq+css 自适应屏幕居中”指的是使用HTML、JavaScript(jQuery库)和CSS技术来实现网页元素在不同屏幕尺寸下...通过分析这些文件,我们可以学习如何结合HTML、CSS和jQuery实现自适应屏幕居中的弹窗效果。

    jQuery获取与设置iframe高度的方法

    本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...

    Jquery图片自适应大小并居中

    本文将通过一个具体的示例,详细介绍如何使用Jquery来实现图片的自适应大小及居中功能。 #### 背景介绍 在实际应用中,经常会遇到这样的场景:页面中的图片可能由于源图的比例问题导致在不同尺寸的容器中显示时出现...

    jq替换iframe里面视频关闭自动播放的功能

    通过jq把ifram里面的视频转换成不自动播放的视频。 希望有需要的同志们采纳一下。

    Jquery图片自适应宽度和表格List自适应屏幕宽度!

    这段代码会在页面加载完成和窗口大小改变时,将所有图片的宽度设置为其父元素的宽度,实现自适应效果。 接着,表格List自适应屏幕宽度通常涉及到FooTable插件的使用。FooTable是一个基于Jquery的响应式表格插件,它...

    jQuery自适应窗口大小导航菜单

    本篇文章将详细讲解如何利用jQuery实现一个自适应窗口大小的导航菜单,以及与之相关的技术点。 首先,自适应导航菜单是网页设计中的一个重要组成部分,尤其在响应式网页设计中更为关键。它确保了无论用户是在桌面...

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

    就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。 以下是jQuery,load事件的概述 在每一个匹配元素的load事件中绑定一个处理函数。 如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象...

    JQUERY实现iframe页面切换功能

    总结,通过以上步骤,我们可以利用jQuery轻松实现iframe页面的切换功能。这种方法不仅可以提供灵活的内容展示,还可以优化页面性能,因为只需要加载用户当前关注的内容。在实际项目中,可以根据需要进行调整,例如...

    极轻量级的弹出层(无需调用JQ,动态自适应当前窗体宽度)

    lightbox之类的想必大家都很熟悉了吧,但是如果如果要让弹出层的宽度能自适应当前网页的宽度则无法实现,而能够达成该需求的插件往往都在JQ的基础上做了繁重的开发,很累赘。这是无意中找到的资源,分享给大家,用于...

    兼容手机端的全屏自适应jQuery相册代码

    这种响应式设计通常通过媒体查询(Media Queries)实现,允许CSS针对不同设备和屏幕尺寸应用不同的样式规则。 在实现全屏自适应相册时,有以下几个关键技术和策略: 1. **Bootstrap框架**:Bootstrap是一个流行的...

    jQuery满屏自适应焦点滚轮图切换特效

    这通常是通过检测窗口的宽度和高度,然后设置图片的宽高属性来实现的。对于响应式设计,可以使用CSS3的媒体查询来定义不同屏幕尺寸下的样式,确保在各种设备上都能呈现出良好的视觉效果。 滚轮切换效果的核心在于...

Global site tag (gtag.js) - Google Analytics