一个页面中使用多个iframe导致在ie中假死问题的解决方法

本文介绍了一种解决IE浏览器中使用多个iframe时出现假死现象的方法。通过控制iframe的加载时机并重置其内容,确保了在IE和其他现代浏览器中的兼容性和稳定性。

在我做web前端开发的时候遇到这样的情况,就是有需求是一个页面里放入多个iframe,点击tab进行跳转不同的iframe,通过iframe的隐藏和显示来实现,后来发现在谷歌等其他浏览器中是可以的,但是在ie中就会产生假死的状态,就只有一个页面显示正常,其他的页面都是空白,后来网上查了很多关于ie假死的问题,有说是jquery导致的,也有说是ie内存溢出导致,在几个iframe页面同时加载的时候ie不知道到底是否什么时候页面加载完成,因此会出现假死的状态。

这是我后来用的方法,定义了全局变量对应项对应的iframe,当第一次点击对应的tab时,对应的iframe加载出来,然后对应的变量递增,做判断如果是第一次点击就加载iframe,不是第一次点击就不做操作,就模拟了多个iframe的效果

function setUrl(iframe, url) {
    var el = document.getElementById(iframe),
         iframe = el.contentWindow;
    if (el) {
        el.src = 'about:blank';
        try {
            iframe.document.write('');
            iframe.document.clear();
        } catch (e) { };
        //以上可以清除大部分的内存和文档节点记录数了 
    }
    el.src = url;
}

var h = 0; //ie使用iframe时会导致页面假死,因此需要点击次数来模拟出iframe的效果
var j = 0;
var k = 0;
//根据参数不同跳转不同页面
function changeTab(typeNum) {
    var iframe = "showIframe" + typeNum;
    var url = window.webSiteRootUrl;
    var data = {
        ticket: $.page.ticket,
        basEntId: fw.fwCookie.FWCookieHelper("basEntId"),
        entId: $.page.params.entId,
        hisEntId: $.page.params.hisEntId
    };
    var params = fw.fwUrl.FWUrlHelper.param(data);
    for (var i = 1; i < 6; i++) {
        if (typeNum == i) {
            $("#showIframe" + typeNum).show();
            // setUrl('showIframe' + typeNum,);
        } else {
            $("#showIframe" + i).hide();
        };
    };
    switch (typeNum) {
        case '2':
            url += 'web/ent/insertEnt/entProduct.htm?' + params;
            if (h == 0) {
                setUrl(iframe, url);
            };
            h++;
            break;
        case '3':
            url += 'web/ent/insertEnt/entGuardInfo.htm?' + params;
            if (j == 0) {
                setUrl(iframe, url);
            };
            j++;
            break;
        case '4':
            url += 'web/ent/insertEnt/entEmergency.htm?' + params;
            if (k == 0) {
                setUrl(iframe, url);
            };
            k++;
            break;
    };
};

IE浏览器中使用jQuery操作iframe时,内存泄漏问题主要是由于浏览器的内存管理机制导致的。为了有效避免这一问题,可以采取以下策略: 参考资源链接:[解决IE下jQuery重置iframe源引发的内存泄漏问题](https://wenku.youkuaiyun.com/doc/1iiv7oicwj) 1. 使用原生JavaScript方法操作iframe使用`window.frames['frameName'].location.href = 'newUrl';`代替jQuery的`attr('src', 'newUrl')`,从而更精确地控制iframe的加载过程,并帮助浏览器释放不再需要的资源。 2. 清理iframe内的资源:确保iframe中没有指向外部资源的引用,比如图片、脚本等,这些资源如果没有被正确清理,也会导致内存泄漏。可以通过设置iframe的`src`为空白页面或当前页面,来确保这些资源不再被引用。 3. 利用jQuery的事件机制:在设置iframe的`src`属性后,可以通过监听`load`事件来确认iframe内容已经完全加载,然后再进行其他操作。这样可以减少对页面的不必要重绘和重排,避免内存使用激增。 4. 减少iframe的数量和大小:尽量减少页面iframe的数量,并对iframe内加载的内容进行优化,减少加载的资源量,从而降低内存消耗。 5. 优化jQuery选择器和事件绑定:避免在频繁操作的DOM元素上使用复杂的jQuery选择器和事件绑定,这可以减少浏览器重绘和重排的次数,间接降低内存压力。 需要注意的是,虽然上述方法可以在很大程度上减轻内存泄漏的问题,但在IE浏览器中,特别是老旧版本,彻底避免内存泄漏可能需要结合多种技术手段,并且需要不断的测试和验证。 通过阅读《解决IE下jQuery重置iframe源引发的内存泄漏问题》这篇文章,你可以获得更为详细的解决方案和操作示例。文章深探讨了内存泄漏的原理,并提供了实战经验分享,这对于想要深了解和解决这一问题的开发者来说是一份宝贵的资料。 参考资源链接:[解决IE下jQuery重置iframe源引发的内存泄漏问题](https://wenku.youkuaiyun.com/doc/1iiv7oicwj)
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chenhq_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值