ansaurus

Question

javascript bookmarklet to hide all images from current webpage?

Answer 1

+1 A:

You need to iterate over the array-like object returned from document.getElementsByTagName, e.g.:

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.visibility = "hidden";
}

Edit:

The complete bookmarklet URI:

javascript:(function(){var imgs=document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++)imgs[i].style.visibility="hidden"}());

harto 2010-09-02 03:34:22

and how can i use that in one line for a bookmarklet? is that even possible to do?

2010-09-02 03:43:55

Sure, just replace newlines with spaces.

harto 2010-09-02 03:55:16

javascript:var%20imgs=document.getElementsByTagName("img");for(var%20i=0;i<imgs.length;i++){imgs[i].style.visibility="hidden";}

2010-09-02 03:58:48

doesn't work for me! clears the whole page and adds "hidden" to the body!

2010-09-02 03:59:17

thank you! but it doesn't really do the trick on every page! eg. on google if you browse for images it doesn't hide the images? any idea why?

2010-09-02 04:06:51

This will work on all images when the Bookmarklet is clicked. There is nothing stopping images loading after that (which wasn't specified in the scope of your question) though its possible to do that if you add a 'setInterval' to redo it every few seconds or to insert a CSS rule instead..

michael 2010-09-02 04:16:44

This method (and mine) won't hide images that weren't embedded using `<img>` tags. These would primarily be CSS based images (`background-url`, etc), but it can also be `<embed>`, since images can be embedded using the embed tag.

yc 2010-09-02 04:18:01

@mathiregister: At least in Chrome with the new image search, they are using canvas elements instead of images. If you call `getElementsByTagName` with "canvas" instead of "img" it should work. Of course, you would probably want to do both. Another case you might want to think about is CSS background images.

Matthew Crumley 2010-09-02 04:21:03

Answer 2

A:

Ok, this is kind of cheating, but it works and is easy.

This checks to see if the page has jQuery; if it doesn't, it injects it. Then, it does a simple:

 jQuery('img').css('visibility', 'hidden');

The (tested) bookmarklet is

javascript: if(typeof jQuery == 'undefined'){var s=document.createElement('script');s.setAttribute('src','http://jquery.com/src/jquery-latest.js');document.getElementsByTagName('body')[0].appendChild(s);}jQuery(function() {jQuery('img').css('visibility', 'hidden');});

yc 2010-09-02 03:58:26

Credit for the method of checking for jQuery goes to http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-goo/1014251#1014251

yc 2010-09-02 04:02:04

ansaurus

tags:

views:

answers:

javascript bookmarklet to hide all images from current webpage?

related questions