一个页面中使用多个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;
    };
};

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

chenhq_

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

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

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

打赏作者

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

抵扣说明:

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

余额充值