iOS的webview和JavaScript的交互方法,求个小Demo,

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS的webview和JavaScript的交互方法,求个小Demo,相关的知识,希望对你有一定的参考价值。

  ios中webview与JS交互的代码:
  [webView stringByEvaluatingjavascriptFromString:@"var script = document.createElement(\'script\');"
"script.type = \'text/javascript\';"
"script.text = \\"function myFunction() "
"var field = document.getElementsByName(\'word\')[0];"
"field.value=\'测试\';"
"document.forms[0].submit();"
"\\";"
"document.getElementsByTagName(\'head\')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];
  上面的代码是把JS代码写入到html网页中,然后执行函数,实现JS中的功能。
  通过 stringByEvaluatingJavaScriptFromString 函数,可以实现webview强大的交互功能。
参考技术A 其实不需要什么Demo。
js调用ios方法:window.location.href='协议名称://方法|参数|参数';
比如:window.location.href="objc://getShareTitle:|"[objc是协议,getShareTitle是方法]本回答被提问者采纳

一处疑难杂症的术后总结:WebView和JavaScript之间的交互

近期在公司里參与了M3项目的开发,这个项目是使用HTML5开发的前端页面,在开发完成后,把项目地址写入AndroidiOS的壳源代码里面,这样当应用被打开时候自己主动加载项目首页的URL。这样的做法对于用户来说,能够不用更新client,对于开发者来说,发现问题能够及时修复并更新,当然这也是B/S软件的长处。

在这个APP里面是有个拨号功能的,即点击界面上的电话小图标。能够直接通过手机拨出号码。

昨天同事丁丁告知我们这个APP有个BUGiOS里面拨号是没有问题的,可是在Android里面拨号时。会跳转到一个报错页面,类似于我们常见的404页面。无法实现拨号操作。我们的代码写的就是常见的tel:19212345678这样的。

我先讲一下我们的处理过程。

话说知之为知之。不知百度知。

所以在接到问题反馈后,我和同事明明先到百度上面搜索了一下,得到下面的结果:

在开源中国社区里面,有人建议在tel:后面加上双斜杠,类似tel://19212345678。我看到后立刻试了一下。不行。

在还有一个站点里面,有人建议在号码背后加上微信的官网地址。

类似tel:19212345678#weixin.qq.com

我试了一下。还是老样子。

同事们聚在一起看了下,这段拨号的代码,在iOS上面是没有不论什么问题的,在微信的自带的浏览器里面是没有不论什么问题的。在Android手机自带的浏览器里面也是没有不论什么问题的。只有在打包成APP后訪问时出了问题!

后来同事华华给我发来一段代码。这个是在设置属性的时候重写shouldOverrideUrlLoading(WebView view, String url)这种方法。代码大意是,先推断传入的URL是不是以“tel:”开头的,假设是的,那就运行拨号操作;假设不是的。那就运行载入URL的操作。

我加进去试了一下,这下能够拨号了,可是不能高兴得太早。

还发现有个小问题,在拨号界面弹出的同一时候。那个类似404的错误界面还是会弹出来的,仅仅只是是被拨号的界面给遮挡住了。在通话完成挂机之后,那个错误界面又会出来。


今天丁丁又在催问这个拨号的问题了,我说我仅仅完毕了50%。还有个小问题还没解决。我还不惬意。

丁丁狡猾地说道:假设你今天不能解决,我也不惬意。

下午我把手头上的任务完毕了之后,就又開始研究这个奇葩的问题了。同事涛涛和华华也过来协助把脉。

同事涛涛在QQ上给我发的几个网址。我都点开一一试了下。

第一个是重写shouldOverrideUrlLoading(WebView view, String url)这种方法的。我回复说昨天已经试过了,能生效可是错误的界面还是会跟着弹出,体验不是非常好;

第二个是使用wati协议拨打电话。类似<a href="wtai://wp//mc;10086">拨打10086 </a>  。我回复说这个也试了,也是不起作用。

在同事华华的建议下,我把模拟器打开了,研究了下载整个拨号操作中的过程,花费了一些时间。

除了证明shouldOverrideUrlLoading这段代码的推断是对的。并没有什么其它的收获。

正当一筹莫展的时候,华华忽然想起了一年前和还有一位同事做的户型图展示功能。当时也是因为技术的局限性不得不使用js调用了Android的浏览器API,想看看能不能仿照那个问题的解决思路来解决这个拨号的问题。

这个WebViewjs的交互是在jsp页面上定义个函数。

Android壳源代码里面通过addJavascriptInterface(new JavascriptInterface(this),"jsInterface")来加入定义在jsp页面上定义的js接口。当然前提是要在壳源代码里面加入javascript交互支持。这个我已经加了。

jsp里面,原来的<a href=”tel:XXX”>已经被改造成了个点击事件,详细的运行内容写在了js函数里面,从而避免了会被识别为个超链接而跳到一个404页面。

假设你觉得在这里就成功了,那也太easy了。

试了一下,点击图片后页面是一明一暗地闪烁,并没有运行拨号操作。

Logcat看到,它事实上是没取到值的。是在取值的时候的时候出了问题?我把取值的${clientInfoVO.clientMobile}换成了<s:property value=‘clientMobile‘ />。居然就取到值了!

剩下的就是针对AndroidiOS两种操作系统进行推断了。


感谢你有足够的耐心看完了上面这长长的流水账,假设你也遇到了和我类似的问题,那么你是幸运的。

以下我总结下WebViewjs交互这类的问题的解决的方法:

1、在Android壳源代码里面加入权限声明:

<uses-permission android:name="android.permission.CALL_PHONE" />

须要声明打电话的权限并获取用户授权,不然不能通过Android壳去运行拨号操作。

假设你要是要发短信,那就是短信相关的权限啦,灵活处理;

2、在Android壳源代码里面启用JavaScript支持:

contentWebView.getSettings().setJavaScriptEnabled(true);

这样才干在壳源代码里面调用web页面的js函数

3、重写shouldOverrideUrlLoading(WebView view, String url)方法。对符合和不符合的两种URL进行推断,并运行不同的操作。演示样例代码例如以下:

public boolean shouldOverrideUrlLoading(WebView view, String url) {
		        if (url.startsWith("tel:")) { 
		                Intent intent = new Intent(Intent.ACTION_VIEW,
		                        Uri.parse(url)); 
		                startActivity(intent);             
		                return false;
		        } else {
		        	view.loadUrl(url);
			        return true;
				}
		    }		

4、在web页面的链接改造成调用js函数,在函数里面运行类似window.js交互接口名.js函数名()

演示样例代码例如以下:

function exitSys(tel){
		window.jsInterface.exitSys(tel);
	}

5、在Android壳源代码里面相应加上js接口声明,比方我的名称是jsInterface,就是在第四步里面写的js交互接口名:

contentWebView.addJavascriptInterface(new JavascriptInterface(this),
				"jsInterface");

6、在JavascriptInterface类里面声明与js相应的方法。这里我就写在Android里面运行拨打电话的代码。

比如:

public void exitSys(String number) {
			   Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:"+number));  
               startActivity(intent);  	
		}

7、须要被调用的这个js里面假设须要动态传參,给这个js函数相关的參数值赋值最好用<s:property >。而不要用${}

否则可能会莫名其妙地取不到值(假设你在模拟器上測试,出现invalid MMI code的时候。也能够说明成功了。

由于模拟器是没有与通信运营商联通的,所以会报这个小错误,这时候建议你能够换用真机去測试);

8、在web页面加上浏览器推断:默认运行tel:,假设是iOS浏览器。就继续沿用之前万能的<a href=”tel:XXX”>,假设是Android浏览器,就运行自己定义的这个js函数,改变点击操作调用的URL。

<a href="tel:<s:property value=‘clientMobile‘ />" ><img src="<%=basePath %>crm/html5_new/myCustomer/images/phone.png"></a>

		$(document).ready(function(){
			$("a").each(function(){
				var u = navigator.userAgent;
				if(u.indexOf(‘iPhone‘) > -1){
					
				}
				else {
					if($(this).attr("href").length>4&&$(this).attr("href").indexOf("tel:")==0){
						$(this).attr("href","javascript:exitSys(‘"+$(this).attr("href").replace("tel:","")+"‘)");
					}
				}
			});
		});









以上是关于iOS的webview和JavaScript的交互方法,求个小Demo,的主要内容,如果未能解决你的问题,请参考以下文章

一处疑难杂症的术后总结:WebView和JavaScript之间的交互

Android WebView Java和JavaScript交互

WebView上实现Java与JavaScript交互

android webview和 javascript 进行交互

JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架

WebView 中 Java 与 JavaScript 的交互