"Turn" UIWebView with JavaScript

Source: Internet
Author: User

UIWebView is the control that renders the mesh in the iOS SDK, and when the page is displayed, we can hack the page and display what we want to display. There is a need to use JavaScript knowledge, and the way UIWebView interacts with JavaScript is stringbyevaluatingjavascriptfromstring:

With this approach we can invoke JavaScript via OBJC and inject JavaScript.

First, let's take a look at how to invoke JavaScript:

[CPP]View Plaincopy
    1. [WebView stringbyevaluatingjavascriptfromstring:@"myFunction ();"];
[CPP]View Plaincopy
    1. [WebView stringbyevaluatingjavascriptfromstring:@"myFunction ();"];


Here MyFunction () is our JavaScript method.

To see what to inject into JavaScript, let's start by writing a JavaScript that needs to be injected:

[CPP]View Plaincopy
    1. function Showalert () {
    2. Alert (' in Show alert ');
    3. }
[CPP]View Plaincopy
    1. function Showalert () {
    2. Alert (' in Show alert ');
    3. }


Save As Test.js, and then drag to the resource group under Xcode. Then use the code to inject this JS (as in the Viewdidload method) when initializing.

[CPP]View Plaincopy < param name= "wmode" value= "Transparent" >
    1. NSString *filepath = [[NSBundle mainbundle] pathforresource:@"test" oftype:@"JS"];
    2. NSString *jsstring = [[NSString alloc] initwithcontentsoffile:filepath];
    3. [WebView stringbyevaluatingjavascriptfromstring:jsstring];
[CPP]View Plaincopy < param name= "wmode" value= "Transparent" >
    1. NSString *filepath = [[NSBundle mainbundle] pathforresource:@"test" oftype:@"JS"];
    2. NSString *jsstring = [[NSString alloc] initwithcontentsoffile:filepath];
    3. [WebView stringbyevaluatingjavascriptfromstring:jsstring];


This will inject the above JS, then we can call the JS method at any time, how to invoke, the above is introduced.

Then we can use JS to invoke the OBJC method. Of course, the principle is to use UIWebView Redirect request, pass some commands to our UIWebView, in UIWebView delegate method to receive these commands, and according to the command to execute the corresponding OBJC method. This is equivalent to calling the ObjC method in JavaScript. That's a little bit abstract, just look at the code.

First we write a JavaScript method as follows:

[JavaScript]View Plaincopy < param name= "wmode" value= "Transparent" >
    1. function SendCommand (cmd,param) {
    2. var url="TestApp:" +cmd+":" +param;
    3. document.location = URL;
    4. }
    5. function Clicklink () {
    6. SendCommand ("alert","How are You?")  ");
    7. }
[JavaScript]View Plaincopy < param name= "wmode" value= "Transparent" >
    1. function SendCommand (cmd,param) {
    2. var url="TestApp:" +cmd+":" +param;
    3. document.location = URL;
    4. }
    5. function Clicklink () {
    6. SendCommand ("alert","How are You?")  ");
    7. }

Then call this JS method in your HTML, such as:

[JavaScript]View Plaincopy
    1. <input type="button" value="click me!" onclick="Clicklink ()" /><br/>
[JavaScript]View Plaincopy
    1. <input type="button" value="click me!" onclick="Clicklink ()" /><br/>


Finally we intercept this redirect request in Uiwebvew:

[CPP]View Plaincopy
  1. #pragma mark--
  2. #pragma Mark Uiwebviewdelegate
  3. -(BOOL) WebView: (UIWebView *) WebView shouldstartloadwithrequest: (nsurlrequest *) Request Navigationtype :(Uiwebviewnavigationtype) Navigationtype {
  4. NSString *requeststring = [[Request URL] absolutestring];
  5. Nsarray *components = [requeststring componentsseparatedbystring:@":"];
  6. if ([Components Count] > 1 && [(NSString *) [objectatindex:0] isequaltostring:@" TestApp "]) {
  7. if([(NSString *) [Components objectatindex:1] isequaltostring:@"alert"])
  8. {
  9. Uialertview *alert = [[Uialertview alloc]
  10. initwithtitle:@"Alert from Cocoa Touch" Message:[components Objectatindex:2]
  11. Delegate:self Cancelbuttontitle:nil
  12. otherbuttontitles:@"OK", nil];
  13. [Alert show];
  14. }
  15. return NO;
  16. }
  17. return YES;
  18. }
[CPP]View Plaincopy
  1. #pragma mark--
  2. #pragma Mark Uiwebviewdelegate
  3. -(BOOL) WebView: (UIWebView *) WebView shouldstartloadwithrequest: (nsurlrequest *) Request Navigationtype: ( Uiwebviewnavigationtype) Navigationtype {
  4. NSString *requeststring = [[Request URL] absolutestring];
  5. Nsarray *components = [requeststring componentsseparatedbystring:@":"];
  6. if ([Components Count] > 1 && [(NSString *) [objectatindex:0] isequaltostring:@"TestApp"]) {  
  7. if ([(NSString *) [Components objectatindex:1] isequaltostring:@"alert"])
  8. {
  9. Uialertview *alert = [[Uialertview alloc]
  10. initwithtitle:@"Alert from Cocoa Touch" Message:[components Objectatindex:2]
  11. Delegate:self Cancelbuttontitle:nil
  12. otherbuttontitles:@"OK", nil];
  13. [Alert show];
  14. }
  15. return NO;
  16. }
  17. return YES;
  18. }



See the code is not clear enough to understand it? I think PhoneGap may have done so, not studied. But there is an open source project that you can look at, which allows JavaScript to invoke the Objective_c method. Call Jsbridge-to-cocoa.

http://code.google.com/p/jsbridge-to-cocoa/

There are two other related projects

Webviewjavascriptbridge and Gajavascript are worth studying slowly.

"Turn" UIWebView with JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.