很高兴,终于使用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>
<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>
<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>
<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自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
要使`iframe`自适应内容,我们有以下几种方法: 1. **CSS属性**:`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`,但这种方法通常不足以实现完全自适应,因为浏览器的安全策略会限制跨域访问内容...
在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...
"再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....
使用JavaScript或jQuery,我们可以监听`iframe`的`load`事件,当`iframe`中的内容加载完毕后,获取其内容的实际高度并设置为`iframe`的高度。例如,使用jQuery的一个简单示例: ```javascript $(document).ready...
jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件,当iframe内容加载完成后,获取其实际内容高度并设置为iframe的height属性。这种方法可以确保iframe始终能完全显示其内部内容,避免滚动条的...
一种常见的方法是使用JavaScript或jQuery监听页面的“load”事件,当Iframe的内容加载完成后,获取内容的实际高度并设置给Iframe。例如,使用jQuery: ```javascript $(document).ready(function() { var ...
这样,无论`iframe`的内容如何变化,`iframe`的高度都能随之自适应。 接着,我们在页面加载完成时和窗口大小改变时调用这个方法,确保在任何情况下`iframe`都能正确调整高度。如果`iframe`的内容加载有延迟,我们还...
### iframe自适应高度知识点详解 #### 一、概述 在网页设计与开发中,`<iframe>`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。随着响应式设计的需求日益增加,如何使`<iframe>`内...
jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素,並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用,例如在某些网页中,我们需要在 iframe 中嵌入一个内嵌页面,并且使其...
1. **JavaScript/jQuery 解决方案**:这是最常见的方法,通过监听`iframe`的`load`事件,获取到内容的总高度,然后设置`iframe`的高度。例如,使用jQuery可以这样写: ```javascript function resizeIframe...
然而,`iframe` 的高度自适应往往是一个常见的问题,特别是当`iframe`内容动态加载或者不同浏览器之间存在差异时。本文将深入探讨如何实现`iframe`的高度自适应,以确保内容在所有浏览器中都能正确显示。 首先,...
这个文件可能解决的是`iframe`随浏览器窗口大小改变而动态调整高度的问题。在响应式设计中,这尤其重要,因为用户可能会在不同尺寸的设备上查看页面。我们可以监听窗口的`resize`事件,然后再次调整`iframe`的高度...
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var ...
在这篇文章中,我们将重点介绍jQuery如何用于解决iframe高度自适应问题,同时也会涉及到DOM操作、内容加载事件处理以及scrollHeight属性等相关知识点。 首先,要实现iframe高度自适应,我们需在包含iframe的页面中...
在处理web页面中嵌入iframe元素时,一个常见的问题是iframe自适应问题。由于iframe默认会有一个固定高度,所以当嵌入的内容高度超出iframe的默认高度时,会导致内容被隐藏;而如果内容不足,iframe又会以默认高度...
iframe代码,注意要写ID 代码如下:<iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>jquery代码一: 代码如下://注意:下面的代码...