`
Blackbaby
  • 浏览: 183266 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

iframe高度适应

 
阅读更多
  
var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

  
<iframe id="js_sub_web" width="80%" frameborder="0" scrolling="no" allowTransparency="true" src="http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html">
</iframe>
window.onload = function(){
     adjustIframe("js_sub_web");
}

 

分享到:
评论

相关推荐

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

    3. 延迟加载:为了提高页面加载速度,可以考虑使用懒加载策略,即在`iframe`内容真正需要显示时再进行加载和高度适应。 总的来说,`iframe`高度自动适应是提升网页用户体验的重要技术,它涉及到JavaScript、DOM操作...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时,如何让`&lt;iframe&gt;`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...

    iframe 跨域 自动适应高度

    本文将详细讲解如何解决`iframe`跨域问题以及实现自动适应高度的功能。 1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面...

    iframe高度自适应.pdf

    ### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...

    iframe自动适应高度

    当`iframe`中的内容高度不确定时,我们希望`iframe`能自动调整其高度以完全显示内部内容,避免出现滚动条或者内容被截断的情况。以下是一些实现`iframe`高度自适应的方法: 1. **JavaScript解决方案**: - **...

    跨域控制iframe高度

    这在需要动态调整iframe高度以适应内容时会带来挑战。本文将深入探讨如何实现跨域控制iframe的高度,以优化用户体验。 首先,我们需要理解同源策略。同源策略是浏览器为了保障安全而实施的一项规定,它只允许...

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应内容的高度。 在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的...

    iframe动态适应页面高度

    iframe是网页设计中经常用来装载子页使用的,如何让iframe随着动态装载的子页(主页不刷新)自动适应所装子改变在小是我们经常要处理的问题;现给出两个非常简单的例子,从不同的角度来实现iframe根据最新加载的子页自动...

    Iframe 高度自适应浏览器高度

    这种技术常被用来实现...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点,实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中,还要考虑到兼容性问题,确保在不同浏览器和设备上都能正常工作。

    iframe高度随子页高度变化

    标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于这个动态调整`iframe`高度的技术。 要实现`iframe`高度随子页高度变化,主要涉及以下几个关键点: 1. **设置iframe的初始高度**:首先,我们需要为`...

    嵌入到HTML的iframe自动适应大小

    自动调整iframe高度的核心在于监听页面加载完成事件,然后通过JavaScript读取iframe内部内容的高度,并将其设置为iframe本身的高度。这一过程通常需要针对不同浏览器进行适配,因为iframe在不同的浏览器中可能采用...

    iFrame 自动调整高度

    ### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中,经常会遇到需要将一个网页嵌入到另一个网页中的场景,这时候...通过这些方法,可以有效地解决`&lt;iframe&gt;`内容变化时高度不适应的问题,提高用户体验。

    iframe自动适应 高度 宽度

    在用js动态创建时,iframe 很难自动适应高度宽度,写100%也没有,推出此方法可以解决这方面难题

    javascript动态调整iframe高度

    为了适应内容动态加载或用户交互导致的`iframe`高度变化,可以设置定时器每隔一段时间重新计算并调整`iframe`高度。但这可能增加不必要的性能开销,因此应谨慎使用。 总之,`javascript`动态调整`iframe`高度的核心...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    js实现iframe自适应高度

    然而,`iframe` 的一个常见问题是其内容区域的高度可能超过其本身的显示区域,导致滚动条出现或者内容被截断。为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`...

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一...通过这些技术,可以使`iframe`更加灵活地适应不同的内容变化,提高用户体验。在实际应用中,还需要根据具体场景进行适当的调整和优化。

    iframe自适应高度

    静态高度是直接在HTML中设置固定的`height`值,但这样无法适应内容变化。动态高度则需要根据`iframe`内部内容的高度实时调整。 ### 3. JavaScript解决方案 #### (1) 基于`onload`事件 当`iframe`内容加载完成后,...

    iframe自适应高度demo

    将`iframe`放在一个grid容器中,并使用`auto-fill`或`auto-fit`作为行的重复数量,`iframe`将会自动适应内容高度。 ```css .iframe-grid { display: grid; grid-template-rows: auto; } .iframe-grid iframe...

    jquery对iframe自适应高度插件

    这样,`iframe`就能自动适应其内容的高度,提供更好的用户体验。 总之,“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具,它的易用性和效率使得它成为开发者处理`iframe`高度问题的...

Global site tag (gtag.js) - Google Analytics