［iphone］ How To Inject JavaScript Functions Into a @ 自由手記

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:

view plain copy to clipboard print ?
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

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:

view plain copy to clipboard print ?
[webView stringByEvaluatingJavaScriptFromString:@"var field = document.getElementById('field_2');"
"field.value='Multiple statements - OK';"];

[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:

view plain copy to clipboard print ?
[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();"];

[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:

view plain copy to clipboard print ?
<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>

<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

轉載：http://iphoneincubator.com/blog/windows-views/how-to-inject-javascript-functions-into-a-uiwebview