`
心语2012
  • 浏览: 45614 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

设置iframe高度的问题

    博客分类:
  • js
阅读更多
对于iframe高度的问题,需要分两类,第一种是同域的父页面和子页面解决方法是
假如iframe的ID是iframeExp
var newIframe = docment.getElementById("iframeExp");
function setHeight(){
    var doc=newIframe.contentWindow.document;
    var maxHeight=Math.max(doc.documentElement.scrollHeight,doc.body.scrollHeight);
    if(maxHeight!=getStyle(newIframe,"height")){
         newIframe.style.height=maxHeight+"px";
     }
}

function getStyle(obj,attr){
   if(obj.currentStyle){
      return obj.currentStyle[attr];
    }else{
       return getCumputerStyle(obj,false)[attr];
     }
}

if(newIframe){
   setInterval(setHeight(),300);
}

第二种是跨域的的父页面和子页面
假如父页面是A,子页面是B,需要一个代理商页面是C。
其中A和C是同域,A嵌套B,B嵌套C,
在B中需要计算自己的高度然后通过URL传给C,然后C可以访问A把高度告诉A
在B中
  var getHeight = function(){
        return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    };
agent_iframe.src = "C的地址?a=" + Math.random() + "#" + getHeight();

在C中
  window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
分享到:
评论

相关推荐

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

    总的来说,通过使用JavaScript动态计算`<iframe>`内容的高度并设置`<iframe>`的高度,可以有效地解决`<iframe>`内容高度自适应以及设置高度后无法缩小的问题。同时,要注意兼容性问题和跨域限制,以确保在各种环境下...

    javascript动态调整iframe高度

    `javascript`提供了解决这个问题的方案,即动态调整`iframe`的高度,确保内容完整显示,同时保持页面整洁美观。下面我们将详细探讨如何使用`javascript`来实现这一功能。 1. 获取`iframe`元素 在`javascript`中,...

    jQuery获取与设置iframe高度的方法

    本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...

    跨域控制iframe高度

    这样,父页面可以根据实际高度设置iframe的大小。 4. **使用`window.name`**:虽然`window.name`属性不受同源策略限制,但这种方法较为复杂,需要在两个页面间传递一个包含高度信息的字符串,并在加载时解析。 5. ...

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

    5. 将获取到的高度设置为`iframe`的`height`属性,实现自动适应。 这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段,它可能包含了针对不同浏览器的兼容性处理,比如对于IE6-9...

    iframe高度自适应.pdf

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

    Iframe 高度自适应浏览器高度

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

    iframe高度随子页高度变化

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

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

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

    首先,需要获取 iframe 的 ID,然后使用 JavaScript 函数来获取 iframe 的内容高度,并将其设置为 iframe 的高度。这种方法可以在大多数浏览器中正常工作,但是在某些特殊情况下可能会出现问题。 例如,在 Firefox ...

    js实现iframe自适应高度

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

    iframe实时高度检测

    "iframe实时高度检测"是解决了一个常见问题:当我们在一个页面中使用`iframe`展示其他内容时,如何确保`iframe`的内容能够完全显示,而不需要滚动条或者部分内容被裁剪。 ### 1. `iframe`的基本用法 `iframe`标签...

    iframe自适应高度和宽度

    使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置给`iframe`元素的`...

    iframe页面的高度iframe高度自适应

    iframe包含的页面的高度,兼容性好,iframe高度自适应

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

    3. **使用`miframe.js`插件**:从提供的文件名`miframe.js`来看,这可能是一个专门处理IFrame高度的插件。安装并引用该插件后,可以简化处理IFrame高度的工作。 ```javascript // 引入miframe.js Ext.onReady...

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

    为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ...

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

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

    iframe 跨域 自动适应高度

    创建一个与父页面同源的代理页面,这个页面负责加载跨域的子页面并返回其高度,然后由父页面根据返回的高度设置`iframe`的高度。 - **JavaScript定时检测** 父页面每隔一定时间检测`iframe`的`contentDocument`...

    iframe高度自适应

    ### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`<iframe>`标签。然而,默认情况下,`<iframe>`的高度是固定的,当其内部内容发生变化时,可能...

Global site tag (gtag.js) - Google Analytics