BisonCreative & development notes

Web & development notesHistorical technical note

Using UIWebView: techniques and notes

Collects common UIWebView settings for loading web pages inside a native interface, including transparent backgrounds, scaling, phone-number detection and JavaScript interaction. It also discusses the layout and communication costs of a cross-platform approach.

Author：

Originally credited to Bison. Content is retained as published.

English translation of the Chinese original, translated on . The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

“iOS development is like moving things around; once you become skilled enough, you can start taking shortcuts.” Bison

I previously used UIWebView in a project.
Consider UIWebView for complex interface layouts, screens that need flexible control from the server, or existing web pages in your project.
Before using it, let me explain its advantages and disadvantages.
Advantages:

  • Cross-platform support
    Develop once and deploy on platforms such as iOS and Android.
  • Fast deployment of updates
    Deploying on the server updates what clients display in real time, making quick upgrades and urgent bug fixes easier.
  • Strong page-layout capabilities
    The power of HTML+CSS is impressive.
    Disadvantages:
  • Performance
    Compared with a native app, an app using UIWebView has somewhat lower performance,
    The user experience also suffers considerably.
  • Complicated data communication Communication between UIWebView and an app can only take place through javascript or
    UIWebViewDelegate. Passing parameters from the client to UIWebView to modify a web page, or
    retrieving data from the page, is relatively complicated.

The specific steps are as follows.

Common ways to use UIWebView:

//加载网页或者本地文件
- (void)loadRequest:(NSURLRequest *)request;

//直接加载html内容，如果html中的图片等资源在本地目录，注意将baseURL指向该目录
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

//功能与上面类似
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

实现UIWebViewDelegate

主要使用到的方法
-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*) reuqest navigationType:(UIWebViewNavigationType)navigationType;//当网页视图被指示载入内容而得到通知。应当返回YES，这样会进行加载。通过导航类型参数可以得到请求发起的原因，可以是以下任意值：  
    UIWebViewNavigationTypeLinkClicked //判断是否是点击事件 
    UIWebViewNavigationTypeFormSubmitted  
    UIWebViewNavigationTypeBackForward  
    UIWebViewNavigationTypeReload  
    UIWebViewNavigationTypeFormResubmitted  
    UIWebViewNavigationTypeOther 
通过
    NSURL *url = [request URL];
    NSString *curUrl= [url absoluteString];
可得到点击事件的URL

-(void)webViewDidStartLoad:(UIWebView*)webView ;//当网页视图已经开始加载一个请求后，得到通知。 
-(void)webViewDidFinishLoad:(UIWebView*)webView ;//当网页视图结束加载一个请求之后，得到通知。 
-(void)webView:(UIWebView*)webView  DidFailLoadWithError:(NSError*)error;//当在请求加载中发生错误时，得到通知。会提供一个NSSError对象，以标识所发生错误类型。

Set a transparent background: webView.backgroundColor= [UIColor clearColor];webView.opaque=NO; Automatically fit the screen: webView.scalespageToFit = YES; Automatically detect phone numbers on the webpage and allow tapping to dial: webView.detectsPhoneNumbers = YES; Interact with js

我们在webViewDidFinishLoad方法中就可以通过javascript操作界面元素了。
1、获取当前页面的url。

- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}

2、获取页面title：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];

NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
}