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;    
    }
相关文章
相关标签/搜索