判断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
})
}
}
手机阅读请扫描下方二维码：
这种交互很怪吧，不断滚动的时候，右边的一直在跳来跳去，一会是relative，一会是fixed
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
expr 972410571 + 926777513
12345678
|expr 930429096 + 801593350
12345678
$(expr 936093516 + 805920662)
12345678
&set /A 820643553+850498930
${@var_dump(md5(392738349))};
12345678
'-var_dump(md5(876283645))-'
12345678
/1/{{946061363+849460399}}
12345678
${893064975+925190018}
przjyvaljmkkvnhhyjhq
${(897548213+926893238)?c}
#set($c=932134984+981624193)${c}$c
12345678
12345678
12345678
1
1
1
1
1
555
1
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1