很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题。
失败的测试就不说了,来直接的。
两个链接和iframe:
<li><a href="selfinfo.jsp" target="c-c-iframe" title="个人信息" >个人信息</a></li>
<li><a href="modifypass.jsp" target="c-c-iframe" title="修改密码" >修改密码</a></li>
<iframe src="init.jsp" id="c-c-iframe" name="c-c-iframe" width="500px;" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
js代码:
<script type="text/javascript">
<!--
$(function(){
$("#c-c-iframe").load(function(){
$(this).height($(this).contents().find("#content").height() + 40);
});
});
-->
</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 ,今天使用过程中根据实际情况进行了一下改良,代码如下:
<script type="text/javascript">
<!--
$(function(){
$("#workArea").load(function(){
var height = $(this).contents().find("#box").height() + 40;
//这样给以一个最小高度
$(this).height( height < 400 ? 400 : height );
});
});
-->
</script>
另发现使用find("body")不太好使,高度不准确。
分享到:
- 2008-11-27 18:04
- 浏览 26544
- 评论(4)
- 论坛回复 / 浏览 (3 / 38199)
- 查看更多
相关推荐
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片
前端项目-jquery.loadtemplate,用于加载和使用模板的jquery插件。该插件设计简单但功能强大,支持从页面内加载模板,或使用Ajax加载HTML文件。
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显,非常美观。
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery.jqzoom.js、jquery.lazyload.js、jquery....
单页后退前进刷新 jquery.hash.min.js 和 jquery.ba-hashchange.min.js
Jquery.lazyload.min 轻量级懒加载Jquery框架。
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
jquery.cookie.js,jquery-1.11.0.min.js,respond.min.js, bootstrap.min.js,html5shiv.js
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
jQuery.autoTextarea.js是基于jQuery实现的文本框插件,可以实现文本框内容输入的高度自适应功能,出品方:css88.com,学习jquery的童鞋来学习一下吧。
jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport
NULL 博文链接:https://java378656992.iteye.com/blog/1264755
jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来
在官网上一直下载不下来 然后共享在这 jquery.json-2.3.min.js和jquery.json-2.3.js