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

父页面iframe高度自动适应子页面iframe高度

阅读更多
function initParentHeight()
{
var div = window.parent.document.getElementById('mainFrame');
div.style.height=window.document.body.scrollHeight||window.document.body.offsetHeight+5;
}

function SetWinHeight(obj)
{
  var win=obj;
   if (win && !window.opera)
   {
     if (win.contentWindow && win.contentWindow.document.body.offsetHeight)   //ie  8
     {
        var height;
        try{
var bheight=win.contentWindow.document.body.scrollHeight;
var dheight=win.contentWindow.document.documentElement.scrollHeight;
    height=Math.max(bheight,dheight);
}catch(ex){}
       win.style.height = height;
     }
     else if(win.Document && win.Document.body.scrollHeight)//ie  6
     {
      win.style.height = win.Document.body.scrollHeight;
     }
   }
   initParentHeight();
}


<iframe id="show_detail" onload="Javascript:SetWinHeight(this);" src="businessAction.do?method=init_CZ_details"  width="700" name="cz" frameborder="0" scrolling="no" style="overflow-x:hidden; " ></iframe>
分享到:
评论
1 楼 menghuannvxia 2015-04-02  
哇塞,学习了,多谢

相关推荐

    iframe 跨域 自动适应高度

    在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页...这样,当`content.html`加载完成后,会向`iframe.html`发送一个消息,包含自身的滚动高度,父页面接收到消息后更新`iframe`的高度,实现了自动适应高度。

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

    然而,`iframe`的高度自动适应往往成为开发者面临的问题,特别是当嵌入的内容高度不确定时。标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器...

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

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

    iframe自适应子页面内容高度

    然而,若希望`iframe`的高度自动适应子页面内容,我们需要进行一些额外的处理。 首先,由于同源策略的限制,只有当`iframe`加载的页面与包含它的页面在同一域名下时,我们才能通过JavaScript获取`iframe`的内容信息...

    iframe自动适应高度

    例如,`iframe`内的页面可以发送一个包含其高度的消息,然后父页面监听这个消息并更新`iframe`的高度。 ```javascript // iframe内容页 window.parent.postMessage({height: document.documentElement....

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

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    iframe高度自适应.pdf

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

    iframe高度随子页高度变化

    当我们需要在`iframe`中展示的内容高度不固定时,一个常见的需求就是使`iframe`的高度能自动适应其内嵌页面的高度,以避免滚动条的出现或内容被截断。标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于...

    iframe自适应宽高

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

    Iframe框架自动适应高度示例详解.pdf

    在一些特殊情况下,我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容,尽管通过OCR扫描技术出现了一些识别错误,但是核心的代码和思路是清晰的,能够帮助我们理解如何实现Iframe高度的自适应。 从...

    jsp页面iframe高度自适应的js代码.docx

    这种技术在实际应用中非常有用,例如在某些网页中,我们需要在 iframe 中嵌入一个内嵌页面,并且使其高度能够自动适应内容的高度,以免出现滚动条或空白区域。 在 jsp 页面中,我们可以使用 js 代码来实现 iframe ...

    iframe动态适应页面高度

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

    跨域控制iframe高度

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

    Iframe 高度自适应浏览器高度

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

    js实现iframe自适应高度

    然而,这些静态属性无法自动调整以适应内容的变化。 接下来,我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤: 1. **获取`iframe`元素**:通过`document....

    iframe多层级自动适应高度

    总的来说,`iframe`多层级自动适应高度是一个常见的前端问题,通过JavaScript的`postMessage`和事件监听,我们可以实现动态的高度调整,确保用户能完整地查看所有内容。同时,为了提高用户体验,还应考虑优化加载...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    本文将深入探讨如何在使用ExtJS时解决Panel与IFrame结合时页面高度自动适应的问题。 首先,我们需要了解`Panel`在ExtJS中的角色。Panel是容器组件,它可以包含其他组件,如按钮、表格、表单等。Panel有自己的布局...

    iframe自适应高度

    `iframe`内容页面发送其高度给父页面,然后父页面调整`iframe`的高度。 ```javascript // 父页面 window.addEventListener('message', function(event) { if (event.origin !== 'http://example.com') return; // ...

    动态的改变IFrame的高度实现IFrame自动伸展适应高度

    动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...

    再谈iframe自适应高度

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

Global site tag (gtag.js) - Google Analytics