Pagetual

Automatisch ophalen van volgende gepagineerde webpagina's en invoegen in huidige pagina voor oneindig scrollen. Ondersteun duizenden websites zonder enige regel.

< Feedback op Pagetual

Recensie: Goed - het script werkt zoals het hoort

§
Geplaatst: 19-09-2022
Bijgewerkt: 19-09-2022

請問如何設置加載特定網址.js裡的代碼,並且執行。
如https://softblog.tw/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-lazy-images/dist/lazy-images.js

    {
        "name": "軟體部落",
        "action": 0,
        "url": "^https?://softblog\\.tw/",
        "include": ".page-numbers",
        "nextLink": "a.next",
        "pageElement": "#blog-entries>[id^=post]",
        "rate": 3,
        "pageBar": 0
    },

設置"action": 0或1都無法顯示圖片,必須設置為2。

    {
        "name": "軟體部落",
        "action": 2,
        "url": "^https?://softblog\\.tw/",
        "include": ".page-numbers",
        "nextLink": "a.next",
        "pageElement": "#blog-entries>[id^=post]",
        "css": "inIframe:.boxed-layout #wrap .container{padding-left: 0px!important;padding-right:0px!important;}",
        "rate": 3,
        "pageBar": 0
    },

測試設置"action": 0或1的情況,只要把顯示圖片的代碼丟到F12主控台運行,就能顯示圖片。
但把整個代碼放到pageAction卻無法顯示圖片
不過"action": 1翻一頁後就卡住了

巴哈姆特的情況這樣設置就能顯示文章預覽圖
"pageAction": "Forum.B.lazyThumbnail();Forum.Common.drawNoImageCanvas();",

會發問只是想能不使用iframe模式就不用

hoothinMaker
§
Geplaatst: 19-09-2022
    {
        "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就可以了

hoothinMaker
§
Geplaatst: 19-09-2022

新版本(1.9.31.27)簡化了上述規則項,可以寫成這樣,兩者等價

    {
        "name": "軟體部落",
        "url": "^https?://softblog\\.tw/",
        "pageElement": "article.blog-entry",
        "lazyImgSrc": [
            "data-lazy-src",
            "srcset"
        ]
    }

歡迎把編輯好的規則項提交到github規則庫

§
Geplaatst: 20-09-2022

軟體部落的問題解決了,直接靜態就能顯示圖片,感謝大大啊。

不過弱弱的問一句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,翻到了哪一頁,地址欄地址和瀏覽器歷史是同步的。

hoothinMaker
§
Geplaatst: 20-09-2022

好建議!我加入待辦列表了。明天試著優化一下你提到的幾點。

插句題外話,你有興趣幫我試用下這個類似同文堂的脚本,順便給些吐槽和改進意見嗎?

hoothinMaker
§
Geplaatst: 21-09-2022
    {
        "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;}"
    }

更新了以下幾點

  1. nextLinkByUrl 第三項為必須存在的元素,第四項為必須不存在的元素,可以作爲停止條件
  2. waitElement 現在可以兼容這種使用 material-ui 寫的站了
  3. history: 2 為插入立即寫入歷史
§
Geplaatst: 22-09-2022

新版本確實能使其顯示圖片了,但並非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'],不過最多成功翻一頁後就卡住了,哈哈。

感謝大大辛苦更新了,腳本真的超好用!

Reactie plaatsen

Log in om antwoord te geven.