UIWebView 詳解(1)

創建

githubdemo: https://github.com/wangjinshan/JSWebDemo
UIWebView繼承自UIView 是用來加載網頁的類,可以簡單理解成就是一個view
完整的創建UIWebView
1加載網絡HTML數據

self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://lianghui.huanqiu.com/2017/roll/2017-03/10304840.html"]];
    [self.view addSubview: _webView];
    [_webView loadRequest:request];

2, 加載本地的HTML數據

    NSString *path =[[NSBundle mainBundle]pathForResource:@"JSShareSDKDemo" ofType:@"html"];
    NSURL *url =[NSURL URLWithString:path];
    NSURLRequest *request =[NSURLRequest requestWithURL:url];
    self.webView =[[UIWebView alloc]initWithFrame:self.view.frame];
    [self.webView loadRequest:request];
    [self.view addSubview:self.webView];

加載

加載的方式給了以下三種

/**通過NSURLRequest去加載html界面**/
- (void)loadRequest:(NSURLRequest *)request;
/**加載html格式的字符串,其中的baseUrl下面會介紹**/
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
/**這種方式表示沒見到過,我也不知道是什么,有興趣的可以自己去查查**/
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;(*很少用*)

-(void)loadRequest:(NSURLRequest *)request 方法即可以去通過網絡連接加載html資源,也可以去加載本地的html資源

   //    加載網絡html
    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://shenzoom.com"]];
    [self.myWebview loadRequest:request];
  • (void) loadHTMLString:(NSString )string baseURL:(nullable NSURL )baseURL方法一般用來加載本地的html界面
-(void)loadHtmlWithString
{
//    加載css
    NSURL *cssPath = [[NSBundle mainBundle]URLForResource:@"ShareSDK" withExtension:@"css"];
//    創建css標簽
    NSString *css = [NSString stringWithFormat:@"<link href =\"%@\" rel = %@>",cssPath,@"\"stylesheet\""];
    NSLog(@"--css--%@",css);
    NSString *html =[NSString stringWithFormat:@"<html><head>%@</head><body><p>網頁中的文字</p> <button id=\"login\" onclick=\"login()\">點擊按鈕</button> <img src=\"%@\" alt="">   </body></html>",css,css];
    [self.myWebview loadHTMLString:html baseURL:nil];
}

注意:baseURL用來確定htmlString的基準地址,相當于HTML的<base>標簽的作用,定義頁面中所有鏈接的默認地址。具體查看W3C上的base標簽。baseURL是HTML字符串中引用到資源的查找路徑,當HTML中沒有引用外部資源時,可以指定為nil;若引用了外部資源(外部資源:除了html代碼以外,界面中所有的圖片,鏈接都屬于外部資源),一般情況下使用mainBundle的路徑即可。在實際操作中,常常會出現「文本顯示正常,圖片無法顯示」等情況,若HTML文本中引用外部資源都是使用相對路徑,則出現這種問題的原因一般都是baseURL參數錯誤

屬性

//    **webView的代理**
    @property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate;
//    **內置的scrollView**
    @property (nonatomic, readonly, strong) UIScrollView
//    *scrollView NS_AVAILABLE_IOS(5_0);
//    **URL請求**
    @property (nullable, nonatomic, readonly, strong) NSURLRequest *request;
//    **是否縮放到適合屏幕大小**
    @property (nonatomic) BOOL scalesPageToFit;
//    **執行javaScript操作**
    - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

@property (nonatomic) BOOL scalesPageToFit; 是否允許用戶對網頁進行縮放,yes是允許,就是控制雙手放到屏幕上是否可以放大 當前網頁的操作控制

加載屬性
- (void)reload; //重新加載數據
- (void)stopLoading; //停止加載數據
@property (nonatomic, readonly, getter=isLoading) BOOL loading; //是否正在加載
- (void)goBack; //返回上一級
- (void)goForward; //跳轉下一級
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack; //能否返回上一級
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward; //能否跳轉下一級
多媒體屬性
   self.myWebview.scalesPageToFit = YES;    // 是否允許用戶對網頁進行縮放,yes是允許
    self.myWebview.dataDetectorTypes =  UIDataDetectorTypePhoneNumber;  // 檢測網站中電話號碼
    self.myWebview.allowsInlineMediaPlayback = YES;                //設置是否使用內聯播放器播放視頻
    self.myWebview.mediaPlaybackRequiresUserAction = true;   //設置視頻是否自動播放
    self.myWebview.mediaPlaybackAllowsAirPlay = true;            //設置音頻播放是否支持ari play功能
    self.myWebview.suppressesIncrementalRendering = true;         //設置是否將數據加載如內存后渲染界面
    self.myWebview.keyboardDisplayRequiresUserAction = YES;  //設置用戶交互模式
//            self.myWebview.paginationMode = UIWebPaginationModeLeftToRight; //當網頁的大小超出view時,將網頁以翻頁的效果展示
    //        self.myWebview.pageLength = 400;
    self.myWebview.allowsPictureInPictureMediaPlayback = YES; //是否允許畫中畫播放,目前ipad支持iPhone不支持
    self.myWebview.allowsLinkPreview = YES; //長按鏈接是否支持預覽(支持3D Touch的設備)
    self.myWebview.scrollView.bounces = false;  //禁用頁面滾動彈跳
    //      移除外部的陰影
    self.myWebview.scrollView.backgroundColor = [UIColor redColor];
    self.myWebview.paginationBreakingMode = UIWebPaginationBreakingModeColumn;
    /*
     UIWebPaginationBreakingModePage,//默認設置是這個屬性,CSS屬性以頁樣式
     UIWebPaginationBreakingModeColumn//當UIWebPaginationBreakingMode設置這個屬性的時候,這個頁面內容CSS屬性以column-break 代替page-breaking樣式
     */
    UIScrollView *scrollView = self.myWebview.scrollView;

具體詳解:
1, self.myWebview.dataDetectorTypes = UIDataDetectorTypePhoneNumber; // 檢測網站中電話號碼,單擊可以進行撥打電話 ,其他枚舉值類似


phone.png

2, self.myWebview.allowsInlineMediaPlayback = YES; //設置是否使用內聯播放器播放視頻

lol.png
iOS7.0 新特性
@property (nonatomic) UIWebPaginationMode paginationMode NS_AVAILABLE_IOS(7_0);
這個屬性用來設置一種模式,當網頁的大小超出view時,將網頁以翻頁的效果展示,枚舉如下:
typedef NS_ENUM(NSInteger, UIWebPaginationMode) 
{ 
  UIWebPaginationModeUnpaginated, //不使用翻頁效果 
  UIWebPaginationModeLeftToRight, //將網頁超出部分分頁,從左向右進行翻頁 
  UIWebPaginationModeTopToBottom, //將網頁超出部分分頁,從上向下進行翻頁 
  UIWebPaginationModeBottomToTop, //將網頁超出部分分頁,從下向上進行翻頁 
  UIWebPaginationModeRightToLeft //將網頁超出部分分頁,從右向左進行翻頁
} __TVOS_PROHIBITED;
//設置每一頁的長度
@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);
// 上文所述
@property (nonatomic) UIWebPaginationBreakingMode paginationBreakingMode NS_AVAILABLE_IOS(7_0);
typedef NS_ENUM(NSInteger, UIWebPaginationBreakingMode) 
{ 
  UIWebPaginationBreakingModePage,       
  UIWebPaginationBreakingModeColumn
} __TVOS_PROHIBITED;
iOS9.0新特性
//是否允許畫中畫播放/調用系統的視頻播放器
@property (nonatomic) BOOL allowsPictureInPictureMediaPlayback NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL allowsLinkPreview NS_AVAILABLE_IOS(9_0); //

畫中畫的界面補充

ipad.jpeg
UIWebView的代理方法 UIWebViewDelegate
self.myWebview.delegate =self;
//代理方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    /**返回YES,進行加載。通過UIWebViewNavigationType可以得到請求發起的原因
     如果為webView添加了delegate對象并實現該接口,那么在webView加載任何一個frame之前都會delegate對象的該方法,該方法的返回值用以控制是否允許加載目標鏈接頁面的內容,返回YES將直接加載內容,NO則反之。并且UIWebViewNavigationType枚舉,定義了頁面中用戶行為的分類,包括;
     UIWebViewNavigationTypeLinkClicked,0 用戶觸擊了一個鏈接。
     UIWebViewNavigationTypeFormSubmitted,1 用戶提交了一個表單。
     UIWebViewNavigationTypeBackForward,2, 用戶觸擊前進或返回按鈕。
     UIWebViewNavigationTypeReload,3, 用戶觸擊重新加載的按鈕。
     UIWebViewNavigationTypeFormResubmitted,4,用戶重復提交表單
     UIWebViewNavigationTypeOther,5, 發生其它行為。
     */
//    NSLog(@"----request-------%@",request);
    NSLog(@"----navigationType-------%ld",(long)navigationType);
    return YES;
}
- (void)webViewDidStartLoad:(UIWebView *)webView
{
    //開始加載,可以加上風火輪(也叫菊花)
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //完成加載
}

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    //加載出錯
}

完美結束對 UIWebView 的認識

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

推薦閱讀更多精彩內容