設置背景透明
設置webview的backgroundColor屬性爲[UIColor clearColor];
webView.backgroundColor = [UIColor clearColor];
爲webview中的HTML頁面的body標籤添加CSS背景樣式設置
<body style="background-color: transparent">
...
</body>
設置webview的opaque屬性值爲NO
webView.opaque = NO;
加載本地HTML頁面
方式一
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]];
方式二
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實現的,因此移除這種陰影效果的代碼如下:
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 ;
}
}
參見Remove UIWebView Shadow?
在Safari中打開鏈接地址
默認情況下,長按web頁面中的鏈接,系統會自動呼出菜單提供open,copy和cancel選項,但如果要實現觸擊鏈接跳轉至safari中打開頁面該怎麼做呢?UIWebViewDelegate協議中,包含
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
接口,如果爲webView添加了delegate對象並實現該接口,那麼在webView加載任何一個frame之前都會delegate對象的該方法,該方法的返回值用以控制是否允許加載目標鏈接頁面的內容,返回YES將直接加載內容,NO則反之。並且UIWebViewNavigationType枚舉,定義了頁面中用戶行爲的分類,包括
UIWebViewNavigationTypeLinkClicked,用戶觸擊了一個鏈接。
UIWebViewNavigationTypeFormSubmitted,用戶提交了一個表單。
UIWebViewNavigationTypeBackForward,用戶觸擊前進或返回按鈕。
UIWebViewNavigationTypeReload,用戶觸擊重新加載的按鈕。
UIWebViewNavigationTypeFormResubmitted,用戶重複提交表單
UIWebViewNavigationTypeOther,發生其它行爲。
因此,實現用戶觸擊UIWebView頁面中的鏈接,並跳至Safari中打開鏈接頁面的步驟如下:
定義實現UIWebViewDelegate協議的類MyWebViewDelegate(通常是由包含UIWebView的controller中實現UIWebViewDelegate協議)。
按如下方式實現webView:shouldStartLoadWithRequest:navigationType:接口
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType
{
if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
[[UIApplication sharedApplication] openURL:[request URL]];
return NO;
}
return YES;
}
新建MyWebViewDelegate對象,並賦值給webView的delegate屬性
參見:UIWebView open links in Safari
禁用頁面滾動彈跳
之前提到UIWebView使用一個UIScrollView對象來關聯web頁面的內容,通過UIWebView的scrollView屬性即可獲得該對象,默認情況下網頁長度超出設備視口長度後頁面會滾動,用戶使用手指滾動頁面到頁面邊距並放開手指後頁面會產生一個彈跳效果,去除這個效果的方法如下
webView.scrollView.bounces = NO ;
參見:Stop UIWebView from “bouncing” vertically?
scalesPageToFit屬性
默認情況下UIWebView加載HTML頁面後,會以頁面的原始大小進行顯示,亦即如果頁面的大小超出UIWebView視口大小,UIWebView會出現滾動效果,而且用戶只能通過滾動頁面來查看不同區域的內容,不能使用手指的捏合手勢來放大或縮小頁面。通過設置
webView.scalesPageToFit = YES ;
UIWebView可以縮放HTML頁面來適配其視口大小,從而達到整屏顯示內容的效果,並且用戶可以用捏合動作來放大或縮小頁面來查看內容。
調用javascript代碼
UIWebView提供
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
方法,可以在objective-c代碼中調用javascript代碼,參數script字符串保存了所要執行的js代碼字符串,執行結果以字符串形式返回。以獲取web頁面標題爲例,代碼如下:
NSString *pageTitle = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
腳本的代碼內容還要依據具體的應用場景。此外,該方法規定執行的腳本時長限定在10s內,爲的是防止過長時間的阻塞頁面主線程,超過執行時間上線會自動停止腳本運行,並且腳本可分配內存限定在10MB內,超過分配上線將會引發異常。
javascript調用native代碼
以上提到,UIWebView加載任何一個頁面之前都會調用其代理的
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType
方法,通過調用參數request對象的URL屬性來獲取關於本次請求的地址以及參數信息,因此可以通過js代碼模擬一次特殊的網絡請求來達到調用該代理方法的作用,並通過過濾“特殊的url”來達到有目的性的js代碼調用native代碼的效果。所謂的“特殊的url”主要的目的是達到一種標識的效果,我們可以規定url的scheme部分,如appscheme://appName?invokeMethodName=objcMethod¶mA=xxx;也可以在常規的url後面附加特殊的參數標識,如http://www.yoursite.com?objecMethodCallFlag=1&methodName=methodA¶mA=xxx。之後根據規定在代理方法中去相應的解析url並做出if else判斷即可。常見的調用方式是動態添加一個隱藏的iframe標籤到HTML頁面,如下:
// js
function invokeObjc(url) {
var iframe;
iframe = document.createElement("iframe");
iframe.setAttribute("src", url);
iframe.setAttribute("style", "display:none;");
document.body.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
}
var url = "appscheme://appName?invokeMethodName=objcMethod¶mA=xxx";
invokeObjc(url);
// objc
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType
{
static NSString *callScheme = @"appscheme";
static NSString *invokeMethodName = @"invokeMethodName";
NSString *scheme = request.URL.scheme ;
if ([callScheme isEqualToString:scheme]) {
NSString *query = request.URL.query ;
NSArray *arr = [query componentsSeparatedByString:@"&"];
__block NSString *methodName = @"" ;
NSMutableDictionary *params = [NSMutableDictionary new];
// 未考慮參數的解碼操作
[arr enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOLBOOL *stop) {
NSArray *kv =[obj componentsSeparatedByString:@"="];
if (kv) {
if ([invokeMethodName isEqualToString: kv[0]]) {
methodName = kv[1];
}else{
[params setObject:kv[1] forKey:kv[0]];
}
}
}];
// 獲得方法名和參數之後,可以添加邏輯判斷
NSLog(@"%@",methodName);
NSLog(@"%@",params);
return NO ;
}
return YES ;
}
前面提到的native代碼調用js代碼的實現方式,結合兩種實現方式即完成了js與native代碼間的簡單的通信操作。
讓UIWebView更加接近native
某些情況下,我們既想要UIWebView加載web頁面,又想使得所加載的頁面的外觀和操作行爲更加接近native感覺。這時需要使用一些CSS樣式來達到這些效果,這些CSS只適用於IOS中的Safari。
-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);
}
iOS webView
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.