很高兴,终于使用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")不太好使,高度不准确。
分享到:
相关推荐
iframe代码,注意要写ID 代码如下:<iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>jquery代码一: 代码如下://注意:下面的代码...
javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码! <iframe src=index....
jq简洁大气自适应横排导航.zip
之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 代码如下: jQuery.fn.extend({ autoHeight: function(){ return this.each(function(){ ...
浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:...
本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var ...
jQuery自动适应高度布局代码是一款设置height页面自动适应高度布局效果代码。
可以在高版本浏览器中,弹窗在屏幕居中。张鑫旭大神作品
就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。 以下是jQuery,load事件的概述 在每一个匹配元素的load事件中绑定一个处理函数。 如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象...
lightbox之类的想必大家都很熟悉了吧,但是如果如果要让弹出层的宽度能自适应当前网页的宽度则无法实现,而能够达成该需求的插件往往都在JQ的基础上做了繁重的开发,很累赘。这是无意中找到的资源,分享给大家,用于...
插件描述:自适应窗口大小导航菜单. 参考示例:http://www.jq22.com/jquery-info5370
通过jq把ifram里面的视频转换成不自动播放的视频。 希望有需要的同志们采纳一下。
JQUERY实现iframe页面切换功能,轻松简单、灵活方便快速,代码实例,测试通过
NULL 博文链接:https://eddysoft.iteye.com/blog/1963866
在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字...
鄙人对Jquery语法不是非常熟练,写起来跟C#代码差不多,还请包涵。纯属抛砖引玉,欢迎指教. 这个方法可以控制图片的尺寸。在页面显示图片时,如果碰到又细又长或者又细又高的图片比如这种 “—” 和 这种“|”。...
jQuery自适应父容器宽度高度特效代码是一款通过计算文本的font-size来使文字适应它的父容器的宽度和高度。