移动web相关学习(二)——WebView的学习(2)

书接上回。。。

首先来看Android调用JS:

首先要把WebView 的支持JS的开关打开。

webSettings.setJavaScriptEnabled(true);

只要在加载了指定了的页面,然后只需用
mwebView.loadUrl("javascript:callAnDialog('i am from Android!')");
就可以实现对指定JS的调用,是不是很简单呢?

看一个简单的小例子

JAVA代码

public class MainActivity extends ActionBarActivity {

	WebView mwebView;
	Button btn_test;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		innitViews();
		
		WebSettings webSettings= mwebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		mwebView.setWebViewClient(new MyWebViewClient());
		//mwebView.addJavascriptInterface(new TestInterface(this), "SayHi");
		mwebView.loadUrl("file:///android_asset/testJS.html");
		btn_test.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				
				//mwebView.loadUrl("http://www.baidu.com");
				mwebView.loadUrl("javascript:callAnDialog('i am from Android!')");
			}
		});
	}
	private void innitViews(){
		mwebView=(WebView) findViewById(R.id.webView1);
		btn_test=(Button) findViewById(R.id.button1);
		
	}
	public class MyWebViewClient extends WebViewClient{
		//重写此方法,当发生跳转的时候用webView处理请求
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			mwebView.loadUrl(url);
			return true;
		}
	}
HTML代码
<html>
	<head>
		<title>Just for Testing!</title>
		<Script>
	        function callAnDialog(msgcontent){
				document.getElementById("br1").innerHTML=msgcontent;
				}
		</Script>
	</head>
	<body>
		<p id="br1">change the wolds!</p>
		<input type="button" value="Click me!" onClick="callAnDialog('I am from JS!')">
	</body>
</html>


点击最上面的Android控件按钮“AndroidCallJS”


那么JS调用Android的JAVA代码呢?(当然现在实现这个最火的框架莫过于Cordova就是原来的PhoneGap)

我们需要用一个接口来实现JS调用Android,其实这并不是一个真正的传统意义上的JAVA 接口。更加形象一点应该叫做信道或通道

mwebView.addJavascriptInterface(new TestInterface(this), "SayHi");

第一个参数是object类型的接口类。第二个参数是这个类的别名方便识别调用。还有很重要的一点就是接口类中的方法 ,如果你开发的应用的targetsdkVersion大于17(4.2)你必须在你要调用的方法前加上注解@JavascriptInterface不然会导致你的方法不可用。在JS中只要用类似于

 function callAnDialog(msgcontent){
				SayHi.showAnDialog(msgcontent);
				}

这样的代码就能实现对JAVA代码的调用了。

示例JAVA代码

public class MainActivity extends ActionBarActivity {

	WebView mwebView;
	Button btn_test;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		innitViews();
		
		WebSettings webSettings= mwebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		mwebView.setWebViewClient(new MyWebViewClient());
		mwebView.addJavascriptInterface(new TestInterface(this), "SayHi");
		mwebView.loadUrl("file:///android_asset/testJS.html");
		btn_test.setOnClickListener(new OnClickListener() {
		
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				
				//mwebView.loadUrl("http://www.baidu.com");
				mwebView.loadUrl("javascript:callAnDialog('i am from Android!')");
			}
		});
	}
	private void innitViews(){
		mwebView=(WebView) findViewById(R.id.webView1);
		btn_test=(Button) findViewById(R.id.button1);
		
	}
	public class MyWebViewClient extends WebViewClient{
		//重写此方法,当发生跳转的时候用webView处理请求
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			mwebView.loadUrl(url);
			return true;
		}
	}

	
}


public class TestInterface {
	Context mContext;
	
	public TestInterface(Context context){
		mContext=context;
	}
	
	@JavascriptInterface
	public void showAnDialog(String s){
		AlertDialog.Builder mbuilder=new Builder(mContext);
		mbuilder.setTitle("NOTICE!");
		mbuilder.setMessage(s);
		mbuilder.setPositiveButton("OK",new OnClickListener() {
			
			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				
			}
		});
		mbuilder.setPositiveButton("取消", new OnClickListener() {
			
			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				
			}
		});
		mbuilder.create().show();
	}
}


HTML代码

<html>
	<head>
		<title>Just for Testing!</title>
		<Script>
	        function callAnDialog(msgcontent){
				SayHi.showAnDialog(msgcontent);
				}
		</Script>
	</head>
	<body>
		<p id="br1">change the words!then change the world!</p>
		<input type="button" value="Click me!" onClick="callAnDialog('I am from JS!')">
	</body>
</html>


点击WebView中的Clickme!按钮就会有如下效果

当然用这种调用方法是有风险的,因为一旦你将你的借口暴露出来,就会有安全风险。但是安全问题在这不予赘述。




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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值