iOSUIWebView与JavaScript(js)交互

UIWebView是iOS最常用的SDK之一&＃xff0c;它有一个stringByEvaluatingJavascriptFromString方法可以将Javascript嵌入页面中&＃xff0c;通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。

stringByEvaluatingJavascriptFromString

使用stringByEvaluatingJavascriptFromString方法&＃xff0c;需要等UIWebView中的页面加载完成之后去调用。我们在界面上拖放一个UIWebView控件。在Load中将google mobile加载到这个控件中&＃xff0c;代码如下&＃xff1a;

- (void)viewDidLoad
{
[super viewDidLoad];
webview.backgroundColor &＃61; [UIColor clearColor]; 
webview.scalesPageToFit &＃61;YES;
webview.delegate &＃61;self;
NSURL *url &＃61;[[NSURL alloc] initWithString:&＃64;"http://www.google.com.hk/m?gl&＃61;CN&hl&＃61;zh_CN&source&＃61;ihp"];

NSURLRequest *request &＃61; [[NSURLRequest alloc] initWithURL:url];
[webview loadRequest:request]; 
}

我们在webViewDidFinishLoad方法中就可以通过Javascript操作界面元素了。

1、获取当前页面的url。

- (void)webViewDidFinishLoad:(UIWebView *)webView {

NSString *currentURL &＃61; [webView stringByEvaluatingJavascriptFromString:&＃64;"document.location.href"];

2、获取页面title&＃xff1a;

NSString *title &＃61; [webview stringByEvaluatingJavascriptFromString:&＃64;"document.title"];

3、修改界面元素的值。

NSString *js_result &＃61; [webView stringByEvaluatingJavascriptFromString:&＃64;"document.getElementsByName(&＃39;q&＃39;)[0].value&＃61;&＃39;朱祁林&＃39;;"];

4、表单提交&＃xff1a;

NSString *js_result2 &＃61; [webView stringByEvaluatingJavascriptFromString:&＃64;"document.forms[0].submit(); "];

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

5、插入js代码

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

if ([title compare: &＃64;"Google"]&＃xff1d;&＃61;NSOrderedSame ) { 

[webView stringByEvaluatingJavascriptFromString:&＃64;"var script &＃61; document.createElement(&＃39;script&＃39;);" 
"script.type &＃61; &＃39;text/Javascript&＃39;;" 
"script.text &＃61; \"function myFunction() { " 
"var field &＃61; document.getElementsByName(&＃39;q&＃39;)[0];" 
"field.value&＃61;&＃39;朱祁林&＃39;;" 
"document.forms[0].submit();" 
"}\";" 
"document.getElementsByTagName(&＃39;head&＃39;)[0].appendChild(script);"]; 

[webView stringByEvaluatingJavascriptFromString:&＃64;"myFunction();"]; 
}

看上面的代码&＃xff1a;

a、首先通过js创建一个script的标签&＃xff0c;type为&＃39;text/Javascript&＃39;。

b、然后在这个标签中插入一段字符串&＃xff0c;这段字符串就是一个函数&＃xff1a;myFunction&＃xff0c;这个函数实现google自动搜索关键字的功能。

c、然后使用stringByEvaluatingJavascriptFromString执行myFunction函数。

演示&＃xff1a;

第一步打开google mobile网站

第二步输入关键字

第三步搜素

总结&＃xff1a;这篇文章主要是讲解了stringByEvaluatingJavascriptFromString的用法&＃xff0c;它的功能非常的强大&＃xff0c;用起来非常简单&＃xff0c;通过它我们可以很方便的操作uiwebview中的页面元素。

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

Java代码  

1.   
2. "Content-Type" content&＃61;"text/html; charset&＃61;utf-8">  
3. "viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0, minimum-scale&＃61;1.0, maximum-scale&＃61;1.0, user-scalable&＃61;no">   
4. 网曝四川省一考场时钟慢半小时 老师称这就是命  

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

Java代码  

1. - (void)webViewDidFinishLoad:(UIWebView *)webView  
2. {     
3.     //修改服务器页面的meta的值  
4.     NSString *meta &＃61; [NSString stringWithFormat:&＃64;"document.getElementsByName(\"viewport\")[0].content &＃61; \"width&＃61;%f, initial-scale&＃61;1.0, minimum-scale&＃61;1.0, maximum-scale&＃61;1.0, user-scalable&＃61;no\"", webView.frame.size.width];  
5.     [webView stringByEvaluatingJavascriptFromString:meta];  
6. }  

这样问题就可以解决了 

新增代码&＃xff1a; 

Java代码  

1. //给网页增加utf-8编码  
2.  [webView stringByEvaluatingJavascriptFromString:  
3.  &＃64;"var tagHead &＃61;document.documentElement.firstChild;"  
4.   "var tagMeta &＃61; document.createElement(\"meta\");"   
5.   "tagMeta.setAttribute(\"http-equiv\", \"Content-Type\");"   
6.   "tagMeta.setAttribute(\"content\", \"text/html; charset&＃61;utf-8\");"   
7.   "var tagHeadAdd &＃61; tagHead.appendChild(tagMeta);"];  

Java代码  

1. //给网页增加css样式  
2.     [webView stringByEvaluatingJavascriptFromString:  
3.      &＃64;"var tagHead &＃61;document.documentElement.firstChild;"  
4.      "var tagStyle &＃61; document.createElement(\"style\");"   
5.      "tagStyle.setAttribute(\"type\", \"text/css\");"   
6.      "tagStyle.appendChild(document.createTextNode(\"BODY{padding: 20pt 15pt}\"));"  
7.      "var tagHeadAdd &＃61; tagHead.appendChild(tagStyle);"];  

Java代码  

1. //拦截网页图片  并修改图片大小        
2. [webView stringByEvaluatingJavascriptFromString:  
3.  &＃64;"var script &＃61; document.createElement(&＃39;script&＃39;);"   
4.  "script.type &＃61; &＃39;text/Javascript&＃39;;"   
5.  "script.text &＃61; \"function ResizeImages() { "   
6.      "var myimg,oldwidth;"  
7.      "var maxwidth&＃61;380;" //缩放系数   
8.      "for(i&＃61;0;i    
9.          "myimg &＃61; document.images[i];"  
10.          "if(myimg.width > maxwidth){"   
11.              "oldwidth &＃61; myimg.width;"   
12.              "myimg.width &＃61; maxwidth;"   
13.              "myimg.height &＃61; myimg.height * (maxwidth/oldwidth);"   
14.          "}"   
15.      "}"   
16.  "}\";"   
17.  "document.getElementsByTagName(&＃39;head&＃39;)[0].appendChild(script);"];   
18.   
19. [webView stringByEvaluatingJavascriptFromString:&＃64;"ResizeImages();"];  
20. 原地址&＃xff1a;http://www.uml.org.cn/mobiledev/201108181.asp