CreiApp: UIWebView + javascript

Javascript is a very powerful tool for a web developer. iOS SDK's UIWebView can display a webpage or a html string. Most of time, developers just use the webpage for displaying. Actually, the SDK provides a little but powerful API for us to interact with the Web using javascript. It is :


- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

From this method, we can pass in a string of javascript, and get return as as string. I am going to demonstrate some of the typical uses of this method.

The HTML code

the html code looks as following. style, div,p, script, those are typical elements that an usual html page has.

 
<style>
    #pageWrap{
        color:blue;
        font-size: 15px;
    }
</style>

<div id="pageWrap">
    <h2 id="demo-title">Demo Title</h2>
    <p>Demo text, just some dummy text here. Demo text, just some dummy text here. 
    Demo text, just some dummy text here. Demo text, just some dummy text here. 
    Demo text, just some dummy text here. Demo text, just some dummy text here.
     Demo text, just some dummy text here. Demo text, just some dummy text here. 
     Demo text, just some dummy text here. Demo text, just some dummy text here. 
     Demo text, just some dummy text here. </p>
</div>
<script>
    function testing(){
        alert('OK for Testing');
    }
    
    function getSum(x){
        return x+100;
    }
</script>

The Objective-C code

The objective-c code looks as following. we can see that the html is loaded from a local file.

fontSizeChange: is the method to change the page text size adjust, triggered by the UISlider. We just passed a string of javascript, and not interested with the return.
showAlert: is the method triggered by the UIButton with title 'Show Alert'. Here the js string we passed in is actually a function call. The Alert title is related to the what we gave for baseURL in [theWeb loadHTMLString:theS baseURL:base];
getjsFunctionReturn: is the method triggered by the UIButton with title 'Get Return'. In this methods, we are calling a js function with a input integer 3, get back 103.

  
- (void)viewDidLoad
{
    [super viewDidLoad];
    scale=100;
    currentFontLbl.text=[NSString stringWithFormat:@"%d%%",scale];
    NSString * path=[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString * theS=[NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    NSURL *base=[NSURL URLWithString:@"www.ios-local.com"];
    [theWeb loadHTMLString:theS baseURL:base];
}

- (void) webViewDidFinishLoad:(UIWebView *)webView{
    NSLog(@"webviewDidFinished");
}

- (IBAction)fontSizeChange:(UISlider*)sender{
    currentFontLbl.text=[NSString stringWithFormat:@"%0.f%%",sender.value];
    NSString * jsString=[NSString stringWithFormat:@"document.getElementById('pageWrap').style.webkitTextSizeAdjust='%@';", currentFontLbl.text];
   [theWeb stringByEvaluatingJavaScriptFromString:jsString];
}

- (IBAction)showAlert:(id)sender{
    NSString * jsString=@"testing();";
   [theWeb stringByEvaluatingJavaScriptFromString:jsString];
}

- (IBAction)getjsFunctionReturn:(id)sender{
    NSString * jsString=@"getSum(3);";
    NSString * returnS=[theWeb stringByEvaluatingJavaScriptFromString:jsString];
    NSLog(@"%@",returnS);
}