Greasy Fork is available in English.
終極自動翻頁 - 加載並拼接下一分頁內容至當前頁尾,智能適配任意網頁
{ "name": "軟體部落", "url": "^https?://softblog\\.tw/", "pageElement": "article.blog-entry", "pageAction": "eles.forEach(ele=>{let img=ele.querySelector('img');if(img){img.src=img.dataset.lazySrc;img.srcset='';}})" }
這樣就可以了。
action:1無效是因爲元素沒有到視野内,可以換用waitElement來加載圖片。但具體到這個站,只需要action:0就可以了
新版本(1.9.31.27)簡化了上述規則項,可以寫成這樣,兩者等價
{ "name": "軟體部落", "url": "^https?://softblog\\.tw/", "pageElement": "article.blog-entry", "lazyImgSrc": [ "data-lazy-src", "srcset" ] }
歡迎把編輯好的規則項提交到github規則庫
軟體部落的問題解決了,直接靜態就能顯示圖片,感謝大大啊。
不過弱弱的問一句github規則庫在哪啊?
目前還有個站有問題請教您
{ "name": "avple.tv - 類別", "example": "https://avple.tv/tags/135/1/date", "action": 2, "url": "^https://avple\\.tv/tags/\\d+/\\d+/\\w+$", "exclude": "button[aria-label*='next'][tabindex='-1']", "nextLinkByUrl": [ "(/\\d+/)(\\d+)(/\\w+)$", "$1{$2+1}$3" ], "pageElement": ".jss23", "replaceElement": ".jss15", "waitElement": [ ".lazyload-wrapper>img", ".lazyload-wrapper>.lazyload-placeholder" ], "pageBar": 1, "css": "inIframe:header{display:none!important;}.jss23{margin-left:-7px;margin-right:7px;}", "fitWidth": false }
設置為"action": 1因為等不到waitElement完成卡在載入中,刪掉waitElement又無法顯示圖片,好像又不能用lazyImgSrc來解決,也找不到讓網站顯示圖片的代碼藏在哪,有能不使用"action": 2就顯示圖片的方法嗎?
我的理解是"action": 2是無限插入iframe來讀取整個網頁,感覺塞入了太多不必要的內容,想盡量避免使用,雖然很無腦又方便。
"action": 1是網頁底部插入一個iframe加載整個網頁後,只取出pageElement插入到本來的網頁,之後刪除iframe。
另外關於nextLinkByUrl,能不能再加個lastpage的設定,來判斷是否已是最後一頁,如網頁已經不包含下一頁的元素了。
測試用replaceElement替換頁碼條再搭配exclude,看能不能防止繼續翻頁,結果不行還是會繼續增加頁碼進行翻頁,只有直接跳轉到最後一頁才不會觸發翻頁,應該是exclude只會做一次判斷,翻下一頁後不會再判斷一次。
對於代碼小白nextLinkByUrl參照範例還能理解怎麼使用,但nextLinkByJs完全無法理解怎麼用,哈哈,所以當遇到頁碼是用JS沒有直接鏈接,對小白來說用nextLinkByUrl加lastPage這樣比較容易上手。
最後還有一個關於"history": 1
以小說站為例
由第一章翻到第二章預讀第三章,地址欄卻還是維持在第一章的鏈接沒有變化,瀏覽器歷史無第二章紀錄,由於預讀小說站後台紀錄閱讀到第三章,實則瀏覽器目前是閱讀第二章。
翻到第三章預讀第四章,地址欄這才顯示第二章的鏈接,瀏覽器歷史有了第二章的紀錄,由於預讀小說站後台紀錄閱讀到第四章,實則瀏覽器目前是閱讀第三章。
整個感覺就有點怪怪的慢了一拍,不該是翻到第三章,地址欄就顯示第三章的鏈接,瀏覽器歷史寫入第三章的紀錄這樣嗎?
如果本來就這樣設計,能不能增加"history": 2,翻到了哪一頁,地址欄地址和瀏覽器歷史是同步的。
好建議!我加入待辦列表了。明天試著優化一下你提到的幾點。
插句題外話,你有興趣幫我試用下這個類似同文堂的脚本,順便給些吐槽和改進意見嗎?
{ "name": "avple.tv", "author": "tony0809", "example": "https://avple.tv/tags/135/1/date", "url": "^https://avple\\.tv/tags/\\d+/\\d+/\\w+$", "action": 1, "nextLinkByUrl": [ "(/\\d+/)(\\d+)(/\\w+)$", "$1{$2+1}$3", "[aria-label='Go to next page']:not(.Mui-disabled)" ], "pageElement": ".jss23", "replaceElement": ".jss15", "waitElement": [ ".lazyload-wrapper>img", ".lazyload-wrapper>.lazyload-placeholder" ], "pageBar": 1, "history": 2, "css": "inIframe:header{display:none!important;}.jss23{margin-left:-7px;margin-right:7px;}" }
更新了以下幾點
新版本確實能使其顯示圖片了,但並非100%成功,翻頁有約30%機率或更高機率沒有顯示圖片,因為有些元素還是沒有變換完成。
代碼小白嘗試了好久...
觀察有顯示圖片和沒有顯示圖片,元素到底差在哪裡。
一開始img的class是jss29,span的class是jss28。需等待變成img.jss28才會顯示圖片,span.jss28變成span.jss29,才會清除span的佔位。
網頁有個css是.jss29{display:none;}
之後waitElement改成這樣,依然有5%的機率沒有顯示圖片,會有漏網之魚。
"waitElement": [
".lazyload-wrapper>img.jss28",
".lazyload-placeholder,span.jss28"
],
最後改成這樣再加上pageAction和css,總算是100%顯示圖片了,也不會有多餘的佔位。
"waitElement": [
".lazyload-wrapper>img",
".lazyload-placeholder"
],
"pageAction": "[].forEach.call(eles, ele=>{[].forEach.call(ele.querySelectorAll('img.jss29'), img=>{img.setAttribute('class','jss28')})})",
"css": ".lazyload-wrapper+span.jss28{display:none!important;}"
弄好的完整規則
{ "name": "avple.tv - 類別", "author": "tony0809", "example": "https://avple.tv/tags/135/1/date", "url": "^https://avple\\.tv/tags/\\d+/\\d+/\\w+$", "action": 1, "nextLinkByUrl": [ "(/\\d+/)(\\d+)(/\\w+)$", "$1{$2+1}$3", "[aria-label='Go to next page']:not(.Mui-disabled)" ], "pageElement": ".jss23", "replaceElement": ".jss15", "waitElement": [ ".lazyload-wrapper>img", ".lazyload-placeholder" ], "pageAction": "[].forEach.call(eles, ele=>{[].forEach.call(ele.querySelectorAll('img.jss29'), img=>{img.setAttribute('class','jss28')})})", "css": ".lazyload-wrapper+span.jss28{display:none!important;}", "pageBar": 1 }, { "name": "avple.tv - 搜索", "author": "tony0809", "example": "https://avple.tv/search?key=FC2PPV&page=1&sort=date", "action": 1, "url": "^https://avple\\.tv/search\\?key=", "nextLinkByUrl": [ "(&page=)(\\d+)(&.+)$", "$1{$2+1}$3", "[aria-label='Go to next page']:not(.Mui-disabled)" ], "pageElement": ".jss23", "replaceElement": ".jss15", "waitElement": [ ".lazyload-wrapper>img", ".lazyload-placeholder" ], "pageAction": "[].forEach.call(eles, ele=>{[].forEach.call(ele.querySelectorAll('img.jss29'), img=>{img.setAttribute('class','jss28')})})", "css": ".lazyload-wrapper+span.jss28{display:none!important;}", "pageBar": 1 },
話說昨天看規則才發現,這個站的架構跟NETFLAV是一樣的,看了一下內建規則nextLink填a[aria-current='true']+a,居然就能獲取下一頁的鏈接,好神奇啊!
想說avple.tv也這樣寫行不行,//li[(button/@aria-current='true')]/following-sibling::li/button和[aria-label='Go to next page'],不過最多成功翻一頁後就卡住了,哈哈。
感謝大大辛苦更新了,腳本真的超好用!
請問如何設置加載特定網址.js裡的代碼,並且執行。
如https://softblog.tw/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-lazy-images/dist/lazy-images.js
設置"action": 0或1都無法顯示圖片,必須設置為2。
測試設置"action": 0或1的情況,只要把顯示圖片的代碼丟到F12主控台運行,就能顯示圖片。
但把整個代碼放到pageAction卻無法顯示圖片
不過"action": 1翻一頁後就卡住了
巴哈姆特的情況這樣設置就能顯示文章預覽圖
"pageAction": "Forum.B.lazyThumbnail();Forum.Common.drawNoImageCanvas();",
會發問只是想能不使用iframe模式就不用