iOS开发中webView与JS交互的使用

UIWebView是iOS sdk中一个最常用的控件。是内置的浏览器控件，我们可以用它来浏览网页、打开文档等等，UIWebView能够加载html/htm、pdf、docx、txt等格式的文件。系统自带的Safari浏览器就是通过UIWebView实现的。下面我的一起来开开如何简单使用webView。

下面直接上代码：

搭建页面

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.url = @"https://www.baidu.com/";
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:self.url]];
       [self.webView loadRequest:urlRequest];
}

返回按钮点击事件

- (void)goBack
{
    if ([self.webView canGoBack])
    {
        [self.webView goBack];//当有H5二级页面在本控制器上加载出现时，调这个
    }else {
        //当前控制器pop/dismiss返回上一级控制器
    }
}

webview的三个代理方法：

//利用URL来调用我们iOSnative的操作
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *url = request.URL.absoluteString;
    //拦截URL跳转
    if ([url hasPrefix:@"事先规定好的协议URL"])
    {        
        //在这里进行跳转
        return NO;
    }
    NSString *pattern = nil;
    NSRange r;
    //拦截URL跳转
    pattern = @"事先规定好的协议URL";
    r = [url rangeOfString:pattern options:NSRegularExpressionSearch];
    if (r.location != NSNotFound) {  
        //在这里进行跳转      
        return NO;
    }
    //调用父类的方法
    return  [super webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];

}

-(void)webViewDidStartLoad:(UIWebView *)webView
{
    //开始加载
}

//iOS调用JS的方法
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //加载结束
    [super webViewDidFinishLoad:webView];
    //    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.textContent"];//获取web页面内容信息，此处获取的是个json字符串

    //    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"alert(1);"]];//显示并获取一个弹窗

    //    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];//获取当前页面的url

    //    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.title"];//获取当前页面的title

    //    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='http://www.cnblogs.com/Twisted-Fate/p/Mr.林';"];//修改当前页面的元素的值

    //    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];//表单提交

    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
    [webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
     "script.type = 'text/javascript';"
     "script.text = \"function myFunction() { "
     "var field = document.getElementsByName('q')[0];"
     "field.value='http://www.cnblogs.com/Twisted-Fate/p/Mr.林';"
     "document.forms[0].submit();"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];
    });
    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];

    NSLog(@"------>%@",docStr);
}

WebView自带的属性是不可以改变网页中字体大小颜色这些需求的，笔者给出几种解决方案如下:

  1. 第一种方式：在WebView的代理方法webViewDidFinishLoad中：

    字体大小： [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '12%'"];

字体颜色：[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'green'"];

背景颜色：[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.background='#F6F7F3'"];

  2. 第二种方式：在下面可以通过改变margin大小来改变webview文字距离边距大小，13代表字体大小，self.strBookTips是要被操作的字符串。

    NSString *BookStr = [NSString stringWithFormat:@"<html> \n"
                      "<head> \n"
                      "<style type=\"text/css\"> \n"
                      "body {margin:10;font-size: %d;}\n"
                      "</style> \n"
                      "</head> \n"
                      "<body>%@</body> \n"
                      "</html>",13,self.strBookTips];
[self.webView loadHTMLString:BookStr baseURL:nil];

  3. 第三种方式，这种缺少了改变背景颜色

    NSString * formatString = @"<span style=\"font-size:13px;color:#7E7C8A\">%@</span>";
NSString * htmlString = [NSString stringWithFormat:formatString,self.strBookTips];
[self.webView loadHTMLString:BookStr baseURL:nil];

http://www.cnblogs.com/gcb999/p/3178728.html

http://www.kwstu.com/ArticleView/guandebao_20139618222689