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.
December 6th, 2009 at 14:44
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];
December 16th, 2009 at 22:42
Hi, this is my question. How can I change this to only show one image or id or tag? Any help would be great.
December 22nd, 2009 at 23:41
@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!
December 23rd, 2009 at 08:45
@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.
December 23rd, 2009 at 19:26
@Nick:Oh! Taht’s too bad. But thank you all the same!
March 4th, 2010 at 17:56
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
March 8th, 2010 at 15:05
@Andres: This sounds like a Firefox issue and not an iPhone Development issue.
April 8th, 2010 at 04:35
Great! I tried the first line before and got no idea about further usage. Thx for your detailed explanation. It helps me a lot.
May 6th, 2010 at 10:29
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 ?
May 6th, 2010 at 15:08
@Ak: I’m sorry but I don’t quite understand the issue.
May 7th, 2010 at 06:23
@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.
May 7th, 2010 at 22:29
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/.
July 22nd, 2010 at 04:18
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.
September 25th, 2010 at 13:36
Any idea how I inject html?
I would like to add to the current page a reference to .js that is in the bundle.
October 1st, 2010 at 22:40
@amok: You have full access to the DOM in JavaScript, so you can programmatically add HTML anywhere into the document.
October 17th, 2010 at 21:37
Hi Can we inject JS in a pdf document which is being displayed in UIWEBView
October 18th, 2010 at 07:58
@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.
October 22nd, 2010 at 01:21
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)?
October 29th, 2010 at 01:21
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.
October 30th, 2010 at 10:28
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.
November 1st, 2010 at 22:37
@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.
October 31st, 2010 at 19:55
Thank you. Exactly what I was looking for.
November 19th, 2010 at 05:46
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
December 1st, 2010 at 20:49
can u post complate example of javascript rollover image (means change image) with output ?
January 10th, 2011 at 01:59
Dang I was wanting to go the other way: JavaScript calling Objective-C code. I’ll keep looking. Still a helpful read, thanks!
June 14th, 2011 at 17:18
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?
August 2nd, 2011 at 08:49
injecting
var myFunction = function(){ /*function here*/ };
also works (which I include from a js file in my app bundle)
August 16th, 2011 at 08:41
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.
August 20th, 2011 at 11:57
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
August 21st, 2011 at 22:34
@Daniel: You can create an event in JavaScript of the type KeyboardEvent and then dispatch it using the dispatchEvent() method.
November 16th, 2011 at 08:17
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!
November 16th, 2011 at 08:18
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
November 16th, 2011 at 08:19
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!
January 9th, 2012 at 13:26
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)?
February 27th, 2012 at 14:56
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?
March 2nd, 2012 at 00:32
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
August 8th, 2013 at 07:42
@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.
March 28th, 2014 at 08:48
How to know the number of lines are present in webview.
January 5th, 2015 at 20:42
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.
December 8th, 2016 at 00:46
Good Example. Can you please point me this example with Swift 3.0, Xcode 8. I am newbie in ios development.
February 22nd, 2017 at 03:21
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. . ..