UIWebView的使用

WebView的幾種使用方法:

首先:配置Plist文件 可以進行網絡請求

Property Plist

或者:Source Code寫入HTML格式

Source Code

否則:你懂得~~??

未配置Plist文件,請求失敗



使用StoryBoard拖3個WebView,平分了整個屏幕:

StoryBoard創建好界面

再把背景色設置為紫色。

三個WebView:

@property (strong, nonatomic) IBOutlet UIWebView *webV_1;
@property (strong, nonatomic) IBOutlet UIWebView *webV_2;
@property (strong, nonatomic) IBOutlet UIWebView *webV_3;


獲取本地文件內容(HTML文件)


創建本地HTML文件

創建本地文件
創建、命名



在“MyCreateFile.html”本地文件,編輯HTML格式的內容:

  <html>
      <meta charset="UTF-8">
          <head lang="en">
              <meta charset="UTF-8">
                  <h1 style='color:blue'>
                      What's The Fox say?
                  </h1>
          </head>
    
          <br>  </br>
    
          <body>
              <h1>What's The Fox say?</h1>   <!-- 一級標題  -->
              <h2>我的HTML標題Lev2</h2>
              <h3>我的HTML標題Lev3</h3>
              <h4>我的HTML標題Lev4</h4>
              <h5>我的HTML標題Lev5</h5>
              <h6>我的HTML標題Lev6</h6>    <!-- 六級標題  -->
              <p>
              <p style='color:red'>           <!--  顏色改變  -->
              老子的HTML學習第一次
              </p>
        
              <p>
              勞資的HTML學習第一次 What's The Fox says
              勞資HTML學習第一次  勞資HTML學習第一次
              勞資HTML學習第一次勞資HTML學習第一次
              </p>

              <input type="button" value="按鈕">
              <input type = "color">  <br/>          <!--  <br/>:自動換行  -->
              <!--   <br />=<br>...</br>  -->
              <input type = "text" placeholder="請輸入賬號">    <br/>
                    
              <a >百度一下,你就上當
              </a>
            
              <form>
              <input type='checkbox' name='sex' value='male' selected=selected>程序員
              <input type='checkbox' name='sex' value='male' selected=selected>老板 <br/>     <!--  checkbox:多選框  -->
              <input type='radio' name='sex' value='male' selected=selected>男人
              <input type='radio' name='sex' value='female'>女人                              <!--  radio:單選框  -->
              </form>
          </body>
  </html>


在 - (void)viewDidLoad { }里面:

[self loadLocalHtml];

-(void)loadLocalHtml
{
  //1.從本地獲取HTML文件
  NSString * path = [[NSBundle mainBundle] pathForResource:@"MyCreateFile" ofType:@"html"];

  //2.從文件中獲取HTML字符串
  NSString * htmlStr = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

  //3.加載在webview中
  [self.webV_1 loadHTMLString:htmlStr baseURL:nil];


  //4.可以 加載在Label的??富文本??中    (但是只能觀看~??????)
  //NSData * data = [htmlStr dataUsingEncoding:NSUTF8StringEncoding];   //Label的字體 大小 并不能影響 html字體的大小
  //NSAttributedString * str = [[NSAttributedString alloc] initWithData:data options:@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType} documentAttributes:nil error:nil];
  //self.htmlLB.attributedText = str;

}



其中:

[self.webV_1 loadHTMLString:htmlStr baseURL:nil];

對于“[ loadHTMLString: baseURL: ]”方法,可以替換為:

NSURL * webURL = [NSURL fileURLWithPath:path];  //通過文件路徑字符串獲取URL
NSURLRequest * URLRequest = [NSURLRequest requestWithURL:webURL];//設置請求 提交的相關URL
[self.webV_1 loadRequest:URLRequest];          //提交請求

好處:URL(統一資源定位符~~)不但可以獲取本地文件內容,也可以加載網絡信息。
當然“[ loadHTMLString: baseURL: ]”方法可以加載HTML格式CSS格式的網絡信息! 之前自己只是將網絡上請求的信息(CSS格式)加載出來了而已!

之前處理 網絡**請求到的**CCS格式的信息

網上說法:??baseURL如果是一個網絡路徑,就能加載 網絡上的CSS信息了!??但是自己還沒試過。。。。。
希望明白的朋友指點一下~ !

蘋果官方 不推薦用來加載網絡信息:(?? 當然有時候 官方就是屁~)


“ - loadHTMLString:baseURL: ”方法
“ - loadRequest: ”方法



加載的效果:

本地HTML文件加載 展示效果

總結:

1.“<head></head>”部分 只有一個藍色標題。
2.“<br><br/>”效果與“<br/> ”相同 (換行操作)。
3.“程序員”、“老板” 為多選項;“男人”、“女人” 為單選項。
4.點擊“百度一下,你就上當”,進入百度網頁。
※5.WebView的背景色跟UIScrollView一樣(包含了一個UIScrollView屬性),藍色會被內容視圖遮擋。






從服務器加載 HTML頁面


在 - (void)viewDidLoad { }里面:

[self loadInternetHtml];

//從服務器加載HTML頁面
-(void)loadInternetHtml
{
   //加載服務器HTML頁面的 模式
   // NSString *urlStr = [NSString stringWithFormat:@"%@/appservice/getAnnouncementDetail.do?id=%@",O2O_URL,self.idStr]; 
    NSString *urlStr = @"https://www.baidu.com";
    NSURL *url = [NSURL URLWithString:urlStr];
    NSLog(@"url:%@",url);
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webV_1 loadRequest:request];

}


加載的效果:直接跳轉到所需要的頁面

直接跳轉到 所需要展示的頁面





使用WebView的delegate方法:
@interface ViewController () <UIWebViewDelegate> //  設置代理


在 - (void)viewDidLoad { }里面:

[self useWebViewDelegate];

-(void)useWebViewDelegate
{
    self.webV_2.delegate = self;        // ??設置代理    
    self.webV_2.scrollView.bounces = NO;//禁止WebView的彈簧效果

    NSString *urlStr = @"https://www.baidu.com";
    NSURL *url = [NSURL URLWithString:urlStr];
    NSLog(@"url:%@",url);
    NSURLRequest * request = [NSURLRequest requestWithURL:url];
    [self.webV_2 loadRequest:request];
}


代理里面的方法:

#pragma mark - UIWebView Delegate
- (void)webViewDidStartLoad:(UIWebView *)webView 
{ 開始加載時調用的方法
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error 
{加載失敗時調用的方法

}


// 禁止webview中的鏈接點擊   (用于 :??過濾 請求條件)
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{   // 頁面準備加載內容時調用,通過返回值來進行判斷是否要加載
    if (webView == self.webV_2) {   // 是第二個WebView
        if(navigationType == UIWebViewNavigationTypeLinkClicked) 
       { //判斷點擊的是否為 鏈接        
            return NO;    //返回“NO”,不加載到鏈接的頁面
        }else{
            return YES;
        }
    } else { // 其他WebView可以響應 鏈接
        return YES;
    }
}

加載效果:
第二個WebView每次點擊到響應的類型,都會判斷是否為“鏈接”類型:如果是,不予響應(進入鏈接頁面)。

如果點擊的 是鏈接類型,不予響應



-(void)webViewDidFinishLoad:(UIWebView *)webView
{   // 加載完后觸發
    if (webView == self.webV_2) {   // 是第二個WebView
        NSString * fontStr = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '50%'";//字體大小
        // ………………

        [self.webV_2 stringByEvaluatingJavaScriptFromString:fontStr];
    }

}

加載效果:


第二個WebView的字體,縮小為原來的50%






JavaScript方式,操作web數據

需要等UIWebView中的頁面加載完成之后去調用。
“ - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;”方法向UIWebView傳遞一段需要執行的JavaScript代碼,最后獲取執行結果。

在 - (void)viewDidLoad { }里面:

[self useJavaScriptWay];

-(void)useJavaScriptWay {
    self.webV_3.delegate = self;        //設置代理

    NSURL *url =[[NSURL alloc] initWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
    [self.webV_3 loadRequest:request];    
}


在頁面加載完成后,去調用WebView的“stringByEvaluatingJavaScriptFromString”方法:

-(void)webViewDidFinishLoad:(UIWebView *)webView
{   // 加載完后觸發
    if (webView == self.webV_3) {
        [self changeValueForUsingJavaScriptWay];
    }
}

-(void)changeValueForUsingJavaScriptWay {
    // 獲取當前頁面的URL
    NSString *currentURL = [self.webV_3 stringByEvaluatingJavaScriptFromString:@"document.location.href"];
    //獲取當前頁面的標題名稱
    NSString *title = [self.webV_3 stringByEvaluatingJavaScriptFromString:@"document.title"];
    NSLog(@"%URL:@====title:%@",currentURL,title);
   




    // ??交互格式??
    //[self.webV_3 stringByEvaluatingJavaScriptFromString:@"方法名(%@)",參數] ];


    //插入js代碼
    //[self.webV_3 stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
    //"script.type = 'text/javascript';"
    //"script.text = \"function myFunction() { "
    //"var field = document.getElementsByName('q')[0];"
    //"field.value='goyoholBest.com';"
    //"document.forms[0].submit();"
    //"}\";"
    //"document.getElementsByTagName('head')[0].appendChild(script);"];


    //給網頁增加utf-8編碼
    //[self.webV_3 stringByEvaluatingJavaScriptFromString:
    //@"var tagHead =document.documentElement.firstChild;"
    //"var tagMeta = document.createElement(\"meta\");"
    //"tagMeta.setAttribute(\"http-equiv\", \"Content-Type\");"
    //"tagMeta.setAttribute(\"content\", \"text/html; charset=utf-8\");"
    //"var tagHeadAdd = tagHead.appendChild(tagMeta);"];


    //給網頁增加css樣式
    //[self.webV_3 stringByEvaluatingJavaScriptFromString:
    //@"var tagHead =document.documentElement.firstChild;"
    //"var tagStyle = document.createElement(\"style\");"
    //"tagStyle.setAttribute(\"type\", \"text/css\");"
    //"tagStyle.appendChild(document.createTextNode(\"BODY{padding: 20pt 15pt}\"));"
    //"var tagHeadAdd = tagHead.appendChild(tagStyle);"];

    //攔截網頁圖片  并修改圖片大小
    [self.webV_3 stringByEvaluatingJavaScriptFromString:
    @"var script = document.createElement('script');"
    "script.type = 'text/javascript';"
    "script.text = \"function ResizeImages() { "
    "var myimg,oldwidth;"
    "var maxwidth=50;" //縮放系數
    "for(i=0;i <document.images.length;i++){"
    "myimg = document.images[i];"
    "if(myimg.width > maxwidth){"
    "oldwidth = myimg.width;"
    "myimg.width = maxwidth;"
    "myimg.height = myimg.height * (maxwidth/oldwidth);"
    "}"
    "}"
    "}\";"
    "document.getElementsByTagName('head')[0].appendChild(script);"];
    [self.webV_3 stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
  }


加載的效果:圖片被縮小 及 進入一個頁面打印其URL及title信息

圖片被縮小




控制臺打印結果:

    2016-12-26 01:39:52.008 WebViewUse-Demo[3221:164983] https://www.baidu.com/====百度一下
    2016-12-26 01:39:58.571 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
    2016-12-26 01:39:59.196 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
    2016-12-26 01:40:11.736 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fdsp%253Dwise%2526nid%253D3267967319825678069%2526n_type%253D1%2526p_from%253D3%2522%257D%257D====百度一下
    2016-12-26 01:40:12.039 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fdsp%253Dwise%2526nid%253D3267967319825678069%2526n_type%253D1%2526p_from%253D3%2522%257D%257D====百度一下
    2016-12-26 01:41:11.831 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
    2016-12-26 01:41:12.409 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
    2016-12-26 01:41:13.252 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
    2016-12-26 01:41:13.599 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下

我現在看到“百度”,就??????






Tips:

使用較少的方法,也更自由:

  - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

其中:data是文件數據,MIMEType是文件類型,textEncodingName是編碼類型,baseURL是素材資源路徑。

屬性和變量:

  @property (nonatomic,readonly,retain)UIScrollView *scrollView; // 內置的scrollView
  @property (nonatomic,readonly,retain)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)UIDataDetectorTypes dataDetectorTypesNS_AVAILABLE_IOS(3_0);  // 設置某些數據變為鏈接形式,這個枚舉可以設置如電話號,地址,郵箱等轉化為鏈接
  @property (nonatomic)BOOL allowsInlineMediaPlaybackNS_AVAILABLE_IOS(4_0);         // 設置是否使用內聯播放器播放視頻
  @property (nonatomic)BOOL mediaPlaybackRequiresUserActionNS_AVAILABLE_IOS(4_0);   // 設置視頻是否自動播放
  @property (nonatomic)BOOL mediaPlaybackAllowsAirPlayNS_AVAILABLE_IOS(5_0);        // 設置音頻播放是否支持AirPlay功能
  @property (nonatomic)BOOL suppressesIncrementalRenderingNS_AVAILABLE_IOS(6_0);    // 設置是否將數據加載如內存后渲染界面
  @property (nonatomic)BOOL keyboardDisplayRequiresUserActionNS_AVAILABLE_IOS(6_0); // 設置用戶交互模式


以下是iOS7之后才有的屬性:

  @property (nonatomic)UIWebPaginationMode paginationModeNS_AVAILABLE_IOS(7_0);

此屬性是用來設置一種模式,當網頁大小超出view時,可將網頁設置成以“翻頁”的效果展示,枚舉如下:

  typedef NS_ENUM(NSInteger, UIWebPaginationMode) {
          UIWebPaginationModeUnpaginated,  // 不使用翻頁效果
          UIWebPaginationModeLeftToRight,  // 將網頁超出部分分頁,從左向右進行翻頁
          UIWebPaginationModeTopToBottom,  // 將網頁超出部分分頁,從上向下進行翻頁
          UIWebPaginationModeBottomToTop,  // 將網頁超出部分分頁,從下向上進行翻頁
          UIWebPaginationModeRightToLeft   // 將網頁超出部分分頁,從右向左進行翻頁
  };


  @property (nonatomic)CGFloat pageLengthNS_AVAILABLE_IOS(7_0);            // 設置每一頁的長度
  @property (nonatomic)CGFloat gapBetweenPagesNS_AVAILABLE_IOS(7_0);       // 設置每一頁的間距
  @property (nonatomic,readonly)NSUInteger pageCountNS_AVAILABLE_IOS(7_0); // 獲取分頁數


酌情調用以下方法:

  - (void)reload;       // 重新加載數據
  - (void)stopLoading;  // 停止加載數據

  - (void)goBack;       // 返回上一級
  - (void)goForward;    // 跳轉下一級


暫時就說這么多吧!!之后還會寫一篇JS交互的文章~
也不知道什么時候了~~ ?哈哈????


















goyohol's essay

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

推薦閱讀更多精彩內容