UIWebView的JS交互

交互的方式

系统自带的交互
调用JavaScript的方法

使用系统的方法

1.设置webView的代理方法

2.在下面方法里面 获取到点击对应的URL 然后执行相关的事件

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *requestURL = [[request URL] absoluteString] ;
    //requestURL 就是获取到的需要的数据 然后执行对应事件就OK了
    return YES;
}

使用javaScript的方法

1.同样设置webView的代理方法

2.导入头文件 #import<JavaScriptCore/JavaScriptCore.h>

3.声明一个JSContext 类型的属性 context

4.在加载完成的代理方法里面 写js的交互的方法

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
        
    __block typeof(self) weakSelf = self;
    self.contextLogin = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
   
   /**
    这里的gologin是html里面的方法名字
   */
    self.contextLogin[@"gologin"] =
    ^(NSString *str)
    {
           //在这里面去响应需要的事件
           /**
                str 是html页面里面方法的传递的参数
           */        
    };
    //FIXME: 从web页面跳转到商品详情

    //获取JS的页面的数据的方法
    NSString *jsToGetHTMLSource = @"document.getElementsByTagName('html')[0].innerHTML";
    
    //获取HTML页面的内容数据
    NSString *HTMLSource = [webView stringByEvaluatingJavaScriptFromString:jsToGetHTMLSource];
    
    //获取HTML的title
    NSString *title =  [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}

常用的一些js方法

1.获取所有图片的地址

//获取web里的所有的img url
    NSString *js =
    @"var imgArray = \
    document.getElementsByTagName('img');\
    var imgstr = ''; \
    function f()\
    { for(var i = 0; i < imgArray.length; i++)\
    { imgstr += imgArray[i].src;imgstr += ';';} \
    return imgstr; } \
    f();";
    [webView stringByEvaluatingJavaScriptFromString:js];//注入js方法
    
     //注入自定义的js方法后别忘了调用 否则不会生效
    NSString *imageCount = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];

2.到到图片的个数

//返回web img图片的数量
    NSString *js = @"var imgArray = \
    document.getElementsByTagName('img');\
    function f()\
    { var num=imgArray.length;return num;}\
    f();";
    [webView stringByEvaluatingJavaScriptFromString:js];//注入js方法

3.遍历图片并添加点击事件

//js方法遍历图片添加点击事件 返回图片个数
    static  NSString * const jsGetImages =
    @"function getImages(){\
    var objs = document.getElementsByTagName(\"img\");\
    for(var i=0;i<objs.length;i++){\
    objs[i].onclick=function(){\
    document.location=\"myweb:imageClick:\"+this.src;\
    };\
    };\
    return objs.length;\
    };";
    
    [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法

4.改变文本内容的字体大小

//调整字号
    NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";
    [webView stringByEvaluatingJavaScriptFromString:str];

5.其他的

//获取body内容
[webView stringByEvaluatingJavaScriptFromString:@"document.body.innerText"]
// 禁用用户选择
    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
    
    // 禁用长按弹出框
    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
    
    // 隐藏titleBar
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('titlebar').style.display = 'none';"];