iOS 網頁-WebView(一)

2019-11-09 13:57:28

字體：大中小

來源：轉載

供稿：網友

現在混合式移動端開發越來越流行，因為開發成本上、速度上都比傳統的 app開發要好，混合式開發是傳統模式與PC網頁端相結合的模式。在android開發中有WebView作為混合開發的橋梁，當然iOS中也有同樣一個UIWebView組件作為混合模式開發的橋梁。

UIWebView簡介

UIWebView是UIKit庫下內置的瀏覽器控件，它繼承自UIView。可以通過UIWebView瀏覽網頁，打開文檔等多種功能。系統自帶的Safari就是UIWebView實現的。

UIWebView的屬性

@PRoperty (nullable, nonatomic, readonly, strong) NSURLRequest *request; //URL請求 @property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack; //獲取能否返回上一級 @property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward; //獲取能否跳轉下一級 @property (nonatomic, readonly, getter=isLoading) BOOL loading; //獲取是否正在加載數據 @property (nonatomic) BOOL scalesPageToFit; //適應屏幕大小 @property (nonatomic) BOOL detectsPhoneNumbers NS_DEPRECATED_IOS(2_0, 3_0); //iOS 2 －iOS 3 ，已經禁用，自動監測網頁上的電話號碼，單擊可以撥打。 //此屬性可以設定使電話號碼、網址、電子郵件和符合格式的日期等文字改變為鏈接文字，電話號碼點擊后可以撥出電話， //網址點擊后會用Safari打開，電子郵件會用mail打開，而符合格式的日期會彈出一個ActionSheet，有創建事件，在Calender中顯示和拷貝三個選項。 @property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0); @property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0); // iphone Safari defaults to NO. iPad Safari defaults to YES //設置網頁中的視頻是否自動播放，默認YES @property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0); // iPhone and iPad Safari both default to YES //設置音頻播放是否支持air play功能，默認YES @property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0); // iPhone and iPad Safari both default to YES //是否網頁內容下載完畢才開始渲染web視圖，默認NO @property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0); // iPhone and iPad Safari both default to NO //設置用戶交互默認YES @property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0); // default is YES //一種模式，枚舉，當網頁的大小超出View時，將網頁以翻頁的效果展示 typedef NS_ENUM(NSInteger, UIWebPaginationMode) { UIWebPaginationModeUnpaginated, //不使用翻頁效果 UIWebPaginationModeLeftToRight, //將網頁超出部分分頁，從左向右進行翻頁 UIWebPaginationModeTopToBottom, //將網頁超出部分分頁，從上向下進行翻頁 UIWebPaginationModeBottomToTop, //將網頁超出部分分頁，從下向上進行翻頁 UIWebPaginationModeRightToLeft //將網頁超出部分分頁，從右向左進行翻頁 } __TVOS_PROHIBITED; @property (nonatomic) UIWebPaginationMode paginationMode NS_AVAILABLE_IOS(7_0); @property (nonatomic) UIWebPaginationBreakingMode paginationBreakingMode NS_AVAILABLE_IOS(7_0); //設置分頁模式 @property (nonatomic) CGFloat pageLength NS_AVAILABLE_IOS(7_0); //設置每一頁的長度 @property (nonatomic) CGFloat gapBetweenPages NS_AVAILABLE_IOS(7_0); //設置每一頁的間距 @property (nonatomic, readonly) NSUInteger pageCount NS_AVAILABLE_IOS(7_0); //分頁數 //分屏中是否播放（iOS 9的新特性） @property (nonatomic) BOOL allowsPictureInPictureMediaPlayback NS_AVAILABLE_IOS(9_0); //長按鏈接是否支持預覽（支持3D Touch的設備，iOS 9 新特性，默認：NO） @property (nonatomic) BOOL allowsLinkPreview NS_AVAILABLE_IOS(9_0); // default is NO

UIWebView的方法

- (void)loadRequest:(NSURLRequest *)request; //設置加載URL請求 - (void)loaDHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL; //如果網頁是國際通用的UTF-8編碼的，也可以用這個方法加載數據。 - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL; //以二進制的方式加載數據 - (void)reload; //刷新WebView頁面 - (void)stopLoading; //停止加載WebView頁面 - (void)goBack; //返回上一級 - (void)goForward; //跳轉下一級 - (nullable NSString *)stringByEvaluatingjavaScriptFromString:(NSString *)script; //OC與JS交互

UIWebView的代理方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; //webView即將加載的時候，通過返回值確定是否加載，是枚舉值 typedef NS_ENUM(NSInteger, UIWebViewNavigationType) { UIWebViewNavigationTypeLinkClicked, //點擊了一個鏈接 UIWebViewNavigationTypeFormSubmitted, //提交了一個表單 UIWebViewNavigationTypeBackForward, //點擊前進或者返回 UIWebViewNavigationTypeReload, //點擊重新加載 UIWebViewNavigationTypeFormResubmitted, //重復提交表單 UIWebViewNavigationTypeOther //其他 } __TVOS_PROHIBITED;- (void)webViewDidStartLoad:(UIWebView *)webView; //webView開始加載的時候- (void)webViewDidFinishLoad:(UIWebView *)webView; //webView結束加載的時候- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error; //webView加載出錯的時候

UIWebView中OC與JS交互

網頁不僅是展示頁面，也是一個交互頁面，當用戶想從網頁調用系統方法，或者系統想更改網頁的內容時，就涉及到了OC與JS之間的交互。OC與JS交互有多種方法。 OC 與 JS 交互方法一：

1.1 OC調用JS

OC調用JS指的是用戶可以在手機上通過app對app里的網頁進行增刪改查，但是我們是不能直接修改網頁的內容的，只能通過JS動態來修改。總體來說如下是使用方法：

// OC -> JS-(void)webViewDidFinishLoad:(UIWebView *)webView { [webView stringByEvaluatingJavascriptFromString :@“這里是JS語法”]; }

1.2 JS調用OC

JS調用OC一般是指，頁面中某些功能需要調用系統的方法，html和JS無法直接和系統交互，只能通知web View，然后webView獲取到消息，傳遞OC實現JS調用OC，比如點擊網頁上的電話號碼實現打電話的需求。

//JS -> OC/*先在網頁中設定好響應方法和協議，然后讓網頁響應這個協議并賦值給 window.location.href ，這樣攔截所有請求的shouldStartLoadWithRequest代理方法就會接收到這個規定好的協議，按照這個協議轉化成SEL方法，然后去執行就好了，就實現了JS 調用OC*/

OC 與 JS 交互方法二： iOS 7之后，蘋果發布了JavaScriptCore.framework，它使得JS與OC的交互更加方便了。使用時首先導入JavaScriptCore庫。

2.1 OC調用JS

舉例如下：

-(void)webViewDidFinishLoad:(UIWebView *)webView { //網頁加載完成調用此方法 //首先創建JSContext 對象（此處通過當前webView的鍵獲取到jscontext） JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; NSString *alertJS=@"alert('test js OC')"; //準備執行的js代碼，此處為彈出alert “test js OC” [context evaluateScript:alertJS];//通過oc方法調用js的alert }

2.2 JS調用OC

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //未登錄或者token失效，請求登錄，toLoginByAPP是與服務器約定一致的方法名 context[@"toLoginByAPP"] = ^() { NSLog(@"+++++++Begin toLoginByAPP+++++++"); NSArray *args = [JSContext currentArguments]; for (JSValue *jsVal1 in args) { NSLog(@"toLoginByAPP：%@", jsVal1); } JSValue *this = [JSContext currentThis]; NSLog(@"toLoginByAPP——this: %@",this); dispatch_async(dispatch_get_main_queue(), ^{ //登錄的操作代碼 }); NSLog(@"+++++++end toLoginByAPP+++++++"); };

OC 與 JS 交互方法三： 當然也有一些第三方實現交互的方式，這里就不再多說了。

上一篇：iOS UITableViewCell 分割線不到左部頂端的問題！

下一篇：iOS 10 跳轉系統設置