js如何获取网页所有图片

介绍：如何使用JavaScript获取网页所有图片并实现按需放大？

在浏览网页时，我们经常遇到需要放大查看图片的情况，尤其是在移动端设备上。本文将向你介绍一种使用JavaScript获取网页所有图片，并根据需求进行放大的方法。

一、需求

在移动端网页中，当用户点击某张图片时，我们希望该图片能够放大显示。我们希望能按顺序切换图片，并且过滤掉一些小图标和不符合要求的图片。由于网页是在app中打开，图片的放大与切换需要通过调用原生方法实现。

二、解决方案

我们需要获取网页上所有图片的URL。这可以通过遍历所有的img标签并获取其src属性来实现。在此过程中，我们可以设置一个条件来过滤掉不符合放大要求的图片。以下是获取所有图片URL的JavaScript代码：

```javascript

var img = [];

$("img").each(function() {

if($(this).width() > 20) { // 假设宽度大于20像素的图片符合要求

img.push($(this).attr("src"));

}

});

var img_info = {list: img}; // 保存所有图片的url

```

接下来，我们需要给每个img标签添加一个点击事件。在这个事件中，我们可以获取被点击图片的索引，并将这个索引以及所有图片的URL信息组成一个JSON字符串。然后，根据设备的类型（iOS或Android）调用相应的原生方法来显示图片。以下是添加点击事件的代码：

```javascript

var imgs = document.getElementsByTagName('img');

for(var i = 0; i < imgs.length; i++){

if($(imgs[i]).width() > 20){

$(imgs[i]).attr('index',i); // 将索引作为img标签的属性存储

$(imgs[i]).click(function () {

var img_index = $(this).attr('index'); // 获取被点击图片的索引

var json = JSON.stringify(img_info); // 将信息转为json字符串

if (_IsIOS()) { // 判断设备类型并调用相应的原生方法

window.webkit.messageHandlers.showImg.postMessage(json);

} else if (_IsAndroid()) {

window.control.call('showImg',json);

}

});

}

}

```

以上就是使用JavaScript获取网页所有图片并实现在移动端按需放大的方法。在实际应用中，你可能需要根据具体的需求对代码进行调整。为了保证代码的正确性和兼容性，建议在多种设备和浏览器上进行测试。希望本文能对你的学习和工作有所帮助，也希望大家多多支持狼蚁SEO。别忘了关注我们的后续更新，我们将持续分享更多实用的技术知识和经验。