做有态度的前端团队

网易FEG前端团队

判断iframe是否加载完成小结

在做大话西游经典版新闻内页,有个功能是滚动条下拉到一定位置,自动加载下一篇新闻,由于编码问题,采用了不同的加载下一篇新闻的方式。

页面效果:http://xy2.163.com/news/news/20161129/15205_658163.html

关于编码引起的问题

页面最终显示的编码是有一下四个因素共同决定的:

  • 1)HTTP Header中的"Content-Type"项,服务器端返回编码设置
  • 2)html代码中的meta标签
  • 3)页面文件的保存编码
  • 4)请求服务器设置的编码

HTTP Header中的"Content-Type"项,如果有写明charset的话就认定页面的编码方式为charset里面指定的值。假如没有写明charset的话,浏览器会根据html的meta标签去解析页面,这个不设定的好处是页面可以根据meta标签以UTF-8或者GBK的编码去请求内容。现在页面是没有指定的,则根据meta标签去指定编码。

六马新闻系统生成的新闻内容是根据站点来设置不同编码的,例如大话西游和梦幻西游的编码是GBK,其它站点是UTF-8,新闻接口统一返回的数据的编码是UTF-8。由于大话的设置是GBK,meta标签就要设置为GBK编码。

页面文件的保存编码要跟meta标签一致,保存为GBK编码。

现在统一确定了页面编码是GBK编码,新闻内容也是GBK,但是用AJAX来GET一个GBK编码页面时就可能会出现乱码,这是由于XMLHTTP在处理返回的responseText的时候,是把responseText按照UTF-8编码进行解码形成的,因此如果服务器送出的是UTF-8的数据流的时候中文汉字能正确显示(如这里的新闻右侧推荐栏是读取新闻接口,返回的是UTF-8编码的数据),而如果是GBK的数据的时候,高级浏览器下会根据meta去转码内容而不会乱码,但是低级浏览器下获取回来的数据就乱码了。

因此会针对不同浏览器去加载下一篇新闻。

针对不同浏览器选用加载内容的方法

高级浏览器会采取AJAX方式,低级浏览器下会用iframe去获取内容。

判断浏览器的方式

//高级浏览器
if(window.navigator.userAgent.indexOf("Chrome") !== -1 || $.browser.webkit){
    //do something
}else{
    //do something
}

如何判断iframe是否加载完成

        var addEvent = function(eventName,element,fn){
            if (element.attachEvent){
                element.attachEvent("on"+eventName,fn);
            }else{
                element.addEventListener(eventName,fn,false);
            }
        }
        addEvent("load",iframe,function(){
            //获取iframe的内容
            var $obj = $('#iframebox iframe').contents();
            //dosomething
        })

最终代码:

var addEvent = function(eventName,element,fn){
    if (element.attachEvent){
        element.attachEvent("on"+eventName,fn);
    }else{
        element.addEventListener(eventName,fn,false);
    } 
},
getNextartFun = function(url){
    if(window.navigator.userAgent.indexOf("Chrome") !== -1 || $.browser.webkit){
        $.ajax({
            url : url,
            type : 'GET',
            dataType : 'text',//"text": 返回纯文本字符串;"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
            headers : {
                "Content-type" : "text/html;charset=gbk"
            },
            success:function(obj,textStatus){
                //do something
            },
            error:function(){
                alert('服务器出错,请稍后再试')
            }

        })
    }else{
        var iframe = document.createElement('iframe');
        iframe.src = url;
        $('#iframebox').append(iframe);
        //判断iframe是否加载完数据
        addEvent("load",iframe,function(){
            //获取iframe的内容
            var $obj = $('#iframebox iframe').contents();
            //do something
        })
    }
}

手机阅读请扫描下方二维码:

已有 1 条评论

  1. 这种交互很怪吧,不断滚动的时候,右边的一直在跳来跳去,一会是relative,一会是fixed

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif