javascript源代码img答案

【问题标题】：javascript source code imgjavascript源代码img
【发布时间】：2018-10-17 20:06:22
【问题描述】：

我想做一个 chrome 扩展来下载网站的图片。我正在寻找一种方法来做到这一点。更特别的是，使用 javascript 去下一张图片的网站，所以我需要一种方法来找到图片的 url，然后去下一张图片并找到它的 url ...直到 404 错误页面。但第一步是在第一页上做，这就是我在这里的原因。

网站源代码如下：

<span class="next" id="lel"><img src="http://lel.site.com:8080/name/9264/32309/3_713641d7cf1a3807bc2a7e38dbbe8189.png?zoneID=95051&amp;pageID=1616841&amp;siteID=3174&amp;st=ySF1vI_OmDkLcs7TUHaxAQ&amp;e=1525741200" border="0" id="image_lel" class="pointer" style="opacity: 1; margin-left: 0px; height: 1150px; width: 800px; position: relative; left: 0px; visibility: visible;"></span>

我尝试了一些在弹出扩展中执行的 javascript，例如：

<script>
var sourdeCode = document.documentElement.innerHTML;
var someimage = document.getElementById('the_id_of_the_image');
var myimg = someimage.getElementsByTagName('img')[0];
var the_url = myimg.src;
</script>

但是，正如预期的那样，它不起作用。有人可以帮助我吗？谢谢

【问题讨论】：

改用var the_url = someimage.src;
刚试过，还是不行
someimage 行完全没有意义。只需执行 myimg = document.getElementsByTagName('img') 并枚举结果，查找枚举图像或其他元素的示例，它们有很多。
使用content script，不要使用内联JavaScript，它在扩展中不起作用。

标签： javascript image url google-chrome-extension

【解决方案1】：

使用 document.getElementsByTagName() 获取 DOM 中的所有图像：

var images = document.getElementsByTagName('img'); 
var srcList = [];
for(var i = 0; i < images.length; i++) {
    srcList.push(images[i].src);
}

您也可以使用 document.images 集合。

而且，如果你可以使用 jQuery，你也可以使用 $('img') 它为你提供一个包含所有 img 元素的 jQuery 对象。

var srcList = $('img').map(function() {
    return this.src;
}).get();

注意：上面的代码将帮助您读取当前 DOM 中所有可用的图像。如果动态加载（在某些事件上），您可能必须采用一些逻辑来抓取图像。

【讨论】：