webview与js交互

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

操作步骤是这样的

第一步，自己写个页面，用来实现页面的某些效果的，比如这里的温度曲线图，是调用的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加载完后进行调用。