UIWebView Tips

  • 13,184 views
Uploaded on

UIWebView Tips

UIWebView Tips

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
13,184
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
142
Comments
0
Likes
31

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide


























































Transcript

  • 1. iPhone SDK UIWebView Tips
  • 2. iPhone SDK 24/7 twenty-four seven http://d.hatena.ne.jp/KishikawaKatsumi/
  • 3. iPhone SDK • touch •Subway Map •LDR touch •MyWebClip • • •LCD Clock •
  • 4. iPhone SDK http://github.com/kishikawakatsumi •hatena-touch •DescriptionBuilder •ldr-touch •TiledLayerView •tv-listings •UICCalendarPicker •MapKit-Route-Directions •FlipCardNavigationView •PhotoFlipCardView
  • 5. iPhone SDK UIWebView Tips
  • 6. iPhone SDK UIWebView Tips • •UI UIWebView •data URI scheme • •UIWebView •JavaScript •JavaScript •JavaScript
  • 7. iPhone SDK •*.js •
  • 8. iPhone SDK (1) NSBundle *mainBundle = [NSBundle mainBundle]; NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"]; NSURL *fileURL = [NSURL fileURLWithPath:path]; [webView loadRequest: [NSURLRequest requestWithURL:fileURL]];
  • 9. iPhone SDK (2) NSBundle *mainBundle = [NSBundle mainBundle]; NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"]; NSString *htmlContents = [NSString stringWithContentsOfURL:fileURL encoding:NSUTF8StringEncoding error:nil]; [webView loadHTMLString: htmlContents baseURL:path];
  • 10. iPhone SDK *.js
  • 11. iPhone SDK
  • 12. iPhone SDK OK <script type="text/javascript" src="json2.js"></script> NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; [webView loadRequest: [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
  • 13. iPhone SDK *.js
  • 14. iPhone SDK Make Rule
  • 15. iPhone SDK
  • 16. iPhone SDK
  • 17. iPhone SDK
  • 18. iPhone SDK NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"];
  • 19. iPhone SDK <img src="img/menu_line.png" width="260" height="1">
  • 20. iPhone SDK • • HTML
  • 21. iPhone SDK data URI scheme • HTML
  • 22. iPhone SDK data URI scheme <p>This is a data encoded image.</p> <img src="data:image/jpeg;base64,/9j/ 4AAQSkZJRgABAQEAYABgAAD/ 2wBDAAEBAQEBAQEBAQEBAQEBAQICAQEBAQMCA gICAwMEBAMDAwMEBAYFBAQFBAMDBQcFBQYGBg YGBAUHBwcGBwYGBg ... +0lShKd4r3XzOLlePTXToYYHOc4w3C9WjTrzj T5rcqlJKztdWTtZ9e5+p9FFFfsB8gf/2Q==" />
  • 23. iPhone SDK UIWebView
  • 24. iPhone SDK webView.opaque = NO; webView.backgroundColor = [UIColor clearColor]; <style type="text/css"> body { background-color: transparent; } </style>
  • 25. iPhone SDK JavaScript
  • 26. iPhone SDK JavaScript - (void)webViewDidFinishLoad:(UIWebView *)webView { self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; }
  • 27. iPhone SDK JavaScript
  • 28. iPhone SDK in JavaScript document.location = "app::" + "function::" + param1 + "::" + param2; app::function::param1::param2
  • 29. URL iPhone SDK - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *requestString = [[request URL] absoluteString]; NSArray *params = [requestString componentsSeparatedByString:@"::"]; if ([params count] > 1 && [[params objectAtIndex:0] isEqualToString:@"app"]) { if([[params objectAtIndex:1] isEqualToString:@"function"]) { NSLog([params objectAtIndex:2]); // param1 NSLog([params objectAtIndex:3]); // param2 // Call your method in Objective-C method using the above... } return NO; } return YES; // Return YES to make sure regular navigation works as expected. }
  • 30. iPhone SDK <script type="text/javascript"> separator = "::"; var directionsService = new google.maps.DirectionsService(); function route(request) { directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { document.location = "directions-v3" + separator + "route" + separator + JSON.stringify(response); } }); } </script>
  • 31. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSLog(@"%@/%@", NSStringFromClass([self class]), NSStringFromSelector(_cmd)); iPhone SDK NSString *requestString = [[request URL] absoluteString]; NSArray *params = [requestString componentsSeparatedByString:@"::"]; NSString *function = [params objectAtIndex:0]; if ([params count] > 1 && [function isEqualToString:@"directions-v3"]) { NSString *param1 = [params objectAtIndex:1]; if([param1 isEqualToString:@"route"]) { NSString *param2 = [params objectAtIndex:2]; id JSONValue = [[param2 stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding] JSONValue]; if (!JSONValue) { if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didFailWithMessage:)]) { [(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didFailWithMessage:param2]; } } else { if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didGetObject:)]) { [(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didGetObject:JSONValue]; } } } return NO; } return YES; }
  • 32. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSLog(@"%@/%@", NSStringFromClass([self class]), NSStringFromSelector(_cmd)); iPhone SDK NSString *requestString = [[request URL] absoluteString]; NSArray *params = [requestString componentsSeparatedByString:@"::"]; NSString *function = [params objectAtIndex:0]; if ([params count] > 1 && [function isEqualToString:@"directions-v3"]) { NSString *param1 = [params objectAtIndex:1]; if([param1 isEqualToString:@"route"]) { NSString *param2 = [params objectAtIndex:2]; id JSONValue = [[param2 stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding] JSONValue]; if (!JSONValue) { if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didFailWithMessage:)]) { [(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didFailWithMessage:param2]; } } else { if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didGetObject:)]) { [(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didGetObject:JSONValue]; } } } return NO; } URL return YES; JSON }
  • 33. iPhone SDK • API (Google Maps API ) MapKit-Route-Directions
  • 34. iPhone SDK JavaScript
  • 35. iPhone SDK @interface UIWebView (JavaScriptDebug) - (void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame; @end @implementation UIWebView (JavaScriptDebug) - (void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame { NSLog(@"alert: %@", message); } @end alert(item["name"]);
  • 36. iPhone SDK • alert •Unpublished API
  • 37. iPhone SDK UI UIWebView • HTML + CSS +JavaScript
  • 38. iPhone SDK
  • 39. iPhone SDK •
  • 40. iPhone SDK • • • • •
  • 41. iPhone SDK <div id="tag_price" class="float_l">${price}</div> <div id="tag_info" class="float_r"><img src="img/menu_tag_info.png" alt="Info" width="76" height="39"></div></div><div id="menu"><div class="text">$ {comment}</div> <div class="bar"><img src="img/menu_line.png" width="260" height="1"></ div> <div class="text"> <span class="blue"> </span> ${advantage} </div> <div class="bar"><img src="img/menu_line.png" width="260" height="1"></ div> <div class="text"> <span class="blue"> </span> ${spec}
  • 42. iPhone SDK - (void)viewDidLoad { [super viewDidLoad]; self.title = [NSString stringWithUTF8String:" "]; NSBundle *mainBundle = [NSBundle mainBundle]; NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"]; NSURL *fileURL = [NSURL fileURLWithPath:path]; NSString *htmlContents = [NSString stringWithContentsOfURL:fileURL encoding:NSUTF8StringEncoding error:nil]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${photo}" withString:@"photo.jpg"]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${name}" withString:[NSString stringWithUTF8String:"USB USB "]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${price}" withString:[NSString stringWithUTF8String:" 950 "]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${comment}" withString:[NSString stringWithUTF8String:"ReadyBoost USB "]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${advantage}" withString:[NSString stringWithUTF8String:"Windows Vista ReadyBoost "]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${spec}" withString:[NSString stringWithUTF8String:"<br> USB Ver.2.0 <br> USB A <br> DC 5V"]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${size}" withString:[NSString stringWithUTF8String:"2 GB "]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${color}" withString:[NSString stringWithUTF8String:" "]]; htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${count}" withString:[NSString stringWithUTF8String:"1 "]]; [web loadHTMLString:htmlContents baseURL:fileURL]; }
  • 43. iPhone SDK
  • 44. iPhone SDK
  • 45. iPhone SDK CSS <style type="text/css"> body { -webkit-user-select: none; -webkit-touch-callout: none; } </style> JavaScript <script type="text/javascript"> function OnLoad() { document.documentElement.style.webkitTouchCallout = "none"; document.documentElement.style.webkitUserSelect = "none"; } </script> </head> <body onload="OnLoad()">
  • 46. iPhone SDK
  • 47. iPhone SDK
  • 48. iPhone SDK CSS -webkit-tap-highlight-color:rgba(163,215,112,0.70);
  • 49. iPhone SDK
  • 50. iPhone SDK #import <Foundation/Foundation.h> @interface FilteredWebCache : NSURLCache { } @end
  • 51. iPhone SDK #import "FilteredWebCache.h" #import "FilterManager.h" @implementation FilteredWebCache - (NSCachedURLResponse *)cachedResponseForRequest:(NSURLRequest *)request { NSURL *URL = [request URL]; BOOL blockURL = [[FilterManager sharedFilterManager] shouldBlockURL:URL]; if (blockURL) { LOG(@"!%@! was blocked.", URL); NSURLResponse *response = [[NSURLResponse alloc] initWithURL:URL MIMEType:@"text/plain" expectedContentLength:1 textEncodingName:nil]; NSCachedURLResponse *cachedResponse = [[NSCachedURLResponse alloc] initWithResponse:response data:[NSData dataWithBytes:" " length:1]]; [super storeCachedResponse:cachedResponse forRequest:request]; [cachedResponse release]; [response release]; } return [super cachedResponseForRequest:request]; }
  • 52. iPhone SDK - (void)viewDidLoad { [super viewDidLoad]; NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *documentDirectory = [paths objectAtIndex:0]; NSString *path = [documentDirectory stringByAppendingPathComponent:@"cache.dat"]; NSUInteger discCapacity = 10 * 1024 * 1024; NSUInteger memoryCapacity = 512 * 1024; FilteredWebCache *cache = [[FilteredWebCache alloc] initWithMemoryCapacity:memoryCapacity diskCapacity:discCapacity diskPath:path]; [NSURLCache setSharedURLCache:cache]; [cache release];
  • 53. iPhone SDK •
  • 54. iPhone SDK
  • 55. iPhone SDK http*://zedo.com* http*://zencudo.co.uk* http*://zmedia.com* */a.aspx?Zone* */a.thefreedictionary.* */adjs.php?* */ads.pl?* */ad.gif?* */ad1.jpg */adx2.js http://*.images-amazon.com/* http://*.ad.adlantis.jp/* http://*.adlantis.jp/*.js*"
  • 56. iPhone SDK for (id whiteURL in whiteList) { NSPredicate *predicate = [NSPredicate predicateWithFormat:@"SELF like[c] %@", whiteURL]; if ([predicate evaluateWithObject:[URL absoluteString]]) { [loadedURLsOfCurrentPage addObject:URL]; return NO; } } [@"SELF like[c] http://*.ad.adlantis.jp/*" evaluateWithObject:@"http://suiheiliebe.blog52.fc2.com/"]
  • 57. iPhone SDK
  • 58. iPhone SDK NSPredicate *regex = [NSPredicate predicateWithFormat: @"SELF MATCHES 'https?://[a-zA-Z0-9/.?_+~=%:;!#-]+'"]; if ([regex evaluateWithObject:source]) {