您的位置:首页 > 其它

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

2016-01-19 10:17 981 查看
在我做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;

    };

};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: