少女祈禱中...
Loading...
图片加载过慢?试试 从源站加载资源 X

ccloli

Tieba Preload 源码

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

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

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

index.js

  1. //TieBa Preload index.js
  2. var pid=document.getElementById(‘editor’).getAttribute(‘data-postor’).split(‘tid:\’)[1].split(\’)[0];//获取贴子id
  3. if(document.getElementsByClassName(‘tP’)[0]){//总页面数是否大于1
  4.         var ppage=parseInt(document.getElementsByClassName(‘tP’)[0].innerText,10);//如果有则获取当前页码
  5.         window.addEventListener(‘load’,function(e){//添加监听事件以注入加载框架
  6.                 var tbpreload=document.createElement(‘div’);//创建加载框架
  7.                 tbpreload.id=‘tbpreload’;//定义加载框架
  8.                 tbpreload.style.cssText=‘width:0;height:0;z-index:-999’;//定义加载框架样式
  9.                 document.body.appendChild(tbpreload);//输出加载框架
  10.                 var info=document.createElement(‘div’);//创建提醒框架
  11.                 info.id=‘tbpreload_info’;//定义提醒框架
  12.                 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’;//定义提醒框架样式
  13.                 document.body.appendChild(info);//输出提醒框架
  14.                 info.innerHTML=‘<span style=”color:orange;font-size:24px”>正在加载…</span>’;//填充提醒框架内容
  15.         })
  16. }
  17. else{
  18.         var ppage=0;//否则设置页面值为0
  19. }
  20. if(window.localStorage.getItem(‘tbpreload_history’)){//获取历史记录以清除可能未清除的缓存
  21.         var ch=window.localStorage.getItem(‘tbpreload_history’).split(‘|’);//区分历史记录
  22.         for(i=0;i<=ch.length1;i++){//遍历
  23.                 window.localStorage.removeItem(ch[i]);//清除可能未清除的缓存
  24.         }
  25.         window.localStorage.removeItem(‘tbpreload_history’);//清除历史记录
  26. }
  27. window.localStorage.removeItem(‘tbpreload_loading’);//移除可能未清理的正在加载的表示
  28. if(ppage!=0){
  29.         window.localStorage.setItem(‘tbpreload_’+pid+‘_page’,ppage);//存储当前页码数据
  30.         window.localStorage.setItem(‘tbpreload_history’,‘tbpreload_’+pid+‘_page’);//将当前页码数据Key加入历史纪录
  31. }
  32. var seelz=0;//预设定非只看楼主
  33. window.onscroll=function a(){//监听滚动条以设置回复按钮位置
  34.         if(!document.body.hasAttribute(‘has_tbbg_extension’)){//判断tbbg
  35.                 var top=330;//滚动条高 in normal
  36.         }
  37.         else{
  38.                 var top=225;//滚动条高 in tbbg
  39.         }
  40.     var getscroll=document.documentElement.scrollTop||document.body.scrollTop;//定义滚动条
  41.         var repbutton=document.getElementById(‘quick_reply’);//定义回复按钮
  42.         if(getscroll>=top){//判断滚动条高度
  43.                 repbutton.style.cssText=‘position:fixed;z-index:10000;top:0;right:0;’;//回复按钮居右上
  44.         }
  45.         else{
  46.                 repbutton.style.cssText=‘display: run-in;’;//恢复回复按钮位置
  47.         }
  48.         if (ppage!=0&&ppage<=document.getElementsByClassName(‘red’)[0].innerText){//判断是否需要预加载
  49.                 var getscroll2=document.body.scrollHeightdocument.body.scrollTop;//定义滚动条
  50.                 if(getscroll2<=5000&&window.localStorage.getItem(‘tbpreload_loading’)!=‘true’){//判断滚动条高度+确定是否需要预加载
  51.                         if(/see_lz/g.test(window.location.href)){//判断是否为只看楼主
  52.                                 var seelz=1;//若为是则添加标示
  53.                         }
  54.                         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
  55.                         window.localStorage.setItem(‘tbpreload_loading’,‘true’);//添加正在加载标识
  56.                         main();//运行判断代码
  57.                         document.getElementById(‘tbpreload_info’).style.opacity=‘1’;
  58.                 }
  59.         }
  60. }
  61. document.getElementById(‘quick_reply’).onclick=function(event){//监听点击回复按钮事件
  62.         var editor=document.getElementById(‘editor’);//定义回复框架
  63.         if(!editor.hasAttribute(‘style’)){//判断是否前端显示回复框
  64.                 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’;//前端显示回复框
  65.         }
  66.         else{
  67.                 editor.removeAttribute(‘style’);//恢复回复框位置
  68.         }
  69. }
  70. function main(){//判断代码
  71.         if(!window.localStorage.getItem(‘tbpreload_’+pid+‘_’+(ppage+1))){//判断是否存在目标数据
  72.                 setTimeout(function(){main()},1000);//重新监听
  73.         }
  74.         else{
  75.                 window.localStorage.setItem(‘tbpreload_history’,window.localStorage.getItem(‘tbpreload_history’)+‘|’+‘tbpreload_’+pid+‘_’+(ppage+1))
  76.                 document.getElementById(‘tbpreload_info’).style.opacity=‘0’;
  77.                 run();//执行核心代码             
  78.         }
  79. }
  80. function run(){//核心代码
  81.         document.getElementById(‘tbpreload_info’).style.opacity=‘0!important’;
  82.         ppage++;//页数+1
  83.         document.getElementsByClassName(‘p_postlist’)[0].innerHTML=document.getElementsByClassName(‘p_postlist’)[0].innerHTML+window.localStorage.getItem(‘tbpreload_’+pid+‘_’+ppage);//载入下一页数据
  84.         window.localStorage.removeItem(‘tbpreload_’+pid+‘_’+ppage);//清除下一页缓存
  85.         window.localStorage.setItem(‘tbpreload_’+pid+‘_page’,ppage);//储存新的页数
  86.         window.localStorage.removeItem(‘tbpreload_loading’);//移除正在加载的表示
  87. }
  88. //下一版本预计使用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

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

manifest.json

  1. //TieBa Preload manifest.json
  2. {
  3.         “content_scripts”: [ {
  4.                 “exclude_globs”: [],
  5.                 “include_globs”: [ “*://tieba.baidu.com/*” ],
  6.                 “js”: [ “index.js” ],
  7.                 “matches”: [ “*://tieba.baidu.com/*” ],
  8.                 “run_at”: “document_end”
  9.         },{
  10.                 “exclude_globs”: [],
  11.                 “include_globs”: [ “*://tieba.baidu.com/*” ],
  12.                 “js”: [ “background.js” ],
  13.                 “matches”: [ “*://tieba.baidu.com/*” ],
  14.                 “all_frames”: true,
  15.                 “run_at”: “document_idle”
  16.         }],
  17.         “name”: “Tieba Preload (Niece)”,
  18.         “update_url”: “http://loli.my.gp/download/update/update.php?crx=tbpreload”,
  19.         “homepage_url”: “http://ccloli.com/silence/tbpreload”,
  20.         “description”: “自动加载贴吧内容”,
  21.         “manifest_version”: 2,
  22.         “version”: “0.0.1.7”
  23. }

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

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

初期测试:5B4B铅笔

开发建议:wangdakanga(虽然还是不懂Ajax和XMLhttp……OTL)

  1. Indeed说道:

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

    Safari 4.0.4 Safari 4.0.4 iPad iOS 3.2 iPad iOS 3.2
    1. 864907600cc说道:

      可惜咱是新手……不会jquery……OTLLLL而且最后楼中楼的回复数据无法传递是硬伤……
      另外这个是用截取字符串的方法获取的……

      Google Chrome 23.0.1271.97 Google Chrome 23.0.1271.97 Windows 7 x64 Edition Windows 7 x64 Edition
      1. eccl说道:

        jQuery其实很好的,document.getElementsByClassName(‘tP’)这么长一句话变成jQuery只要
        $(‘.tP’)
        就搞定了。而且无比简单,随便找个互动教程做个2小时就能应付大部分日常应用了了。

        Google Chrome 25.0.1364.29 Google Chrome 25.0.1364.29 Windows 7 Windows 7
        1. 864907600cc说道:

          这一个明白了,不过扩展程序加上jQ库后文件增大了好几倍……Google Chrome 不允许直接引用外部JS,必须下载到本地并打包

          Google Chrome 24.0.1312.52 Google Chrome 24.0.1312.52 Windows 7 x64 Edition Windows 7 x64 Edition
  2. 千与琥珀说道:

    看了下domo,貌似是度娘贴吧类似瀑布流之类的拓展?

    Google Chrome 23.0.1271.97 Google Chrome 23.0.1271.97 Windows 7 Windows 7
    1. 864907600cc说道:

      嗯,差不多,虽然源码转过来了,但是楼中楼却无法回复,可能是回复参数在不同页面是不同的。如果是以前没有楼中楼时还好,回复都在大回复框下进行,不需要考虑页码。
      话说不知道为什么在提交评论时会出现浏览器假死的情况……

      Google Chrome 23.0.1271.97 Google Chrome 23.0.1271.97 Windows 7 x64 Edition Windows 7 x64 Edition
  3. 园长说道:

    哇,太厉害啦。。。

    Google Chrome 24.0.1312.52 Google Chrome 24.0.1312.52 Windows 7 x64 Edition Windows 7 x64 Edition
    1. 864907600cc说道:

      但是还是无法实现,终究只能做到浏览的效果

      Google Chrome 24.0.1312.52 Google Chrome 24.0.1312.52 Windows 7 x64 Edition Windows 7 x64 Edition
      1. 园长说道:

        我看两行就头晕了,完全不懂。

        Google Chrome 24.0.1312.52 Google Chrome 24.0.1312.52 Windows 7 x64 Edition Windows 7 x64 Edition
        1. 864907600cc说道:

          个人感觉自己写的这个扩展需要很高的逻辑性,所以每一行都写了注释,否则我每次打开还要重新推算一遍……不过我不会Ajax,所以只能通过localstorage将网页源码保存,然后再加到当前页面……虽然最终楼中楼无法实现回复而被迫放弃……
          如果需要了解每一句的具体含义的话可以对照一下贴吧的源码,感兴趣的话可以安装试试:http://ccloli.com/silence/tbpreload/tiebapreload_1.crx

          Google Chrome 24.0.1312.52 Google Chrome 24.0.1312.52 Windows 7 x64 Edition Windows 7 x64 Edition

864907600cc进行回复 取消回复