iOS中JavaScript和OC交互

在iOS开发中很多时候我们会和UIWebView打交道，目前国内的很多应用都采用了UIWebView的混合编程技术，最常见的是微信公众号的内容页面。前段时间在做微信公众平台相关的开发，发现很多应用场景都是利用HTML5和UIWebView来实现的。

机制

Objective-C语言调用JavaScript语言，是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的。该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。

JavaScript语言调用Objective-C语言，并没有现成的API，但是有些方法可以达到相应的效果。具体是利用UIWebView的特性：在UIWebView的内发起的所有网络请求，都可以通过delegate函数得到通知。

示例

下面提供一个简单的例子介绍如何相互的调用，实现的效果是在界面上点击一个链接，然后弹出一个对话框判断是否登录成功。

（1）示例的HTML的源码如下：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta content="always" name="referrer" />
        <title>测试网页</title>
    </head>
    <body>
        <br />
        <a href="devzeng://login?name=zengjing&password=123456">点击链接</a>
    </body>
</html>

（2）UIWebView Delegate回调方法为：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if([[url scheme] isEqualToString:@"devzeng"]) {
        //处理JavaScript和Objective-C交互
        if([[url host] isEqualToString:@"login"])
        {
            //获取URL上面的参数
            NSDictionary *params = [self getParams:[url query]];
            BOOL status = [self login:[params objectForKey:@"name"] password:[params objectForKey:@"password"]];
            if(status)
            {
                //调用JS回调
                [webView stringByEvaluatingJavaScriptFromString:@"alert('登录成功!')"];
            }
            else
            {
                [webView stringByEvaluatingJavaScriptFromString:@"alert('登录失败!')"];
            }
        }
        return NO;
    }
    return YES;
}

说明：

1、同步和异步的问题

（1）Objective-C调用JavaScript代码的时候是同步的

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

（2）JavaScript调用Objective-C代码的时候是异步的

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

2、常见的JS调用

（1）获取页面title

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

（2）获取当前的URL

NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];

（3）以下是一些常用的js脚本：


thisURL = document.URL;
thisHREF = document.location.href;
thisSLoc = self.location.href;
thisDLoc = document.location;
thisTLoc = top.location.href;
thisPLoc = parent.document.location;
thisTHost = top.location.hostname;
thisHost = location.hostname;
thisTitle = document.title;
thisProtocol = document.location.protocol;
thisPort = document.location.port;
thisHash = document.location.hash;
thisSearch = document.location.search;
thisPathname = document.location.pathname;
thisHtml = document.documentElement.innerHTML;
thisBodyText = document.documentElement.innerText;//获取网页内容文字
thisBodyText = document.body.innerText;//获取网页内容文字

（4）使用第三方库

https://github.com/marcuswestin/WebViewJavascriptBridge

使用案例

1、动态将网页上的图片全部缩放

JavaScript脚本如下：

function ResizeImages() {
  var myImg, oldWidth;
  var maxWidth = 320;
  for(i = 0; i < document.images.length; i++) {
      myImg = document.images[i];
      if(myImg.width > maxWidth) {
          oldWidth = myImg.width;
          myImg.width = maxWidth;
          myImg.heith = myImg.height*(maxWidth/oldWidth);
      }
  }
}

在iOS代码中添加如下代码：

[webView stringByEvaluatingJavaScriptFromString:  
 @"var script = document.createElement('script');"   
 "script.type = 'text/javascript';"   
 "script.text = \"function ResizeImages() { "   
     "var myimg,oldwidth;"  
     "var maxwidth=380;" //缩放系数   
     "for(i=0;i <document.images.length;i++){"   
         "myimg = document.images[i];"  
         "if(myimg.width > maxwidth){"   
             "oldwidth = myimg.width;"   
             "myimg.width = maxwidth;"   
             "myimg.height = myimg.height * (maxwidth/oldwidth);"   
         "}"   
     "}"
 "}\";"   
 "document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];

也可以通过同样的方法去设置页面内容（比如帮用户输入表单数据）
比如：
`NSString *string = [awebView stringByEvaluatingJavaScriptFromString:@"document.getElementById('field_2').value='a value';" ];`
就可以修改field_2的值了

同样也可以去模拟页面内按钮的点击，提交页面，比如：
`document.getElementById('aButtonName').click();`
或者，假设知道按钮是第几个input标签(假设为第一个)
`document.getElementsByTagName('input').item(0).click();`
也可以设置checkBox的状态：
`document.getElementById('aCheckBoxId').checked=true;`

-------------------------------------------------------------------------------------------

需求：混合应用UIWebView打开html后，UIWebView有左右滚动条，要去掉左右滚动效果；
方法：通过js截获UIWebView中的html，然后修改html标签内容；
实例代码：
服务器端html

Java代码  
<html><head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   
<title>网曝四川省一考场时钟慢半小时 老师称这就是命</title></head<body>网曝四川省一考场时钟慢半小时 老师称这就是命</body></html>  

这样显示的结果网页的最小宽度会是device-width；但有时候不需要这个宽度，就需要修改width=device-width为width=myWidth;
客户端代码

Java代码  
- (void)webViewDidFinishLoad:(UIWebView *)webView  
{     
    //修改服务器页面的meta的值  
    NSString *meta = [NSString stringWithFormat:@"document.getElementsByName(\"viewport\")[0].content = \"width=%f, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"", webView.frame.size.width];  
    [webView stringByEvaluatingJavaScriptFromString:meta];  
}  

这样问题就可以解决了

新增代码：

Java代码  
//给网页增加utf-8编码  
 [webView stringByEvaluatingJavaScriptFromString:  
 @"var tagHead =document.documentElement.firstChild;"  
  "var tagMeta = document.createElement(\"meta\");"   
  "tagMeta.setAttribute(\"http-equiv\", \"Content-Type\");"   
  "tagMeta.setAttribute(\"content\", \"text/html; charset=utf-8\");"   
  "var tagHeadAdd = tagHead.appendChild(tagMeta);"];  

Java代码  
//给网页增加css样式  
    [webView stringByEvaluatingJavaScriptFromString:  
     @"var tagHead =document.documentElement.firstChild;"  
     "var tagStyle = document.createElement(\"style\");"   
     "tagStyle.setAttribute(\"type\", \"text/css\");"   
     "tagStyle.appendChild(document.createTextNode(\"BODY{padding: 20pt 15pt}\"));"  
     "var tagHeadAdd = tagHead.appendChild(tagStyle);"];  

Java代码  
//拦截网页图片  并修改图片大小        
[webView stringByEvaluatingJavaScriptFromString:  
 @"var script = document.createElement('script');"   
 "script.type = 'text/javascript';"   
 "script.text = \"function ResizeImages() { "   
     "var myimg,oldwidth;"  
     "var maxwidth=380;" //缩放系数   
     "for(i=0;i <document.images.length;i++){"   
         "myimg = document.images[i];"  
         "if(myimg.width > maxwidth){"   
             "oldwidth = myimg.width;"   
             "myimg.width = maxwidth;"   
             "myimg.height = myimg.height * (maxwidth/oldwidth);"   
         "}"   
     "}"   
 "}\";"   
 "document.getElementsByTagName('head')[0].appendChild(script);"];   
  
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];  

其他html属性重载和此方法类似；

資料來源

1. iOS中JavaScript和OC交互 http://git.devzeng.com/blog/ios-uiwebview-interaction-with-javascript.html

2. 利用JavaScript从UIWebView获取、修改、提交网页内数据的方法 http://blog.unieagle.net/2012/05/17/利用javascript从uiwebview获取网页内数据的方法/

3. http://jiapumin.iteye.com/blog/1558345

IOS 學習記錄

2015年6月16日星期二

[IOS]iOS中JavaScript和OC交互

iOS中JavaScript和OC交互

机制

示例

使用案例

-------------------------------------------------------------------------------------------

資料來源

1 則留言:

2015年6月16日 星期二

[IOS]iOS中JavaScript和OC交互

iOS中JavaScript和OC交互

机制

示例

使用案例

-------------------------------------------------------------------------------------------

資料來源

1 則留言:

2015年6月16日星期二