Nov 09

UIWebView has very few instance methods. One of them is stringByEvaluatingJavaScriptFromString, which very powerful and unfortunately poorly documented. (This is literally the extent of Apple’s explanation: “Returns the result of running a script.”)

Let’s explore this mysterious method with a couple of examples.

A trivial example of how to use stringByEvaluatingJavaScriptFromString is to get the title of the HTML document:

NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

You would typically place this line of code in webViewDidFinishLoad.

This technique is not limited to one-liners, or accessing simple properties. Here’s an example of two lines of JavaScript code executed in order, as you would expect:

[webView stringByEvaluatingJavaScriptFromString:@"var field = document.getElementById('field_2');"
						 "field.value='Multiple statements - OK';"];

You can also call JavaScript functions this way. And if you want to call a JavaScript function that does not already exist in the web page that you’re downloading, you can “inject” it yourself with this technique:

[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
						 "script.type = 'text/javascript';"
						 "script.text = \"function myFunction() { "
							"var field = document.getElementById('field_3');"
							"field.value='Calling function - OK';"
						 "}\";"
						 "document.getElementsByTagName('head')[0].appendChild(script);"];

[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];

In essence I’m using Objective C to create a string which represents JavaScript which which when executed adds a JavaScript function to the HTML DOM. Apologies for the multiple meta levels… Let me try to untangle this line by line.

Line 1 : First we create a <script> element using JavaScript.
Line 2 : Set the type of the <script> element to text/javascript.
Line 3-6 : Set the content of the <script> element to the JavaScript function that you want to inject.
Line 7 : Add the new <script> element as a child to the <head> element of the HTML DOM.
Line 9 : Call the new JavaScript function.

Bonus tip: You can break up NSString constants over multiple lines in Xcode for increased readability. Just end the line with a double-quote character and begin the next line with a double-quote character. At compile time these lines will be joined into one string. So the string that begins with “var script” on Line 1 is one continuous string ending with “appendChild(script);” on Line 7.

Although it’s not critical for the discussion above, here’s the HTML that the example JavaScript refers to:

<html>
  <head>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0"/>
  </head>
  <body>		
    <p>This is the UIWebView</p>
    <form>
      <input id="field_1" type="text" name="value" /><br/>
      <input id="field_2" type="text" name="value" /><br/>
      <input id="field_3" type="text" name="value" /><br/>
    </form>
  </body>
</html>	

You can use this generic technique to add JavaScript to any web page that you’re downloading and displaying in a UIWebView. The technique and the possibilities are similar to what you can do with the Greasemonkey plugin for Firefox.

written by Nick \\ tags: , ,

41 Responses to “How To Inject JavaScript Functions Into a UIWebView”

  1. david brossa Says:

    you can also call a JS file from a bundle (get around that readability snag and have as many fnctions as you need)….

    NSString *filePath = [[NSBundle mainBundle] pathForResource:@”loco” ofType:@”js” inDirectory:@””];

    NSData *fileData = [NSData dataWithContentsOfFile:filePath];

    NSString *jsString = [[NSMutableString alloc] initWithData:fileData encoding:NSUTF8StringEncoding];

    [webby stringByEvaluatingJavaScriptFromString:jsString];

  2. Brandon Gray Says:

    Hi, this is my question. How can I change this to only show one image or id or tag? Any help would be great.

  3. Walker Says:

    @Nick:Hi, Nick! Do you know how to use javascript to control YouTube player? I want to play a video from YouTube in my iPhone app, but I don’t want the embed preview page. I wonder if I can control the player. Do you know how? Please help me, and thank you in advance!

  4. Nick Says:

    @Walker: Unfortunately the JavaScript API for the YouTube player does not work in a UIWebView. We spent a week trying to figure out how to use JavaScript to play a video, to no avail.

  5. Walker Says:

    @Nick:Oh! Taht’s too bad. But thank you all the same!

  6. Andres Fury Says:

    Hi, I came across this blog article while searching for help with JavaScript. I’ve recently switched browsers from Opera to Mozilla Firefox 3.1. Just recently I seem to have a problem with loading JavaScript. Everytime I browse page that requires Javascript, the page does not load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any aid is greatly appreciated! Thanks

  7. Nick Says:

    @Andres: This sounds like a Firefox issue and not an iPhone Development issue.

  8. Grant Says:

    Great! I tried the first line before and got no idea about further usage. Thx for your detailed explanation. It helps me a lot.

  9. Ak Says:

    I used NSMutableUequest and attached my cookie to request. When i load the response to UIWebView then UIWebView is loading this as static HTML and does not resolve any of the images or css. Also it does not execute anyof the javascript on the load time. Can you provide me some pointers on how to resolve this issue ?

  10. Nick Says:

    @Ak: I’m sorry but I don’t quite understand the issue.

  11. AK Says:

    @Nick: I found the problem. When we set a cookie in NSMutableUrlrquest object, it is set only for that particular request and does not store that as a domain cookie in shared storage, so when UIWebView makes call for other urls for same domain they gets 401. I resolve the issue by modifying my server side code.

  12. Grant Says:

    Hi Nick, besides using the meta programming (using Object C to generate javascript), there is an easy way: write all javascript to a js file. Then load the file and let UIWebView to run its content. It is interesting that when a javascript is executed, all the functions inside the script can be called later! These functions are not embedded inside the html. They are stored somewhere in the current page context. In this way, you can separate your javascript code from Object C.

    I got this method from the blog: http://www.icab.de/blog/2010/01/12/search-and-highlight-text-in-uiwebview/.

  13. Mona Says:

    Hi, thanks for the example, just one question. I have the following code:
    NSString *js = @”function myFunction() { ”
    “var elem = document.getElementsByTagName(‘p’)[0];”
    “var e = document.createElement(‘span’);”
    “e.innerHTML =’ Hello.’;” // or “e.text = ‘Hello.’;”
    “elem.appendChild(e);”
    “return elem.innerHTML;”
    “};”
    “myFunction();”;

    NSLog(@”myFunction: %@”,[webView stringByEvaluatingJavaScriptFromString:js]);

    This returns the following:
    myFunction: This is the first paragraph.
    If I use:
    elem.innerHTML += ‘Hello.’
    I get:
    myFunction: This is the first paragraph.Hello.
    Also insertBefore() pretty acts much the same way as apendChild().
    Does anyone know why this happens?
    Thanks.

  14. amok Says:

    Any idea how I inject html?
    I would like to add to the current page a reference to .js that is in the bundle.

  15. Nick Says:

    @amok: You have full access to the DOM in JavaScript, so you can programmatically add HTML anywhere into the document.

  16. Darshan Says:

    Hi Can we inject JS in a pdf document which is being displayed in UIWEBView

  17. Nick Says:

    @Darshan: I don’t think you can, although I have not tried. When you load a PDF into a UIWebView using the special PDF mime type, there is no HTML DOM to inject anything into.

  18. Gounthar Frankfurt Says:

    Thanks for the tip. Unfortunately, I have to run twice the JS insertion to get my function to work. Could it be linked to the fact I’m trying to add some JS code to an external HTML file (i.e. amazon.com)?

  19. muhsi Says:

    Hi, Nick i am trying to find out the way that let me know the total height of ppt file that i am showing in UIwebView. I have a timer and javascript function to scroll the slides, but i donot know where to end the timer. Thanks in advance.

  20. shane Says:

    Hi,

    Are there ways through Javascript to know page information for
    a document (PDF, PPT etc)?

    That is do you have code for (after a doc is loaded):
    How many pages a documents has?
    What’s the current page being viewed?
    What type of document is being viewed?

    Thanks.

  21. Nick Says:

    @shane: As far as I know this is not possible. UIWebView can display documents like PDF, PPT, etc., but those documents are not part of the browser DOM so there’s no way to access any data from the document.

  22. Andrew Says:

    Thank you. Exactly what I was looking for.

  23. beginner Says:

    not sure what i’m doing it correct or not. i’m trying to display a custom font in UIWebView.

    [webView stringByEvaluatingJavaScriptFromString:@”myFunction();”];

    how to call new myFunction();
    ??
    thanks

  24. ashish Says:

    can u post complate example of javascript rollover image (means change image) with output ?

  25. richtaur Says:

    Dang I was wanting to go the other way: JavaScript calling Objective-C code. I’ll keep looking. Still a helpful read, thanks!

  26. Andrew Miner Says:

    Neat trick, but I can’t seem to get it to work! I can get my new `script` element to show up when I inspect the `innerHTML` of the `head` element, but whenever I try to access the function, it doesn’t seem to be defined (e.g., `typeof(MyFunction)` returns “undefined”). Has anyone run into that problem / have a workaround?

  27. Adam Says:

    injecting
    var myFunction = function(){ /*function here*/ };
    also works (which I include from a js file in my app bundle)

  28. Dennis Says:

    Nick,

    Thanks for this post – I found it very useful. I am wondering if anyone knows if you can put an asychronous call in the javascript (e.g. out to a web service) and get the result back in the return value of stringByEvaluatingJavaScriptFromString? In this case I can’t control if the call out is sync or asynch.

  29. Daniel Says:

    Can I use any of this to send a spacebar pressed event and arrow key event to a uiwebview? In the way you can pause/play hulu or youtube with the spacebar on a computer I would like to do the same with a button floating on top of my uiwebview.
    Thanks,
    noob

  30. Nick Says:

    @Daniel: You can create an event in JavaScript of the type KeyboardEvent and then dispatch it using the dispatchEvent() method.

  31. Giel Says:

    Hi Nick,
    I’m trying to have a button auto fill the login info in a webview.

    These are the fields the website.

    And these are the NSUserdefaults for the username and password.
    username.text = [[NSUserDefaults standardUserDefaults] objectForKey:@”usernamekey”];
    password.text = [[NSUserDefaults standardUserDefaults] objectForKey:@”passwordkey”];

    I can’t get it to work with your code. Could you take a look, that would be greatly appreciated!

  32. Maria Says:

    nick,
    I,m using a UIWebView to display a web page.
    Inside the web page, is possible that the user can select an item (image, text field)? if is possible, can be selected and how using objective-c I can get the DOM id of the element?
    Thanks,
    maria

  33. Giel Says:

    Hi Nick,
    I’m trying to have a button auto fill the login info in a webview.

    These are the fields the website.
    //
    //
    //

    //
    //
    //

    And these are the NSUserdefaults for the username and password.
    username.text = [[NSUserDefaults standardUserDefaults] objectForKey:@”usernamekey”];
    password.text = [[NSUserDefaults standardUserDefaults] objectForKey:@”passwordkey”];

    I can’t get it to work with your code. Could you take a look, that would be greatly appreciated!

  34. Jess Says:

    Can I use this to display the facebook comments (plugin) of some url on a uiwebview (by injecting the script provided in the source code)?

  35. Vady Says:

    I need to know when a javascript function is executed in a webview on iphone. Can I install some kind of javascript listener which will tell me when screen is touched?

  36. Anthony Says:

    Hi, how should i code, if possible, to locate and add value to the text field(username and password) present in the HTML without using getElementById. Reason being, different websites uses different Id to identify their text fields and getElementById just won’t work universally on different websites.

    Thanks,
    Anthony

  37. steve Says:

    @Giel of course your code doesn’t work. You have to trigger it using an event. You have to use the UIWebView’s delegate methods and fire the js code once the page has finished loading.

  38. Rakesh Says:

    How to know the number of lines are present in webview.

  39. RM Says:

    Nick,
    Can you please point me in the right direction to implement text selection and highlight the HTML content inside UIWebView?
    The requirement is that user long presses on the UIWebView to select text and starts dragging to highlight the text (changing background color) inside HTML content.
    Thanks in advance.

  40. BB Says:

    Good Example. Can you please point me this example with Swift 3.0, Xcode 8. I am newbie in ios development.

  41. Beginner Says:

    Nick, How can I Add image into TextBox, Any idea?
    I’m doing like this

    “field.style.backgroundImage = ‘url(‘icon1.png’)’;”

    but couldn’t getting a success, Help. . ..

Leave a Reply