CODEWITHSUNDEEP
javascripthtmldom
CodeChunk
CodeChunk

Reputation: 83

Looping through all the images on a page

2 Questions:

  1. What will be the most officiant way to loop through all of the Images on a given page and open each one in a new tab.

  2. Same idea but instead open in a new tab I would like to push different images instead of the given ones. The idea is to build a widget that will inject cat photos instead of the normal photos of websites.

Upvotes: 3

Views: 9903

Answers (4)

enhzflep
enhzflep

Reputation: 13089

Here's a way of doing it with vanilla js. As mentioned in the comments, using the document.images node-list is the best method for getting the images, since it's a static list and need not be assembled in response to dom queries.

As mentioned, browsers will block the attempts to open new windowss, labelling them as pop-ups.

Here's a demo:

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;
  });
}
<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' />

Upvotes: 1

Carlos Delgado
Carlos Delgado

Reputation: 3065

Using vanilla javascript :

var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
  var image = images[i];
  window.open(image.src,"_blank");
}

// changing for a kitty image
var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
   var image = images[i];
   image.src = "http://placekitten.com/600/338";
}

However, if there are more than 1 image the browser will prevent that (see the popup message and allow that behaviour).

Upvotes: 0

dcohenb
dcohenb

Reputation: 2127

This is how you loop through all the images in a page. I've also added example of opening in a new tab or replacing the source. using native JavaScript no dependencies required.

// 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)];
}

Upvotes: 0

Thatkookooguy
Thatkookooguy

Reputation: 7012

I answered 2 in the code, and 1 in the comment of the first code block

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';
}

you can also do the same with jquery:

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

If you want each photo to be a different image, just replace the url_to_cat_image with a function that returns a random cat image in the first code block. For jquery, you can use .each and a random cat url function.

Upvotes: 4

Related Questions