UIWebView与js(javascript) 的交互 示例

关于这个的使用是源于我参看的一个图表表格的使用

操作步骤是这样的

第一步，自己写个页面，用来实现页面的某些效果的，比如这里的温度曲线图，是调用的highchart的js插件。外加一些css效果。

第二步，在自己的app中将要使用的页面加载进来，这里调用的是index.html

第三步，使用webview进行呈现，还要灵活的使用webview的一个方法【stringByEvaluatingJavaScriptFromString】

这里只演示一下如何使用，具体的页面部分，可以自己写，我放在自己的github上。

TemperatureCurveViewController.h

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// //  TemperatureCurveViewController.h //  Real-time temperature curve // //  Created by david on 13-8-15. //  Copyright (c) 2013年 WalkerFree. All rights reserved. //   #import <UIKit/UIKit.h>   @interface TemperatureCurveViewController : UIViewController<UIWebViewDelegate, UITextFieldDelegate>   @property(retain, nonatomic) UIWebView *webViewForSelectDate; @property(retain, nonatomic) NSTimer *timer;   @end

TemperatureCurveViewController.m

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

// //  TemperatureCurveViewController.m //  Real-time temperature curve // //  Created by david on 13-8-15. //  Copyright (c) 2013年 WalkerFree. All rights reserved. //   #import "TemperatureCurveViewController.h"   @interface TemperatureCurveViewController ()   @end   @implementation TemperatureCurveViewController   @synthesize webViewForSelectDate; @synthesize timer;   - ( void )viewDidLoad {      [super viewDidLoad];       //    UIInterfaceOrientation orientation = [UIDevice currentDevice].orientation; //    if(UIDeviceOrientationIsPortrait(orientation) || orientation == UIDeviceOrientationUnknown){ //        if([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]){ //            [[UIDevice currentDevice] performSelector:@selector(setOrientation:) //                                           withObject:(id)UIDeviceOrientationLandscapeRight]; //        } //     //    }        CGRect webFrame = self.view.frame;      webFrame.origin.x = 0;      webFrame.origin.y = 0;            webViewForSelectDate = [[UIWebView alloc] initWithFrame:webFrame];      webViewForSelectDate.delegate = self;      webViewForSelectDate.scalesPageToFit = YES;      webViewForSelectDate.opaque = NO;      webViewForSelectDate.backgroundColor = [UIColor clearColor];      webViewForSelectDate.autoresizingMask = (UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth);      [self.view addSubview:webViewForSelectDate];            NSString *htmlPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@ "curve.bundle/index.html" ];            NSURL *url = [NSURL fileURLWithPath:htmlPath];      NSURLRequest *request = [NSURLRequest requestWithURL:url];            [webViewForSelectDate loadRequest:request];                   }   - ( void )didReceiveMemoryWarning {      [super didReceiveMemoryWarning];      // Dispose of any resources that can be recreated. }   -( BOOL ) shouldAutorotate{      return  YES; }   -(NSUInteger)supportedInterfaceOrientations{      return  UIInterfaceOrientationMaskAll; }   -( void ) updateData{      NSDate *nowDate = [[NSDate alloc] init];      NSTimeInterval nowTimeInterval = [nowDate timeIntervalSince1970] * 1000;            int  temperature = [self getRandomNumber:20 to:50];            NSMutableString *jsStr = [[NSMutableString alloc] initWithCapacity:0];      [jsStr appendFormat:@ "updateData(%f,%d)" ,nowTimeInterval, temperature];            [webViewForSelectDate stringByEvaluatingJavaScriptFromString:jsStr]; }   -( int ) getRandomNumber:( int )from to:( int )to{      return  ( int )(from + (arc4random() % (to - from + 1))); }   #pragma mark - delegate o webview -( BOOL ) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{      return  YES; }   -( void ) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{   }   -( void ) webViewDidFinishLoad:(UIWebView *)webView{      timer = [NSTimer scheduledTimerWithTimeInterval:1                                               target:self                                             selector:@selector(updateData)                                             userInfo:nil                                              repeats:YES]; }   @end

其主要的一点就是使用stringByEvaluatingJavaScriptFromString这个方法，他可以灵活的将js嵌入页面中，进行操作，而且一定是要在webview加载完后进行调用。

效果图：