`
hanqunfeng
  • 浏览: 1541167 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IFrame高度自适应js脚本

阅读更多

function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}

<iframe width=”778″ align=”center” height=”200″ id=”win” name=”win” onload=”Javascript:SetWinHeight(this)” frameborder=”0″ scrolling=”no”></iframe>

本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/13306.htm

/**
* iframe高度处理
* @author zxub 2006-09-29
**/

/**
* 设置iframe高度等于内部页面高度,用于内部页面
*/
function setParentHeight(_iframeId)
{
if(parent.setIFrameHeight) return;
if(window.addEventListener)//firefox
{
var _action=function()
{
var _iframe=parent.document.getElementById(_iframeId);
if(!_iframe) return;
_iframe.style.height=_iframe.contentDocument.body.offsetHeight+16;
}
window.addEventListener("load", _action, false);
}
else if(window.attachEvent)//IE
{
var _action=function()
{
if(!parent.document.getElementById(_iframeId)) return;
parent.document.getElementById(_iframeId).style.height=document.body.scrollHeight;
}
window.attachEvent("onload", _action);
}
}

/**
* 设置iframe高度等于内部页面高度,用于父级页面
**/
function setIFrameHeight(_iframeId)
{
if(window.addEventListener)//firefox
{
var _action=function()
{
var _iframe=document.getElementById(_iframeId);
if(!_iframe) return;
_iframe.style.height=_iframe.contentDocument.body.scrollHeight;
_iframe.onload=function()
{
this.style.height=this.contentDocument.body.offsetHeight+16;
}
}
window.addEventListener("load", _action, false);
}
else if(window.attachEvent)//IE
{
var _action=function()
{
if(!document.getElementById(_iframeId)) return;
document.getElementById(_iframeId).style.height=document.frames[_iframeId].document.body.scrollHeight;
document.getElementById(_iframeId).onreadystatechange=function()
{
if(this.readyState=="complete")
{
this.style.height=document.frames[_iframeId].document.body.scrollHeight;
}
}
}
window.attachEvent("onload", _action);
}
}

分享到:
评论

相关推荐

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

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

    最后,`MainFrame.html`和`用jquery实现iframe高度自适应完美兼容多数浏览器.html`可能是包含上述代码的实际示例页面,而`js`文件夹可能包含了jQuery库和其他可能的辅助脚本。 总结,通过jQuery,我们可以优雅地...

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,...

    可编辑iframe高度自适应(编辑器所见即所得模式)

    总的来说,实现可编辑`iframe`的高度自适应需要结合HTML、CSS和JavaScript的知识,尤其是利用JavaScript来监听和响应`iframe`内容的变化。通过这种方法,可以确保用户无论在Firefox、Chrome、IE8还是Safari等浏览器...

    jquery对iframe自适应高度插件

    总之,“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具,它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件,可以避免手动计算和调整`iframe`...

    Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    "Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...

    js实现iframe自动自适应高度的方法

    本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先,理解基本概念。Iframe的`height`属性决定了其显示区域的高度,当我们想要Iframe内容自适应时,我们需要动态地修改这个属性值,使其等于...

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

    在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    jQuery解决iframe高度自适应代码

    在本例中,通过获取iframe内容的scrollHeight属性,可以获取到内容的实际高度,然后用这个高度来设置iframe的高度,实现高度自适应。 知识点六:跨浏览器兼容性 在实际开发中,需要考虑不同浏览器的兼容性问题。在...

    iframe高度自适应

    这种方法通过运行JavaScript或jQuery脚本来检测`iframe`的内容高度,并将其设置为`iframe`的`height`属性。首先,你需要在父页面和`iframe`页面中引入jQuery库。然后,在父页面中添加以下代码: ```javascript $...

    iframe自适应高度

    总之,`iframe`自适应高度是一个常见的前端挑战,通过合理的JavaScript脚本和CSS技巧,我们可以实现良好的用户体验,无论是在桌面端还是移动端。同时,随着Web技术的发展,未来可能还会出现更多新的解决策略。

    iframe自适应高度的简单解决办法

    在网页设计中,`iframe`(Inline Frame)是一种嵌入其他网页或内容的标签,它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档,你可以得到更详细的步骤和解释,以便更好地理解和应用这些技术。

    IFRAME自适应

    "Noname1.html"可能是演示IFRAME自适应的一个实例,可能包含了IFRAME元素和相应的CSS或JavaScript代码,用于展示如何实现IFRAME的高度自适应。 总结,IFRAME自适应是创建响应式网页的重要组成部分,它涉及到布局、...

    html嵌入html,高度自适应,标签切换。

    在"新建文件夹 (2)"这个压缩包内,可能包含了实现上述功能的HTML、CSS和JavaScript文件,包括但不限于index.html(主页面),style.css(样式表),script.js(JavaScript脚本),以及可能的子页面HTML文件。...

    如何设置iframe高度自适应在跨域情况下的可用方法

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面...这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题!

    兼容主流浏览器的iframe自适应高度js脚本

    兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj....

Global site tag (gtag.js) - Google Analytics