Question

2个问题：

循环显示给定页面上的所有图片并在新标签页中打开每个图片的最主要方法是什么。
同样的想法，但改为在新标签中打开，我想推送不同的图像而不是给定的图像。我们的想法是构建一个小部件，它将注入猫照片而不是正常的网站照片。

Answer 1

这是使用vanilla js做到这一点的一种方式。正如评论中所提到的，使用document.images节点列表是获取图像的最佳方法，因为它是一个静态列表，无需为响应dom查询而进行汇编。

如前所述，浏览器会阻止尝试打开新窗口，将其标记为弹出窗口。

这是一个演示：

＆＃13;

function forEachNode(nodeList, func) {
  for (var i = 0, n = nodeList.length; i < n; i++) func(nodeList[i], i, nodeList);
}

function onBtnClicked() {
  var diskUrl =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC" +
    "3RAAABdElEQVQoU22SLX/CMBCH/3E4IueorKNysh+hH6ESR93mqBuOuuEWiYyczB" +
    "zycJPBIa+uU9nvmlD2wonmLulz78q+c4DIMH7Hk0UfOJ5/75KtrOWg9RxEwHqdfr" +
    "xz9F9AXX9Ag8fXG3jssX6a3yUFwtCjqgnsDbK8gjIHDtnDHM6dsdks/oFXSNKuVg" +
    "5VXoA+HZQxHLJsDvt+xu7lN/gTYgbqxqHMM3hPUGbvQ5YvYO0Ju91yivgX4oETWI" +
    "AvBNV1PhTFAuZwwttrBO9B0u2qkVSzBG4jKL2yhxNYtDSSmx5HM0LyxgTVthEUkT" +
    "qY+2mO0cHVUZrrOF8P1T5TKIpl8tTDHdvfnZ0BeqbBXN6WYiCoRsB8OUUiamEPHY" +
    "qyhNlbYAZ0+w6eirRFUpSHapoIeu5Hj/TZwV8I5WOFZlUn0MA5DS3lANCSarOikE" +
    "nRzDBHAi4dum1MV1IcI25beK6mvdUgKLHqlQsCSsRJpAlXIzUomvH+G/9qC1CEZi" +
    "AJAAAAAElFTkSuQmCC";
  forEachNode(document.images, function(elem) {
    elem.oldSrc = elem.src;
    console.log(elem.src);
    window.open(elem.src);
    elem.src = diskUrl
  });
}

function onResetBtn() {
  forEachNode(document.images, function(elem) {
    if (elem.oldSrc != undefined) elem.src = elem.oldSrc;
  });
}

＆＃13;

<button onclick='onBtnClicked()'>Open pop-ups, change image sources</button>
<button onclick='onResetBtn();'>Reset</button>
<br>
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAYAAAAvZezQAAAAKElEQVQIW2MUder+/3pfKSMDFDCCBEBsmCBcACaIIgASxK0CxQxkWwA6axnpT9J3PwAAAABJRU5ErkJggg==' />
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAYAAAAvZezQAAAAJElEQVQIW2NkQAKiTt3/GWF8EAfEBgvAOGABZA52FVjNQBYEAPsjDS+SFXnjAAAAAElFTkSuQmCC' />

＆＃13;

Answer 2

我在代码中回答了2，在第一个代码块的注释中回答了1

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

for(var i = 0; i < allImages.length ; i++) {
  // to open all photos in new tabs:
  // window.open(allImages[i].src, '_blank');
  allImages[i].src = 'url_to_cat_image';
}

你也可以用jquery做同样的事情：

// change all photos to the same one:
var allImages = $('img');
allImages.attr('src', 'url_to_cat_image');

如果您希望每张照片都是不同的图像，只需将url_to_cat_image替换为在第一个代码块中返回随机猫图像的函数。对于jquery，您可以使用.each和随机cat url函数。

Answer 3

这是循环浏览页面中所有图像的方法。我还添加了在新选项卡中打开或替换源的示例。使用本机JavaScript不需要依赖项。

// Array of cat photos
var arr = ['cat1.jpg', 'cat2.jpg', 'cat3.jpg'....]

var elem = document.getElementsByTagName('img');
for (var i = 0; i < elem.length; i++) {
    var src = elem[i].getAttribute('src');

    // Open in a new tab
    if (src) window.open(src);

    // Replace with a random cat photo
    elem[i].src = arr[Math.floor(Math.random() * arr.length)];
}

Answer 4

使用vanilla javascript：

k = 2

但是，如果有超过1个图像，浏览器将阻止它（请参阅弹出消息并允许该行为）。

循环浏览页面上的所有图像

4 个答案: