判断iframe是否加载完成小结

作者: 两只凤梨日期: 2016-12-01

214556

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

页面效果：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
        })
    }
}