`
lk215215
  • 浏览: 64313 次
  • 来自: ...
社区版块
存档分类
最新评论

iframe自适应加载页面高度-js实现

阅读更多
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从 而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高 度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种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,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
程序代码 程序代码
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>


另一种情况的iframe解决方案(超简单)
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下

1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)
parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID,比如:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>

2、给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "bottom.js"/></script>
3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!

实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
程序代码 程序代码
<script type="text/javascript">
//** iframe自动适应页面 **//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

//定义iframe的ID
var iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes"

function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? Document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
分享到:
评论

相关推荐

    jquery对iframe自适应高度插件

    `iframe`可以用来加载外部HTML文档,实现页面的组合或者展示第三方内容,如视频、地图等。然而,`iframe`的默认高度和宽度可能并不适合所有情况,特别是当内容动态变化时,可能会导致滚动条的出现或内容被截断。为了...

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

    在网页开发中,`&lt;iframe&gt;`元素是一种非常实用的工具,它允许我们在一个页面中嵌入另一个页面的内容,实现页面的组合或者隔离加载。然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容...

    iframe自适应子页面内容高度

    `iframe`常用于实现页面组件的复用、加载外部资源或者进行页面间的通信。本话题将深入探讨如何使`iframe`自适应其子页面的内容高度,确保用户无需滚动主页面即可查看全部子页面内容。 `iframe`的基本结构如下: ``...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的...

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

    总结来说,实现`iframe`根据页面内容自适应高度和宽度,可以通过CSS、JavaScript以及第三方库如`iframe-resizer`来完成。不同的方法适用于不同的场景,开发者可以根据实际需求选择合适的方式。在处理跨域问题时,第...

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

    这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段,它可能包含了针对不同浏览器的兼容性处理,比如对于IE6-9这些老版本浏览器的特殊处理,因为它们对某些DOM操作和事件处理的支持...

    iframe自适应高度和宽度

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

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的...总的来说,"iframe自适应高度.rar"这个主题涵盖了iframe的使用、同源策略的理解以及JavaScript实现iframe高度自适应的技术细节,这些都是前端开发中非常实用的知识点。

    iframe自适应内容页面的高度

    然而,当嵌入的页面高度不固定时,可能会导致`iframe`显示不完整,用户需要滚动`iframe`内部才能查看全部内容。为了解决这个问题,我们需要让`iframe`自适应其内容页面的高度,确保内容能够完全展示,提高用户体验。...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

    iframe自适应高度js demo

    `iframe`常用于实现页面间的无刷新交互、加载外部资源或者展示广告等场景。然而,`iframe`的一个常见问题是,其内容高度可能超出容器的高度,导致页面布局出现问题。为了解决这个问题,我们需要实现一个自适应高度的...

    iframe自适应高度说明文档

    ### iframe自适应高度详解 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,默认情况下,`iframe`的高度是固定的,这可能导致页面布局问题,尤其是当嵌入的内容高度不确定...

    iframe自适应高度(兼容目前所有主浏览器)

    被加载页面可以切换一个绝对定位的层,来使页面高度动态变化。 iFrame 自适应高度是前端开发中需要注意的问题,需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题,并且需要注意浏览器兼容性问题。

    iframe自适应高度(DOM动态操作)

    ### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...

    iframe自适应高度demo

    综上所述,`iframe`自适应高度是通过JavaScript、CSS布局技术(如Flexbox或Grid)、或者通过跨窗口通信来实现的。选择哪种方法取决于你的项目需求,如兼容性、复杂性、是否能控制`iframe`源等因素。正确实现`iframe`...

    iframe自适应高度兼容各主流浏览器

    下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:iFrame的基本概念 iFrame(Inline Frame)是HTML语言中的一种标签,用于在网页中嵌入另一个网页或文档。iFrame可以用来实现内容的内嵌、广告、Widget等...

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时,通过JavaScript动态计算嵌入内容的实际高度,并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

    Iframe 高度自适应浏览器高度

    这种技术常被用来实现页面的分层展示、加载外部内容或者实现页面的部分刷新。标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口...

Global site tag (gtag.js) - Google Analytics