`
leyoo
  • 浏览: 44441 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

IFrame自适应高与contentWindow

阅读更多
IFrame自适应高与contentWindow 


<script type="text/javascript">
    function autoFixIfm()
    {
        var yocityAd= document.getElementById('yocityAd');       
        yocityAd.height=yocityAd.contentWindow.document.body.scrollHeight+5;
        yocityAd.width=yocityAd.contentWindow.document.body.scrollWidth+5;
    }
    </script>



<iframe id="yocityAd" name="yocityAd" src="Iframe/Index.aspx" width="100%" height="500" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" onload="autoFixIfm()"></iframe>

一定要加contentWindow, 不则是当前的document.body.scrollHeight



contentWindow Property  Internet Development Index



--------------------------------------------------------------------------------

Retrieves the window object of the specified frame or iframe.

Syntax

HTML N/A
Scripting [ oWindow = ] document.all.object.contentWindow

Possible Values

oWindow Object that receives the window object.

The property is read-only. The property has no default value.

Remarks

This property is useful if you do not know the id of the frame or iframe you are accessing through a collection.

=============================================

其子窗口中加入以下代码即可



    autoFixIframe: function(){
        try
        {
            if(window!=parent)
            {
                var commentIfrm = parent.document.getElementById("yocityAd");
                if(commentIfrm.contentWindow==window)
                {
                    var h1=0, h2=0, d=document, dd=d.documentElement;
                    commentIfrm.parentNode.style.height = commentIfrm.offsetHeight +"px";
                    commentIfrm.style.height = "10px";

                    if(dd && dd.scrollHeight) h1=dd.scrollHeight;
                    if(d.body) h2=d.body.scrollHeight;
                    var h=Math.max(h1, h2);

                    if(document.all){h += 4;}
                    if(window.opera){h += 1;}
                    commentIfrm.style.height = commentIfrm.parentNode.style.height = h +"px";
                }
               
            }
        }
        catch (ex){}
    }



    if(window.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
    }
    else if(window.addEventListener)
    {
        window.addEventListener('load',  iframeAutoFit,  false);
    }

分享到:
评论

相关推荐

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

    3. 当`iframe`加载完成时,通过`contentWindow`和`contentDocument`属性访问`iframe`内部的窗口和文档对象。 4. 获取`iframe`内容区域的高度,如`contentDocument.body.scrollHeight`或`contentDocument....

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

    此外,由于跨域安全限制,`&lt;iframe&gt;`内页面与父页面可能无法进行通信,这会影响高度自适应功能的实现。确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过...

    iframe自适应高度.rar

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

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

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

    再谈iframe自适应高度

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

    js实现iframe自适应高度

    为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是...

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

    iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。...

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

    iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...

    iframe自适应高度demo

    `iframe`的自适应高度是一项关键技术,它确保了嵌入的内容能够完全显示,避免滚动条的出现,从而提供更好的用户体验。 `iframe`的基本语法如下: ```html &lt;iframe src=...

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

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html &lt;iframe src=...

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

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

    iframe自适应高度js demo

    然而,需要注意的是,由于同源策略的限制,如果`iframe`加载的页面与父页面不在同一个域下,我们无法直接访问`iframe`的内容。在这种情况下,可以尝试使用`postMessage`和`message`事件进行跨域通信,让`iframe`内部...

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

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

    iframe自适应高度 .txt

    ### iframe自适应高度知识点详解 #### 一、概述 在网页设计与开发中,`&lt;iframe&gt;`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。随着响应式设计的需求日益增加,如何使`&lt;iframe&gt;`内...

    iframe跨域自适应高度模板

    if (iframe.contentWindow && iframe.contentWindow.document) { iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; } }); ``` 这段代码会在`iframe`加载完成后,将其...

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

    本文将深入探讨如何解决Iframe自适应高度的问题。 首先,我们需要了解Iframe的基本语法。在HTML中,创建一个Iframe的基本结构如下: ```html &lt;iframe src=...

    iframe自适应子页面内容高度

    这段代码首先获取`iframe`元素,然后检查其`contentWindow`和`contentWindow.document`是否可用,如果可用,就设置`iframe`的高度为子页面`document.body.scrollHeight`,这样`iframe`就会根据子页面的实际内容高度...

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

    "Iframe 高度自适应,js 控制 Iframe 高度自适应" Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度,以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript ...

    iframe自适应内容页面的高度

    为了解决这个问题,我们需要让`iframe`自适应其内容页面的高度,确保内容能够完全展示,提高用户体验。以下将详细介绍如何实现`iframe`的自适应高度,并考虑良好的浏览器兼容性。 1. **基础理解**: - `iframe`...

Global site tag (gtag.js) - Google Analytics