iOS-展示網頁(safari,UIWebView,SFSafariViewController,WKWebView)

前言
iOS中有很多需求是要求來展示網頁的內容的,當然系統有現有的方法供我們調用,但是有時候還是達不到我們的需求,
下面我們就談談的iOS中展示網頁的幾種方法的利與弊吧
第一種方法:(safari)

可以調用自帶瀏覽器safari

  • 優點:自帶很多功能(進度條,刷新,前進,倒退等等功能)
  • 缺點:如果調用url的時候,必須跳出當前應用
    調用自帶瀏覽器safari方法
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.lxweimin.com/writer#/notebooks/2126639/notes/4211543/preview"]];
第二種方法(UIWebView)
  • 沒有功能 ,在當前應用打開網頁,并且有safari,自己實現,UIWebView不能實現進度條
UIWebView的初始化和三種加載方式
  • 1.第一種
    - (void)loadRequest:(NSURLRequest *)request;
    這是加載網頁最常用的一種方式,通過一個網頁URL來進行加載,這個URL可以是遠程的也可以是本地的,例如我加載百度的主頁
UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.frame]; 
[view loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];    
[self.view addSubview:view];
  • 2.第二種
    - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
    這個方法需要將httml文件讀取為字符串,其中baseURL是我們自己設置的一個路徑,用于尋找html文件中引用的圖片等素材。
  • 3.第三種
    - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
    這個方式使用的比較少,但也更加自由,其中data是文件數據,MIMEType是文件類型,textEncodingName是編碼類型,baseURL是素材資源路徑。
第三種(SFSafariViewController)
  • 專門用來展示網頁 需求:即想要在當前應用展示網頁,又想要safari功能 iOS9才能使用
  • 注意:需要導入#import <SafariServices/SafariServices.h>
  • 在當前App中使用Safari的UI框架展現Web內容,包括相同的地址欄,工具欄等,類似一個內置于App的小型Safari
  • 這是一個特殊的View Controller,而不是一個單獨的 View,和前面兩個的區別
  • 共享Safari的一些便利特性,包括:相似的用戶體驗,和Safari共享Cookie,iCloud Web表單數據,密碼、證書自動填充,Safari閱讀器(Safari Reader
  • 可定制性比較差,甚至連地址欄都是不可編輯的,只能在init的時候,傳入一個URL來指定網頁的地址只能用來展示單個頁面,并且有一個完成按鈕用來退出
具體用法

在點擊事件中(記得設置代理,后面在代理方法中做事情)

SFSafariViewController *sfViewControllr = [[SFSafariViewController alloc] initWithURL:[NSURL URLWithString:urlString]];
    sfViewControllr.delegate = self;
    [self presentViewController:sfViewControllr animated:YES completion:^{
       //...
    }];

Done 按鈕

 - (void)safariViewControllerDidFinish:(nonnull SFSafariViewController *)controller{
    [controller dismissViewControllerAnimated:YES completion:nil];
}
第四種(WKWebView)

這中方法是大多開發者選擇的,是對于UIWebView升級版本,添加功能,可以監聽進度,實現進度條功能,還可以做一系列的緩存

  • 注意點:首先用的時候要注意```導入#import <WebKit/WebKit.h>``
創建方法

首先用個屬性來強引用這個webView

@interface TestWebViewController ()
@property (weak, nonatomic) IBOutlet WKWebView *webView;
@end
    WKWebView *webView = [[WKWebView alloc] init];
    _webView = webView;
    [self.contentView addSubview:webView];
    // 展示網頁
    NSURLRequest *request = [NSURLRequest requestWithURL:_url];
    [webView loadRequest:request];

控制網頁的前進
[self.webView goForward];
控制網頁的后退
[self.webView goBack];
控制網頁的刷新
[self.webView goForward];
自定義實現Safari的類似功能:
可以自己創建一個控件Progress放在導航欄的下面,然后初始化的時候使progress = 0;然后通過```KVO``監聽webView中各個屬性的變化,從而空時前進、后退這些按鈕的編輯狀態

// KVO監聽屬性改變
    /*
        Observer:觀察者
        KeyPath:觀察webView哪個屬性
        options:NSKeyValueObservingOptionNew:觀察新值改變
     
        KVO注意點.一定要記得移除
     */
    // canGoBack 是否可以回退
    [webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];
    // canGoForward 是否可以前進
    [webView addObserver:self forKeyPath:@"canGoForward" options:NSKeyValueObservingOptionNew context:nil];
    // title  網頁標題
    [webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];
    
    // 進度條
    [webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
KVO一定要移除

可以及時的改變前進、后退、進度條等的狀態

 - (void)dealloc{
    [self.webView removeObserver:self forKeyPath:@"canGoBack"];
    [self.webView removeObserver:self forKeyPath:@"title"];
    [self.webView removeObserver:self forKeyPath:@"canGoForward"];
    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
}
只要觀察對象屬性有新值就會調用
 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    self.backItem.enabled = self.webView.canGoBack;
    self.forwardItem.enabled = self.webView.canGoForward;
    self.title = self.webView.title;
    self.progressView.progress = self.webView.estimatedProgress;
    self.progressView.hidden = self.webView.estimatedProgress >= 1;
}

這樣就可以完美實現網頁加載功能,還可以自定義網頁的顯示樣式,有進度條,前進,后退刷新功能,完全可以在項目中封裝一個通用的webView,可謂是一勞永逸

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容