ccloli

Loading...

2012/12/28 | 10 comments

Tieba Preload 源码

这个算是个人比较耗精力的一个扩展吧……其实这一款扩展在开发之前就已经幻想了一个多月，之后用了一节物理课的时间在草稿纸上写下了程序核心代码的雏形——嗯，那张纸现在就在我左手边——然后花了一整天的时间完成了核心代码。不过其实这款代码是打算作为生日福利的，所以代码完成后就随着求生日祝福的弹窗发布了内测版（http://ccloli.com/happybirthday）。不过还好是内测版← ←因为bug非常的多……

之所以开源的原因是因为实在无法debug了OTL……度娘使用新版贴吧后多了楼中楼回复功能——如果没有楼中楼还好办，因为回复都是在最下面的大回复框进行的——而楼中楼的回复不是简单的copy "innerHTML"就能搞定的，数据仍旧无法传递……

所以……把源代码公开，期待大神完成咱未了的心愿QvQ……由于逻辑性比较强，所以开发时每行都写了文字注释，希望有所帮助……

index.js

//TieBa Preload index.js
var pid=document.getElementById('editor').getAttribute('data-postor').split('tid:\'')[1].split('\'')[0];//获取贴子id
if(document.getElementsByClassName('tP')[0]){//总页面数是否大于1
var ppage=parseInt(document.getElementsByClassName('tP')[0].innerText,10);//如果有则获取当前页码
window.addEventListener('load',function(e){//添加监听事件以注入加载框架
var tbpreload=document.createElement('div');//创建加载框架
tbpreload.id='tbpreload';//定义加载框架
tbpreload.style.cssText='width:0;height:0;z-index:-999';//定义加载框架样式
document.body.appendChild(tbpreload);//输出加载框架
var info=document.createElement('div');//创建提醒框架
info.id='tbpreload_info';//定义提醒框架
info.style.cssText='bottom:0;left:-webkit-calc(50% - 25px);z-index:10000;position:fixed;-webkit-mask-image:-webkit-linear-gradient(top,rgba(255,255,255,.75),transparent);opacity:0;pointer-events:none;-webkit-user-select:none';//定义提醒框架样式
document.body.appendChild(info);//输出提醒框架
info.innerHTML='<span style="color:orange;font-size:24px">正在加载...</span>';//填充提醒框架内容
})
}
else{
var ppage=0;//否则设置页面值为0
}
if(window.localStorage.getItem('tbpreload_history')){//获取历史记录以清除可能未清除的缓存
var ch=window.localStorage.getItem('tbpreload_history').split('|');//区分历史记录
for(i=0;i<=ch.length-1;i++){//遍历
window.localStorage.removeItem(ch[i]);//清除可能未清除的缓存
}
window.localStorage.removeItem('tbpreload_history');//清除历史记录
}
window.localStorage.removeItem('tbpreload_loading');//移除可能未清理的正在加载的表示
if(ppage!=0){
window.localStorage.setItem('tbpreload_'+pid+'_page',ppage);//存储当前页码数据
window.localStorage.setItem('tbpreload_history','tbpreload_'+pid+'_page');//将当前页码数据Key加入历史纪录
}
var seelz=0;//预设定非只看楼主
window.onscroll=function a(){//监听滚动条以设置回复按钮位置
if(!document.body.hasAttribute('has_tbbg_extension')){//判断tbbg
var top=330;//滚动条高 in normal
}
else{
var top=225;//滚动条高 in tbbg
}
var getscroll=document.documentElement.scrollTop||document.body.scrollTop;//定义滚动条
var repbutton=document.getElementById('quick_reply');//定义回复按钮
if(getscroll>=top){//判断滚动条高度
repbutton.style.cssText='position:fixed;z-index:10000;top:0;right:0;';//回复按钮居右上
}
else{
repbutton.style.cssText='display: run-in;';//恢复回复按钮位置
}
if (ppage!=0&&ppage<=document.getElementsByClassName('red')[0].innerText){//判断是否需要预加载
var getscroll2=document.body.scrollHeight-document.body.scrollTop;//定义滚动条
if(getscroll2<=5000&&window.localStorage.getItem('tbpreload_loading')!='true'){//判断滚动条高度+确定是否需要预加载
if(/see_lz/g.test(window.location.href)){//判断是否为只看楼主
var seelz=1;//若为是则添加标示
}
document.getElementById('tbpreload').innerHTML='<iframe style="position:absolute;left:-9999px;width:0px;height:0px;border:0px;" src="http://tieba.baidu.com/p/'+pid+'?pn='+(ppage+1)+'&see_lz='+seelz+'"></iframe>';//预加载iframe
window.localStorage.setItem('tbpreload_loading','true');//添加正在加载标识
main();//运行判断代码
document.getElementById('tbpreload_info').style.opacity='1';
}
}
}
document.getElementById('quick_reply').onclick=function(event){//监听点击回复按钮事件
var editor=document.getElementById('editor');//定义回复框架
if(!editor.hasAttribute('style')){//判断是否前端显示回复框
editor.style.cssText='z-index:9999;position:fixed;left:-5px;top:-25px;padding-left:25px;border-bottom-right-radius:20px;background-color:rgba(255,255,255,.75);box-shadow:rgba(255,255,255,.75) 0 0 25px 15px';//前端显示回复框
}
else{
editor.removeAttribute('style');//恢复回复框位置
}
}
function main(){//判断代码
if(!window.localStorage.getItem('tbpreload_'+pid+'_'+(ppage+1))){//判断是否存在目标数据
setTimeout(function(){main()},1000);//重新监听
}
else{
window.localStorage.setItem('tbpreload_history',window.localStorage.getItem('tbpreload_history')+'|'+'tbpreload_'+pid+'_'+(ppage+1))
document.getElementById('tbpreload_info').style.opacity='0';
run();//执行核心代码
}
}
function run(){//核心代码
document.getElementById('tbpreload_info').style.opacity='0!important';
ppage++;//页数+1
document.getElementsByClassName('p_postlist')[0].innerHTML=document.getElementsByClassName('p_postlist')[0].innerHTML+window.localStorage.getItem('tbpreload_'+pid+'_'+ppage);//载入下一页数据
window.localStorage.removeItem('tbpreload_'+pid+'_'+ppage);//清除下一页缓存
window.localStorage.setItem('tbpreload_'+pid+'_page',ppage);//储存新的页数
window.localStorage.removeItem('tbpreload_loading');//移除正在加载的表示
}
//下一版本预计使用document.getElementsByClassName('p_postlist')[0].innerHTML=document.getElementsByClassName('p_postlist')[0].innerHTML+document.getElementById("test").contentWindow.document.getElementsByClassName('p_postlist')[0].innerHTML减少LocalStorage负担

background.js

//TieBa Preload background.js
window.addEventListener('load',function(e){//添加监听事件以注入加载框架
var pid=document.getElementById('editor').getAttribute('data-postor').split('tid:\'')[1].split('\'')[0];//获取贴子id
var ppage=parseInt(document.getElementsByClassName('tP')[0].innerText,10);//获取当前页码
var loadpage=window.localStorage.getItem('tbpreload_'+pid+'_page');//获取记录页码
if(ppage==(parseInt(loadpage)+1)){//判断当前页是否为需加载页
window.localStorage.setItem('tbpreload_'+pid+'_'+ppage,document.getElementsByClassName('p_postlist')[0].innerHTML);
}
})

manifest.json

//TieBa Preload manifest.json
{
"content_scripts": [ {
"exclude_globs": [],
"include_globs": [ "*://tieba.baidu.com/*" ],
"js": [ "index.js" ],
"matches": [ "*://tieba.baidu.com/*" ],
"run_at": "document_end"
},{
"exclude_globs": [],
"include_globs": [ "*://tieba.baidu.com/*" ],
"js": [ "background.js" ],
"matches": [ "*://tieba.baidu.com/*" ],
"all_frames": true,
"run_at": "document_idle"
}],
"name": "Tieba Preload (Niece)",
"update_url": "http://loli.my.gp/download/update/update.php?crx=tbpreload",
"homepage_url": "http://ccloli.com/silence/tbpreload",
"description": "自动加载贴吧内容",
"manifest_version": 2,
"version": "0.0.1.7"
}

(二次修改或开发请注明来源，您可以随意修改，随意发布，但不可用于营利)

最后感谢参与开发的朋友们……

初期测试：5B4B铅笔

开发建议：wangdakanga（虽然还是不懂Ajax和XMLhttp……OTL）

Comments

写得的确有点乱……有些地方可以用jquery，会方便很多，再就是处理json数据的方式有点别扭
var pid=document.getElementById(‘editor’).getAttribute(‘data-postor’).split(‘tid:\’‘)[1].split(‘\’‘)[0];//获取贴子id
json数据应该转化为对象处理

Safari 4.0.4 iPad iOS 3.2

Indeed 2012/12/28 13:31:00

Reply Quote
- 可惜咱是新手……不会jquery……OTLLLL而且最后楼中楼的回复数据无法传递是硬伤……
  另外这个是用截取字符串的方法获取的……
  
  Google Chrome 23.0.1271.97 Windows 7 x64 Edition
  
  864907600cc 2012/12/28 13:33:15
  
  Reply Quote
  - jQuery其实很好的，document.getElementsByClassName(‘tP’)这么长一句话变成jQuery只要
    $(‘.tP’)
    就搞定了。而且无比简单，随便找个互动教程做个2小时就能应付大部分日常应用了了。
    
    Google Chrome 25.0.1364.29 Windows 7
    
    eccl 2013/01/15 03:12:06
    
    Reply Quote
    - 这一个明白了，不过扩展程序加上jQ库后文件增大了好几倍……Google Chrome 不允许直接引用外部JS，必须下载到本地并打包
      
      Google Chrome 24.0.1312.52 Windows 7 x64 Edition
      
      864907600cc 2013/01/15 12:41:25
      
      Reply Quote
看了下domo，貌似是度娘贴吧类似瀑布流之类的拓展？

Google Chrome 23.0.1271.97 Windows 7

千与琥珀 2013/01/03 12:18:42

Reply Quote
- 嗯，差不多，虽然源码转过来了，但是楼中楼却无法回复，可能是回复参数在不同页面是不同的。如果是以前没有楼中楼时还好，回复都在大回复框下进行，不需要考虑页码。
  话说不知道为什么在提交评论时会出现浏览器假死的情况……
  
  Google Chrome 23.0.1271.97 Windows 7 x64 Edition
  
  864907600cc 2013/01/03 12:23:41
  
  Reply Quote
哇，太厉害啦。。。

Google Chrome 24.0.1312.52 Windows 7 x64 Edition

园长 2013/01/16 22:57:27

Reply Quote
- 但是还是无法实现，终究只能做到浏览的效果
  
  Google Chrome 24.0.1312.52 Windows 7 x64 Edition
  
  864907600cc 2013/01/16 23:08:45
  
  Reply Quote
  - 我看两行就头晕了，完全不懂。
    
    Google Chrome 24.0.1312.52 Windows 7 x64 Edition
    
    园长 2013/01/16 23:10:28
    
    Reply Quote
    - 个人感觉~~自己写的这个扩展需要很高的逻辑性~~，所以每一行都写了注释，否则我每次打开还要重新推算一遍……不过我不会Ajax，所以只能通过localstorage将网页源码保存，然后再加到当前页面……虽然最终楼中楼无法实现回复而被迫放弃……
      如果需要了解每一句的具体含义的话可以对照一下贴吧的源码，感兴趣的话可以安装试试：http://ccloli.com/silence/tbpreload/tiebapreload_1.crx
      
      Google Chrome 24.0.1312.52 Windows 7 x64 Edition
      
      864907600cc 2013/01/16 23:19:10
      
      Reply Quote

Tieba Preload 源码

Comments

取消回复