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?

Ortwin Gentz · Accepted Answer · 2010-12-16T18:17:05.173

4

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.

edited Dec 16 '10 at 18:17

answered Dec 16 '10 at 17:26

Ortwin Gentz

52,648
24
135
213

Yes, but I don't want to know the id of the image, because, the images Don't have id's, and as I said in the OP, I don't want to edit the epub manually. Is there a way I can select all of the elements with the tag "img" and hide those? – Richard J. Ross III Dec 16 '10 at 17:35
Oddly, this works in iPhone safari, but it doesn't inject properly in my app.... i can get other JS to inject, however (`alert("hello world!")`) – Richard J. Ross III Dec 16 '10 at 18:32
I will accept this because this worked, however, I ended up changing the HTML programmatically and removing the `` tags. – Richard J. Ross III Dec 16 '10 at 22:33
If you've control over the html, you can include an external JavaScript file with a function and just call the function using `stringByEvaluatingJavaScriptFromString:`. – Ortwin Gentz Dec 17 '10 at 14:15
your answer is true. My requirement is when any url loading in UIWebview it display only text not images. how can i STOP it... In your answer What is document ??? – vegda neel Oct 09 '17 at 11:51

score 1 · Answer 2 · answered Dec 16 '10 at 17:46

1

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

answered Dec 16 '10 at 17:46

Zeppomedio

5,911
3
18
18

When I inject this JS, nothing seems to happen on the UIWebview.. the view is loaded, but nothing happens on the screen and the results of this are `nil`... I can also verify that this JS code works: `window.scrollTo(0, 0);`. Any ideas on why your code isn't injected properly? – Richard J. Ross III Dec 16 '10 at 17:47
what happens if you do the first two lines and then alert(imageCount); ? – Zeppomedio Dec 16 '10 at 17:53
it returns 0. Could the problem be that its an xml file not HTML (actually XHTML)? – Richard J. Ross III Dec 16 '10 at 17:57
should still work. can you paste a part of the document into a pastebin or edit your q? – Zeppomedio Dec 16 '10 at 18:06
Yes, try here: http://pastebin.com/vMzV67ne the images are not included however... – Richard J. Ross III Dec 16 '10 at 18:25

score 1 · Answer 3 · answered Jan 30 '11 at 21:24

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.

Don't you mean 320px or 480 px? 640 px would be for iPhone 4, and not dependent upon the orientation. Great answer though, I really like this solution, gives users what they already have, I will keep that in mind! +1 — Richard J. Ross III, Jan 31 '11 at 01:47

Remove images from UIWebview

3 Answers3