js iframe内存释放和高度自适应示例

一、iframe内存释放

相关资料称IE在iframe元素的回收方面存在着bug,在通常情况下应该将该元素的src属性值修改为”abort:blank”,并手工将其从 DOM树上移除,然后把脚本中引用它的变量置空并调用CollectGarbage()就可以避免iframe不能正常回收所造成的内存泄露。

function clearRAM() {
  var frame = document.getElementById("ifr_content");
  frame.src = 'about:blank';
  frame.contentWindow.document.write( '');//清空frame的内容
  frame.contentWindow.document.clear();
  frame.contentWindow.close(); //避免frame内存泄漏

  if (navigator.userAgent.indexOf('MSIE') >= 0) {
          if (CollectGarbage) {

               CollectGarbage(); //IE 特有 释放内存

                //删除原有标记
               var tags = document.getElementById("ifrSet");
               tags.removeChild(frame);

                //添加frameset框架
               var _frame = document.createElement('frame');
               _frame.src = '';
               _frame.name = 'content';
               _frame.id = 'ifr_content';
               tags.appendChild(_frame);
         }
  }

 }

//主动释放 5秒一次
setInterval( function() {
  if (navigator.userAgent.indexOf('MSIE') >= 0) {
    if (CollectGarbage) {
      //alert(1)
     CollectGarbage(); //IE 特有 释放内存
    }
  }
}, 5000);

二、iframe高度自适应

很多人一直被iframe的高度自适应的问题困扰着,在项目中也是多次遇到。网上也有不少相关的代码,但是总不能满足自己的要求。
本代码主要解决的问题是:最外层滚动条随着iframe高度动态变化的问题。如果iframe高度比较大最外层就会出现滚动条,否则就不会。网上好多例子的问题都是iframe只保留最大的高度以至于页面内容高度很小但是右边还有滚动条。
兼容性:谷歌、火狐、ie8+

/**
 * iframe自适应高度,height为手动设置的最小高度
 */
function initIframeHeight(height){
    var userAgent = navigator.userAgent;
    var iframe = parent.document.getElementById("contentIframe");
    var subdoc = iframe.contentDocument || iframe.contentWindow.document;
    var subbody = subdoc.body;
    var realHeight;
    //谷歌浏览器特殊处理
    if(userAgent.indexOf("Chrome") > -1){
        realHeight = subdoc.documentElement.scrollHeight;
    }
    else{
        realHeight = subbody.scrollHeight;
    }
    if(realHeight < height){
        $(iframe).height(height);
    }
    else{
        $(iframe).height(realHeight);
    }
}

时间: 2024-10-25 22:58:10

js iframe内存释放和高度自适应示例的相关文章

CSS实现iframe高度自适应示例

前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进一个单独的空页面,在这个页面里加了个统计,让人看着这个页面就跟直接进入咨询页面一样,懒得折腾啥js,直接用css弄了下,还好需求也不太高.OK了吧. 后果:因为接触iframe很少,几乎就没用过,所以当时就谷歌.百度了下,也不记得当时都搜到了些啥个内容,反正需求也不太强,就直接用css解决了 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"

iframe全跨域高度自适应解决方案

看到这个需求的时候就在暗爽,又可以搞定一个知识点了.哈哈,一天的奋斗之后,果然有所收获,而且经过怿飞的指点,在跨域问题解决上还有所突破(不通过hash).看Demo,兼容IE,FF,Safari. 方案说明: 需求是:A页面(taobao.com)要嵌入B页面(alibaba.com),因为不能确定B页面的高度,所以要求高度自适应.解决方法:简单来说就是在B页面里创建一个和A同域的iframe C,让C和A之间可以通讯,以把B的高度传过去.那么怎么传过去呢?以前的方法是在C里改变parent.p

js中iframe载入后高度自适应

关于iframe载入完毕的判断介绍了关于iframe载入完成的判断方法 iframe中跨域载入页面,在父级页面由于跨域的限制是访问不了加载页面的window对象,也就调用不了子页面中声明的函数. 因此在父级页面中判断iframe是否载入完毕最初的方式是使用参照元素载入完成的方式:  代码如下 复制代码 var loginiframe = document.createElement("iframe"); loginiframe.src = "http://login.hxsd

同域iframe的高度自适应

引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>1.html</title>   </head>   <body>      <

跨域iframe的高度自适应

原文:跨域iframe的高度自适应   跨子域的iframe高度自适应 完全跨域的iframe高度自适应   同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度.   但跨域的情况则不允许对子页面或父页面的文档进行访问(返回undefined),所以我们要做的就是打通或间

iFrame/Frame嵌入Silverlight时自适应高度的处理

iFrame如果嵌入的是普通网页,这种场景下的iframe高度自适应解决方案,百度一下随手都能找到一大把. 但是嵌入Silvelight时,嵌入iframe的父页面默认不知道Silverlight内容的真实高度,所以上述办法就不起作用了. 其实只要换个思路:既然父页面不知道iframe中SL的高度,SL难道不能自己主动向父页面汇报自已的高度吗? 先看最终的效果: 注:Page1,Page3均是SL中的UserControl 代码见下面的源代码: 主要步骤为 1.SL在每个页面的Page_Load

iframe窗口高度自适应的实现方法

 这篇文章主要介绍了iframe窗口高度自适应的实现方法,有需要的朋友可以参考一下 domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html 由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条 由于javascript同源策略的限制,无法进行跨域操作,使得问题比较棘手 参考了一下网上的做法,引入了一个代理页面,或者叫做中介 agent.html,属于domainA 然后

iframe窗口高度自适应的又一个巧妙实现思路

 这篇文章主要介绍了实现iframe窗口高度自适应的又一个巧妙思路,需要的朋友可以参考下 domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html  由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条  由于javascript同源策略的限制,无法进行跨域操作,使得问题比较棘手  参考了一下网上的做法,引入了一个代理页面,或者叫做中介 agent.html,属于doma

跨域iframe高度自适应 改进版(兼容)

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错 误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.