Remove images from UIWebview

Question

In my iPhone app, an epub reader, based off the method here, I have parsed the epub, created the UIWebviews, but I have a slight problem. There are images in the epubs that are larger than the width of the iPhone's screen (320 px.). Is there a Javascript method I can invoke on the UIWebview ([view stringByEvaluatingJavaScriptFromString:SomeJavaScriptString]) and remove those images programatically without changing the epub manually?

UPDATE: Could the issue be that the source file is an xml file and not HTML?

Answer 1

You probably want something like: document.getElementById('id_of_your_image').style.visibility = 'hidden'

UPDATE To hide all images in a document,

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

should do the trick.

Answer 2

var images = Array.prototype.slice.call(document.getElementsByTagName('IMG'), 0);
var imageCount = images.length;
for (var i = 0; i < imageCount; i++) {
    var image = images[i];
    image.parentNode.removeChild(image);
}

Answer 3

If you're not dealing with graphs or images where seeing the detail is important why not:

1) write some CSS that sets a max-width on images of 320px or 640px, depending on orientation.... see http://www.thecssninja.com/css/iphone-orientation-css for how to use different css for different orientations.

2) insert that CSS in each HTML file after any other styles or stylesheet links - inside a <style> element added just before the </body> would work.

?

That way images are still visibile but won't extend past a single page width.

As a next step you could wrap images with something like <a href='zoom://x'> where x is the image filename - then in your UIWebViewDelegate' "shouldStartLoadWithRequest" function check to see if request.URL.scheme == "zoom" - if it is you could push a new view containing image x in a zoomable container, like iBooks.