`

最简单的方法实现去iframe滚动条

jQueryChromeCSSHTML 
阅读更多
该文也可以说是一个iframe自适应大小的折中解决办法。
iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。

解决办法：
采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。
具体实现代码：
父页面： 
<script type="text/javascript">
function SetCwinHeight(){
  	 var H=$("#myiframe").contents().find("meta").attr("content");
	 alert(H);
	 $("#myiframe2").height(H);
	
 }
</script>
<body style="overflow:auto;">
<iframe id="myiframe" src="xx.html"  onLoad="SetCwinHeight()"></iframe>
</body>

子页面： 
<meta content="800px">


运行原理： 父页面读取子页面中meta的字段值来设置iframe的高度

额外说明：
当iframe 的高度小于内容高度时，如果父窗口的BODY 的overflow:auto，则会出现2个垂直滚动条，iframe的垂直滚动条和父窗口的滚动条；
如果这时，BODY 的overflow:hidden，则只会出现iframe的垂直滚动条，但是，iframe的内容显示不完。




分享到：
| Apache2.2.8+PHP5.2.6+mysql5.0+phpMyAdmin ...
评论
8 楼 wangsong76 2008-11-28  
caiceclb 写道

看我的解决方案：http://www.iteye.com/topic/281102，不会有滚动条

已拜读过你的文章，简单的说，就是在子页面了面用一个<div id="content"></div>
用和本文一样的方法，获取content标签的高度。
但是height()这个方法，本来就有个问题。如果<div id="content"></div>里面再嵌套了页面，height()获取的高度就有问题了。
就 $(this).height($(this).contents().find("#content").height() + 40);  
这句就无法解决问题。

补充一下，我曾经为了解决获取高度，还用过jquery的一个插件，问题依然存在。
7 楼 caiceclb 2008-11-27  
看我的解决方案：http://www.iteye.com/topic/281102，不会有滚动条
6 楼 achun 2008-11-02  
我记得就算不跨域在chrome下也不可用的，
5 楼 冯冀川 2008-11-02  
金鑫火 写道
跨域都白扯
不如在父页面
var iframe = document.getElementById(xx);
if(iframe)
{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}


既然跨域了，iframe.contentWindow.document.body.scrollHeight这样肯定获取不到了
4 楼 wangsong76 2008-11-01  
scrollHeight
金鑫火 写道

跨域都白扯 不如在父页面 var iframe = document.getElementById(xx); if(iframe) { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height =&nbsp; height; }


你在不同游览器下试一下，看用了是不是大小刚好合适，你就明白我为什么会在每个子页面里面添加指定高度了。
3 楼 金鑫火 2008-10-25  
跨域都白扯
不如在父页面
var iframe = document.getElementById(xx);
if(iframe)
{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}
2 楼 sunfengcheng 2008-07-24  
css刚刚开始学习！上面的代码不错
1 楼 ayeah 2008-07-01  
总不可能给每个子页面设meta值吧
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    iframe 上下滚动条如何默认在下方实现原理

    通过这种方式，我们可以确保iframe的滚动条始终位于最下方，即时更新以展示新添加的聊天记录，从而提供类似QQ聊天窗口的用户体验。请注意，实际应用中可能需要根据具体的DOM结构和事件处理机制进行适当的调整。

    在iframe中隐藏横向滚动条的方法大全

    ### 在iframe中隐藏横向滚动条的方法大全 #### 概述 在网页开发中，经常会用到`&lt;iframe&gt;`标签来嵌入其他页面或内容。然而，有时候这些嵌入的内容可能会导致横向滚动条出现，影响用户体验及整体美观度。本文将详细...

    iframe自适应高度和宽度

    3. **`scrolling`**：设置是否显示滚动条，可选值有`auto`、`yes`、`no`等。 4. **`width` 和 `height`**：分别设置`iframe`的宽度和高度。 #### 三、自适应高度示例 下面是一个简单的示例，演示如何通过...

    iframe的用法

    &lt;iframe src="url" width="宽度" height="高度" frameborder="边框宽度" scrolling="滚动条" allowtransparency="是否透明"&gt;&lt;/iframe&gt; ``` #### 属性详解 1. **src**: 这是`iframe`最重要的属性之一，用于指定被...

    网页制作中Iframe自适应高度的解决办法

    然而，Iframe的高度自适应往往是一个棘手的问题，因为如果内容动态加载或者不同长度，Iframe默认的高度可能无法适配，导致滚动条出现或者内容被截断。本文将深入探讨如何解决Iframe自适应高度的问题。 首先，我们...

    iframe页面参考

    4. **scrolling**：控制是否显示滚动条，"yes"表示显示，"no"表示不显示，"auto"表示根据内容自动决定。 `iframe`的应用场景很广泛，例如： - **内容聚合**：将不同来源的内容整合到一个页面中，如新闻网站展示多个...

    基于iframe的跨域与更新父窗体地址栏的解决方案.docx

    - **基本用法**：使用`&lt;iframe&gt;`标签是最简单的嵌入方法。例如： ```html &lt;iframe src="http://example.com"&gt;&lt;/iframe&gt; ``` - **定制属性**：可以通过设置`&lt;iframe&gt;`的属性来更好地满足需求。 - `frameborder`...

    iframe多层级自动适应高度

    本主题探讨的是如何处理`iframe`多层级时的高度自适应问题，以确保内容能够完整展示而不会造成滚动条混乱或内容被裁剪。 首先，我们要理解`iframe`的基本属性。`src`属性用于指定要加载的URL，`width`和`height`...

    Iframe框架自动适应高度示例详解.pdf

    这种额外的数值是为了消除不同浏览器中可能出现的滚动条或边框的空间。 5. 最后，将计算出的高度赋值给Iframe自身的`style.height`属性和其父元素的`style.height`属性，从而实现了高度的自适应。 为了确保在页面...

    iframe src为图片时的高度自适应的代码

    本文将详细介绍一种实现方法，并深入探讨其背后的原理。 #### 实现原理 在标准的iframe高度自适应方案中，通常是在iframe加载完毕后获取其内部body的高度（`offsetHeight`）和宽度（`offsetWidth`），然后根据这些...

    高度塌陷的产生条件和解决方法

    高度塌陷的产生条件和解决方法 ...这种方法可以解决高度塌陷问题，但是当子元素溢出时就会出现滚动条。 高度塌陷是前端开发中经常遇到的问题，解决高度塌陷问题有多种方法，大家可以根据实际情况选择合适的解决方法。

    jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    函数内部首先为传入的url创建一个iframe元素，并设置必要的样式和属性，如滚动条、边框等。然后使用parent.$选择器和.window方法将创建的iframe元素封装成一个窗口，并通过一系列配置项（如标题、尺寸、内容、模态框...

    调用留言板代码，6种方法。

    这里的`src`属性指定了留言板程序的地址，`width`和`height`分别设置了留言板显示的宽度和高度，`scrolling`用于控制是否显示滚动条，而`frameborder`则设置了边框是否可见。 ### 方法二：通过JavaScript动态加载 ...

    ifram自适应高度兼容性非常强

    要实现`&lt;iframe&gt;`的自适应高度，最常见的方法是通过JavaScript来定时检查`&lt;iframe&gt;`内部文档的实际高度，并将其设置为`&lt;iframe&gt;`的高度。这种方法简单有效，但在某些情况下可能会遇到兼容性问题。 #### 三、示例...

    JS简单实现禁止访问某个页面的方法

    另外，通过设置html和body的overflow属性为hidden，确保了页面上不会出现滚动条，从而阻止用户浏览被禁止的页面。 在实际应用中，可能还需要考虑用户体验的问题。禁止访问页面的同时，可以向用户展示一些友好的信息...

    《程序天下：JavaScript实例自学手册》光盘源码

    13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的广告 13.8 12小时制和24小时制的转换 13.9 标题栏显示时间 13.10 超过时间页面自动跳转 13.11 分时段...

    程序天下:JavaScript实例自学手册

    13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的广告 13.8 12小时制和24小时制的转换 13.9 标题栏显示时间 13.10 超过时间页面自动跳转 13.11 分时段...

Magicbox
Global site tag (gtag.js) - Google Analytics