iOS UIWebView stringByEvaluatingJavaScriptFromString的用法

- (void)webViewDidFinishLoad:(UIWebView *)webView {
1、获取当前页面的url。
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];

2、获取页面title:

NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];

3、修改界面元素的值。

NSString *js_result = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];

4、表单提交:

NSString *js_result2 = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];

这样就实现了在google搜索关键字:“朱祁林”的功能。

5、插入js代码

上面的功能我们可以封装到一个js函数中,将这个函数插入到页面上执行,代码如下:

if ([title compare: @"Google"]==NSOrderedSame ) { 

[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');" 
"script.type = 'text/javascript';" 
"script.text = \"function myFunction() { " 
"var field = document.getElementsByName('q')[0];" 
"field.value='美女';" 
"document.forms[0].submit();" 
"}\";" 
"document.getElementsByTagName('head')[0].appendChild(script);"]; 

[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"]; 
}

6、获取图片

NSString *firstImageUrl = [webView stringByEvaluatingJavaScriptFromString:@"var images = document.getElementsByTagName('img');images[0].src.toString();"];


iOS HTML图片本地预览
1.引言
 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理.
  关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容
2.原理
接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击、滑动等,比如点击标签的响应代码如下 
 

var img = document.getElementById('test'); 

img.onclick = function() { 

    do some thing 

} 

  
顺着这个思路往下想,就可以推测出,在iOS中实现点击图片本地预览,也应该是跟javascript交互的,于是问题转换成了javascript与objc的交互. 关于javascript与objc的交互,google下一大堆,看似很复杂,其实非常简单,我这里简单阐述下,大家都知道在iOS中是用UIWebView控件来显示HTML的,那么javascript与objc要实现交互,桥梁必须是UIWebView,通过查看UIWebView提供的相关接口,可以找到如下接口:
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
第一个接口一目了然,即执行javascript,于是就打通了objc到javacript的路,那么javascript到objc呢?答案就是第二个接口,因为当html点击一个新链接就会执行该接口来判定是否要进入新链接,于是只有让javascript去改变href从而来触发第二个接口的调用,就能打通了javascript到objc的路,参数当然存放于request的href中。
  在了解了javascript与objc的交互,还有一个小问题,即何时去执行javascript?查看UIWebView文档,发现可以在如下接口中调用
- (void)webViewDidFinishLoad:(UIWebView *)webView;
3. 实现
在webViewDidFinishLoad执行如下javascript代码,大致功能是遍历html中所有< img>元素,并添加onclick事件,在onclick中修改window.location.href,以触发UIWebView调用webView:shouldStartLoadWithRequest:navigationType接口,参数是image-preview:+< img>标签的src属性
function assignImageClickAction() {
var imgs = document.getElementsByTagName('img');
var length = imgs.length;
for (var i = 0; i 《(此处是小于号) length; i++) {
    img = imgs[i];
    img.onclick = function() {
        window.location.href = 'image-preview:' + this.src
    }
}
}
assignImageClickAction();
上述javascript可以通过压缩,实际代码如下
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [self.webView stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0; i < length;i++){img=imgs[i];img.οnclick=function(){window.location.href='image-preview:'+this.src}}}"];
    [self.webView stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"];
}
当用户点击会触发如下代码
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    //预览图片
    if ([request.URL.scheme isEqualToString:@"image-preview"]) {
        NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
        path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        [self.imageView setImageWithURL:[NSURL URLWithString:path] placeholderImage:[UIImage imageNamed:@"default"] usingActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];

        [UIView animateWithDuration:0.2f animations:^{
            self.imageView.alpha = 1.0f;
        }];

        return NO;
    }
    return YES;
}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值