iOS WebView01之webview使用以及与网页交互

1， UIWebView的基本使用：

我这里以加载百度网页为例演示一下UIWebView的基本使用

• 如图：
• UIWebView的基本使用.gif

比较简单，代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //我这里以加载百度网页为例演示一下UIWebView的基本使用：
    //1， 创建UIWebView
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-20)];
    [self.view addSubview:webView];
    //2, 加载网页请求
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
    //3， 设置代理
    webView.delegate = self;
}
//监听到请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    //这里的request就是你发送的请求，可以直接从里面取出请求地址，后面与js的交互也是通过这里监听js中window的location的改变，然后通过request中数出来进行相应的判断
    NSLog(@"监听到新的请求，请求地址是：%@------", request.URL.absoluteString);
    
    return YES;
}
//开始加载新的请求
- (void)webViewDidStartLoad:(UIWebView *)webView{
    NSLog(@"01:开始加载请求------");
}
//新的请求加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    NSLog(@"02:请求加载完成------");
}
//加载出错
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
    NSLog(@"请求加载失败");
}

2， UIWebView与js的交互之oc中监听js事件，比如点击等：

原理就是在js中修改窗口的location属性，在oc的相应的代理方法中监听改变即可
这里用h5中的一个按钮点击，然后用oc监听这个js事件来举例：

• 如图：

• UIWebView的交互之oc中监听js事件.gif

• 代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    //我这里以加载百度网页为例演示一下UIWebView的基本使用：
    //1， 创建UIWebView
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-20)];
    [self.view addSubview:webView];
    //2, 加载网页请求
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"testForWebView" withExtension:@"html"];
//    NSLog(@"%@", url);
    [webView loadRequest:[NSURLRequest requestWithURL:url]];
    //3， 设置代理
    webView.delegate = self;
}


//监听到请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    //与js的交互原理：通过这里监听js中window的location的改变，然后通过request中数出来进行相应的判断
    if ([request.URL.absoluteString.lowercaseString containsString:@"imp://"]) {
        NSLog(@"是我自己的协议");
        //在这里已经监听到webView上面的点击，可以在这里进行相应的操作即可
        NSLog(@"oc中监听到js的点击事件");
        
    }
    return YES;
}

3， UIWebView与js的交互之oc中修改网页界面或者添加事件：

通过在oc中执行js代码进行修改相应的网页内容：（第一个按钮的操作是网页中直接修改，第二个按钮的操作才是在oc中执行js代码进行操作dom哦）

• 如图：

• UIWebView的交互之oc中改变网页.gif

• 代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    //我这里以加载百度网页为例演示一下UIWebView的基本使用：
    //1， 创建UIWebView
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-20)];
    [self.view addSubview:webView];
    //2, 加载网页请求
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
    //    NSLog(@"%@", url);
    [webView loadRequest:[NSURLRequest requestWithURL:url]];
    //3， 设置代理
    webView.delegate = self;
}


//监听到请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    //与js的交互原理：通过这里监听js中window的location的改变，然后通过request中数出来进行相应的判断
    if ([request.URL.absoluteString.lowercaseString containsString:@"imp://"]) {
        NSLog(@"是我自己的协议");
        //在这里已经监听到webView上面的点击，可以在这里进行相应的操作即可
        NSLog(@"oc中监听到js的点击事件");
        
        /*
         var theDiv = document.getElementById("zhang");
         theDiv.parentNode.removeChild(theDiv);
         */
        NSMutableString *javaStr = [NSMutableString string];
        [javaStr appendString:@"var theDiv = document.getElementById('zhang');"];
        [javaStr appendString:@"theDiv.parentNode.removeChild(theDiv);"];
        
        [webView stringByEvaluatingJavaScriptFromString:javaStr];
        
    }
    return YES;
}