移动web相关学习（二）——WebView的学习（2）-CSDN博客

本文链接：https://blog.csdn.net/AndySun1992/article/details/46722405

书接上回。。。

首先来看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!按钮就会有如下效果