javascript - 如何从 sfpg(单文件 PHP 库)查找所有 img src 属性

Question

我正在尝试在 Greasemonkey 中创建一个用户脚本，以迭代以下图库中的所有图像，以从缩略图中下载实际图像。

缩略图和图片的区别在于url查询参数的值；所以我们必须将 cmd=thumb 更改为 cmd=image。这很容易。

所以首先我尝试获取 var 中的所有 img 标签，然后尝试迭代所有标签，并在每次迭代中使用字符串替换将拇指更改为图像以获得实际图像。

但是这个方法没有检索到任何img!在其他每个页面中，我都可以找到所有 imgs ，除了此页面。

如果有人能告诉我为什么会发生这种情况，会有帮助吗？

网址: http://sye.dk/sfpg/demo/index.php?sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKipkN2UwYWI2MTRkZGU2MTBiYjliMzEzM2M2ZDUzODE3MTY0OWU4ZWI3YjU0MzcwMTU2ODIxN2YxMTA2NWFiOWEw

在下面的代码片段中，首先我尝试在控制台中查看所有 img 标签，但它仅返回 baseURI，而不返回内部 imgs。我还检查了 tag.count 返回 1 ，而不是 3 ，因为此页面上有三张图像。除非我能够找到 imgs，否则我无法执行下一部分，即更改 URL 和自动下载。该代码已准备好，可以在其他网站上使用。

// ==UserScript==
// @name     Unnamed Script 629250
// @version  1
// @match        http://sye.dk/sfpg/demo/index.php?sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKipkN2UwYWI2MTRkZGU2MTBiYjliMzEzM2M2ZDUzODE3MTY0OWU4ZWI3YjU0MzcwMTU2ODIxN2YxMTA2NWFiOWEw
// @grant    none
// ==/UserScript==

(function() {
    'use strict';
 var tags = document.getElementsByTagName('img');
       
  for(var i=0;i<tags.length;i++){
 
      console.log(tags[i])
   
}
})();

Answer 1

图像是延迟加载的 - 它们不会在页面加载时立即包含在 HTML 中。懒惰的解决方案是在尝试选择 img 之前添加一个小的 setTimeout。

另一个问题是，那里不仅仅是三个 img - 最好只选择缩略图 View 中的 .thumbbox img。尝试这样的事情:

// ==UserScript==
// @name     sveimages
// @version  1
// @match    http://sye.dk/sfpg/demo/index.php?sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKipkN2UwYWI2MTRkZGU2MTBiYjliMzEzM2M2ZDUzODE3MTY0OWU4ZWI3YjU0MzcwMTU2ODIxN2YxMTA2NWFiOWEw
// @grant    none
// ==/UserScript==

setTimeout(() => {
  const fullImageURLs = Array.from(
    document.querySelectorAll('.thumbbox img'),
    img => img.src.replace('cmd=thumb', 'cmd=image')
  );
  console.log(fullImageURLs);
}, 100);

输出:

Array(3)
0:"http://sye.dk/sfpg/demo/index.php?cmd=image&sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKkNsZW1lbnRpbmVzLmpwZyowZmYzZmJlOTBlZjI3MjRhMzIwYzEzY2UxNzgzMGFlYTg3ZjM2OTg0NjZhOTM3NzllNWNhNTY1Y2FkNjczNmYy"
1:"http://sye.dk/sfpg/demo/index.php?cmd=image&sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKkZ1bm55IEZydWl0LmpwZypjMmY5ZGI2ZmEzZDA1Y2UxNGE1NmQ1OGVmODA1YjhmNTU1ODU2MmZmNzZhM2RmNDUxMmFmNGRiODE5YTg1YTc1"
2:"http://sye.dk/sfpg/demo/index.php?cmd=image&sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKk9yYW5nZXMuanBnKmQ2ZDlkMDc1MDYxMWI4OTA5NDk1NGE1NzEzMmE3ZDg5YWYzNDllNjQ4YTgwMzhkODg5YzhjZTViMzZlNjUwNTM"
length:3