Android ---- WebView与JavaScript交互调用(1)

最新推荐文章于 2024-09-17 13:42:29 发布

andyhuabing

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量4.7k

点赞数 2

分类专栏： Android系统框架学习文章标签： javascript android html layout java browser

本文链接：https://blog.csdn.net/andyhuabing/article/details/7590481

版权

Android系统框架学习专栏收录该内容

102 篇文章 12 订阅

订阅专栏

现在很多的手机应用，都可能会直接嵌入一个web页面。这样做的好处：一个是功能更新方便，维护起来容易，只需要维护服务器的页面即可，不需要更新客户端；另一个是功能通用，不仅android可以用，ios也可以用，symbian也可以直接用。而且WebView对Javascript的支持很强，但也没有亲身编程测试一下，所有这里举个例子说明一下如何在Javascript中调用java中函数

1、创建一个android 工程 TestWebView

2、继承自 Activity

public class TestWebView extends Activity {
	private WebView mWebView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mWebView = (WebView) findViewById(R.id.htmlview);

		WebSettings webSettings = mWebView.getSettings();
		
		// 是否允许在webview中执行javascript
		webSettings.setJavaScriptEnabled(true);

		// 绑定java对象到JavaScript中，这样就能在JavaScript中调用java对象，实现通信。
		// 这种方法第一个参数就是java对象，第二个参数表示java对象的别名，在JavaScript中使用
		 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

		 // webview加载本地html代码，注意本地html代码必须放在工程assets目录下，然后通过
		// file:///android_asset/demo.html访问
		mWebView.loadUrl("file:///android_asset/demo.html");
	}
	
	public class DemoJavaScriptInterface {
		public DemoJavaScriptInterface() {

		}

		public int mydata() {
			Log.i("TEST","mydata.....");
			return 0;
		}
	}
}




3、修改 main.xml 文件如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	>

	<WebView android:id="@+id/htmlview"
		android:layout_centerHorizontal="true" android:layout_centerVertical="true"
		android:layout_marginLeft="0px" android:layout_width="fill_parent"
		android:layout_height="fill_parent" />

</RelativeLayout>


4、在assets目录下，新建一个html文件：demo.html，使用JAVAScript代码编写


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
</head> 
    <body>this is web html
    <div id="output" >test</div>
        <input type="submit" value="buttons" 
        οnclick="document.getElementById('output').innerHTML=window.demo.mydata()"/> 
    </body> 
</html>


注意上面 οnclick="document.getElementById('output').innerHTML=window.demo.mydata()"

直接调用 window.demo.mydata() 的方法



ok, 轻松就将代码写完，现在补充说明一下用到的知识点：
先看SDK API函数介绍：


public void addJavascriptInterface (Object obj, String interfaceName)



 
 

  
  
Use this function to bind an object to JavaScript so that the methods can be accessed from JavaScript.

  
  
IMPORTANT:

  
  
Using addJavascriptInterface() allows JavaScript to control your application. This can be a very useful feature or a dangerous security issue. When the HTML in the WebView is untrustworthy (for example, part or all of the HTML is provided by some person or
 process), then an attacker could inject HTML that will execute your code and possibly any code of the attacker's choosing.

Do not use addJavascriptInterface() unless all of the HTML in this WebView was written by you.

The Java object that is bound runs in another thread and not in the thread that it was constructed in.

  
  


  
  


 
 

 
 

  
  
Parameters

  
  
obj 
The class instance to bind to JavaScript, null instances are ignored.

interfaceName 
The name to used to expose the instance in JavaScript.

 
 




通过addJavascriptInterface(Object obj,String interfaceName)这个方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是
 interfaceName（demo），作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。



再补充下在开发过程中应该注意几点：
1、AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web
 page not available错误
2、如果访问的页面中有Javascript，则webview必须设置支持Javascript。
 webview.getSettings().setJavaScriptEnabled(true); 
3、如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象。
mWebView.setWebViewClient(new
 WebViewClient(){
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				view.loadUrl(url); 
				return true;
			}
		});

4、如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
			mWebView.goBack();
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}


5、addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用Handler的目的。如此上面的代码则可以修改成如下即可，利用Handler发送消息进行处理：

        public int mydata() {
		mHandler.post(new Runnable() {
			public void run() {
				Log.i("TEST", "mydata.....");
			}
		});
		return 0;
	}