`

Jquery 操作页面中iframe自动跟随窗口大小变化,而页面不出现滚动条,只在iframe内部出滚动条

阅读更多

    很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化、自适应页面大小。下面是代码,下次有时间在来解释下代码。

$(document).ready(function(){

//调用函数

var pagestyle = function() {

var iframe = $("#iframe");

var h = $(window).height() - iframe.offset().top;

iframe.height(h);

}
//注册加载事件
$("#iframe").load(pagestyle);
//注册窗体改变大小事件
$(window).resize(pagestyle);


});


分享到:
评论
1 楼 boy002 2010-09-17  
效果不错,借用了

相关推荐

    Jquery iframe内部出滚动条

    总结一下,通过使用Jquery监听iframe的resize和load事件,并对iframe的高度进行动态调整,我们可以实现iframe内容的自适应显示,同时避免在浏览器窗口内出现不必要的滚动条,而只在iframe内部出现滚动条。这样的操作...

    不随滚动条滚动的模式窗口

    在网页设计和开发中,"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术,它允许用户在当前页面上打开一个全屏或半屏的弹出窗口,而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

    弹出窗口__iframe

    在ie7和ie8中,以及Firefox和Chrome中,可以通过CSS技巧来设置背景页面(即iframe后面的页面)保持固定,不随滚动条滚动。这通常通过设置`position: fixed`和适当的`top`, `right`, `bottom`, `left`值来实现。然而...

    jquery滚动条美化Scrollbar

    默认的浏览器滚动条虽然实用,但在某些设计风格中可能会显得突兀,不符合整体视觉效果。jQuery Scrollbar 插件提供了一种方法,让我们可以轻松地对网页中的滚动条进行美化,使其更加符合网站的界面设计。 jQuery 是...

    iframe根据页面内容自适应高度和宽度

    然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸时,可能会出现滚动条或者内容被截断的情况。为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细...

    jquery.nicescroll仿IOS滚动条美化插件

    此插件不仅适用于常规的页面滚动,还能够应用于框架(如 iframe)、弹出框、对话框内的滚动条美化,使得整个网页的滚动体验保持一致。 **5. 使用步骤** - **引入库文件**:首先,你需要在页面中引入 jQuery 和 ...

    jquery对iframe自适应高度插件

    然而,`iframe`的默认高度和宽度可能并不适合所有情况,特别是当内容动态变化时,可能会导致滚动条的出现或内容被截断。为了解决这个问题,`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    在传统的`iframe`使用中,如果内容超过`iframe`设定的高度,会出现滚动条,或者部分内容被隐藏,用户体验并不理想。为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常...

    jQuery冻结表头-嵌套iframe页面

    对于嵌套在iframe中的子页面,由于iframe本身具有独立的滚动条,所以需要额外的处理以确保表头冻结功能能在iframe内部正常工作。 在嵌套的iframe中处理这个问题时,有以下几个关键点需要注意: 1. **跨域问题**:...

    iframe中页面显示不全1

    当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入内容的尺寸不匹配导致的。下面将详细探讨如何解决这一问题以及相关的知识点。 首先,我们需要了解`<iframe>`的基本结构和属性。...

    jQuery.nicescroll美化滚动条

    // 初始化iframe滚动条 ``` 六、兼容性与优化 jQuery.nicescroll致力于提供良好的跨浏览器兼容性,支持现代浏览器如Chrome、Firefox、Safari、Edge以及IE8+。不过,需要注意的是,由于滚动条样式是由JavaScript...

    弹出窗口_iframe_最终版

    总结来说,"弹出窗口_iframe_最终版"是一个解决跨浏览器兼容性的实践案例,主要涉及了弹出窗口的创建、iframe的使用,以及如何在不同浏览器环境中处理遮挡和滚动条滚动的问题。开发者需要熟悉各种浏览器的特性和API...

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    然而,`iframe`的默认行为并不自动调整其高度以适应内容,这就可能导致内容溢出或者滚动条的出现,影响用户体验。为了解决这个问题,我们可以利用jQuery的动态计算和事件监听功能。 以下是一个基本的jQuery实现`...

    使用JQUERY Tabs插件宿主IFRAMES

    必须确保每个tab页的IFRAME元素设置为自动滚动(scrolling设置为auto),并隐藏溢出内容,以避免浏览器中出现多余的滚动条。此外,还要保证这个解决方案在不同浏览器中都能正常工作。 对于页面布局,JQUERY Tabs...

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

    自适应高度意味着iframe的高度会根据其内部内容的大小自动调整,从而避免了不必要的滚动条出现,或者因内容过多而导致的溢出问题。这不仅提升了用户体验,还优化了页面的整体布局。 ### 3. jQuery的角色 jQuery是...

    jQuery懒加载插件页面滚动加载数据代码

    jQuery懒加载插件是一种优化网页性能的技术,它允许我们在用户滚动页面时按需加载内容,而不是一次性加载所有数据。这种技术对于拥有大量图片、视频或动态数据的网页尤其有用,因为它减少了初始页面加载时间,提高了...

    layer弹出层 iframe层去掉滚动条的实例代码

    在这个问题中,我们关注的是如何在layer弹出层中的iframe层去除滚动条,以保持页面的整洁和用户体验。 首先,让我们深入理解一下涉及到的几个概念: 1. **layer**:Layer是基于jQuery的一个轻量级的弹窗插件,提供...

    iframe在IE6下出现横向滚动条的解决方案

    在IE6中,iframe经常会导致出现横向滚动条,尤其是在内嵌页面内容的高度或宽度超过了iframe本身的尺寸时。 在本例中,问题出现在iframe中的页面使用了相对于body的样式,其中包含了一个宽度为100%的元素。这种布局...

    前端项目-Iframe-Height-Jquery-Plugin.zip

    然而,Iframe的一个常见问题是高度自适应问题,即当iframe内的内容高度变化时,如果不手动调整,外层容器可能无法完全展示其内容,导致滚动条的出现或内容被截断。针对这一问题,`前端项目-Iframe-Height-Jquery-...

Global site tag (gtag.js) - Google Analytics