UIWebView 經常使用操做

UIWebView


加載本地HTML頁面

使用 -(void)loadHTMLString:(NSString )string baseURL:(nullable NSURL )baseURL;javascript

NSString *localHTMLPageName = @"myPage";
NSString *path = [[NSBundle mainBundle] pathForResource:localHTMLPageName ofType:@"html"];

// 從html文件中讀取html字符串
NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];

NSString *htmlString = [[NSString alloc] initWithData:
                    [readHandle readDataToEndOfFile] encoding:NSUTF8StringEncoding];
// 或使用                 
// NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];

// baseURL用來肯定htmlString的基準地址,
// 至關於HTML的<base>標籤的做用,定義頁面中全部連接的默認地址。
[webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];

-(void)loadRequest:(NSURLRequest *)request;html

NSString *localHTMLPageName = @"myPage";

NSString *localHTMLPageFilePath = [[NSBundle mainBundle]    pathForResource:localHTMLPageName ofType:@"html"];

NSURL *localHTMLPageFileURL = [NSURL    fileURLWithPath:localHTMLPageFilePath];

[webView loadRequest:[NSURLRequest  requestWithURL:localHTMLPageFileURL]];

移除滾動後的外邊陰影

UIWebView包含一個scrollView組件,用來將關聯web內容實現滾動效果,頁面滾動後的UIWebView的面板周圍會出現陰影效果,該效果是在四周添加UIImageView實現的,所以移除這種陰影效果的代碼以下:java

UIScrollView *scrollView = webView.scrollView;

for (int i = 0; i < scrollView.subviews.count ; i++) {
    UIView *view = [scrollView.subviews objectAtIndex:i];
    if ([view isKindOfClass:[UIImageView class]]) {
        view.hidden = YES ;
    }
}

在Safari中打開UIWebview中的連接地址

實現weiviewDelegate 的 shouldStartLoadWithRequest方法,再用openUrl方法 打開safariweb

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request 
 navigationType:(UIWebViewNavigationType)navigationType
{
if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
    [[UIApplication sharedApplication] openURL:[request URL]];
    return NO;
}
return YES;
}

禁用頁面滾動彈跳

以前提到UIWebView使用一個UIScrollView對象來關聯web頁面的內容,經過UIWebView的scrollView屬性便可得到該對象,默認狀況下網頁長度超出設備視口長度後頁面會滾動,用戶使用手指滾動頁面到頁面邊距並放開手指後頁面會產生一個彈跳效果,去除這個效果的方法以下緩存

webView.scrollView.bounces = NO ;

調用javascript代碼

使用 - (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;方法。cookie

該方法規定執行的腳本時長限定在10s內,爲的是防止過長時間的阻塞頁面主線程,超過執行時間上線會自動中止腳本運行,而且腳本可分配內存限定在10MB內,超過度配上線將會引起異常。網絡

//好比獲取web頁面標題
NSString *pageTitle = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

javascript調用native代碼

仍是經過 shouldStartLoadWithRequest 方法app

經過js代碼模擬一次特殊的網絡請求來達到調用該代理方法的做用,並經過過濾「特殊的url」來達到有目的性的js代碼調用native代碼的效果。所謂的「特殊的url」主要的目的是達到一種標識的效果,咱們能夠規定url的scheme部分,如appscheme://appName?invokeMethodName=objcMethod&paramA=xxx;也能夠在常規的url後面附加特殊的參數標識,如http://www.yoursite.com?objecMethodCallFlag=1&methodName=methodA&paramA=xxx。以後根據規定在代理方法中去相應的解析url並作出if else判斷便可。iview


讓UIWebView更加接近native

某些狀況下,咱們既想要UIWebView加載web頁面,又想使得所加載的頁面的外觀和操做行爲更加接近native感受。這時須要使用一些CSS樣式來達到這些效果,這些CSS只適用於IOS中的Safari。ui

  • -webkit-touch-callout

禁用長按觸控對象彈出的菜單。IOS中,當你長按一個觸控對象時,如連接,safari會彈出包含連接信息的菜單。禁用此行爲CSS代碼

.disable-callout{
-webkit-touch-callout:none ;
}

或在webViewDidFinisheLoad中使用

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
  • -webkit-user-select

控制用戶是否能夠選擇頁面元素內容。IOS中,在頁面元素中進行長按操做,safari會彈出菜單,來容許進行選擇行爲。禁用此行爲代碼

.disable-select{
    -webkit-user-select:none;
}

或在webViewDidFinisheLoad中使用

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
  • -webkit-tap-highlight-color

覆蓋當用戶tap連接或clickable元素時默認產生的高亮顏色(灰色)。如

.no-highlight{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

參考Apple CSS


清除緩存和cookie

//清除cookies
NSHTTPCookie *cookie;
NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
for (cookie in [storage cookies]) 
{
[storage deleteCookie:cookie];
}

//UIWebView清除緩存:
[[NSURLCache sharedURLCache] removeAllCachedResponses];

UIWebView拖動不露底

UIScrollView  *scroller = [webView.subviews objectAtIndex:0];    
if (scroller)    {        
    scroller.bounces = NO;        
    scroller.alwaysBounceVertical = NO;    
    }
相關文章
相關標籤/搜索