Android中 Js 扩展及交互

来源：互联网发布：python socket通信框架编辑：程序博客网时间：2024/06/06 16:52

Android中的JS扩展有2中方式：

1.利用webkit提供的js扩展接口在 java层扩展，直接由app实现
优点：容易
缺点：跟app耦合，其他app不能使用该js扩展
2.利用npapi在cpp层扩展
优点：所有app都能共享该扩展
缺点：相对有难度

引擎主要分为3大模块
1.webkit                         平台相关代码，是对以下2模块的平台port封装
2.webcore                      实现layout排版；渲染；当检测html中含有js脚本时交由jscore处理
3.javascriptcore/v8       解析js脚本，并执行

jscore跟webcore的交互主要跟binding有关系。数据类型有map映射，一般的js扩展不涉及jscore的改动

通过Android webview实现与javascript函数相互调用

[java] view plaincopyprint?
1. public
2. class WebViewDemo extends Activity {
3. private WebView mWebView;
4. private Handler mHandler = new Handler();
5. public
6. void onCreate(Bundle icicle) {
7. super.onCreate(icicle);
8. setContentView(R.layout.webviewdemo);
9. mWebView = (WebView) findViewById(R.id.webview);
10. WebSettings webSettings = mWebView.getSettings();
11. webSettings.setJavaScriptEnabled(true); //webview支持javascript
12. mWebView.addJavascriptInterface(new Object() { //添加javascript可调用的接口
13. public
14. void clickOnAndroid() {
15. mHandler.post(new Runnable() {
16. public void run() {
17. mWebView.loadUrl("javascript:wave()");
18. }
19. });
20. }
21. }, "demo");
22. mWebView.loadUrl("file:///android_asset/demo.html"); //调用的网页
23. }
24. }
publicclass WebViewDemo extends Activity { private WebView mWebView; private Handler mHandler = new Handler(); publicvoid onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.webviewdemo); mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); //webview支持javascript mWebView.addJavascriptInterface(new Object() { //添加javascript可调用的接口 publicvoid clickOnAndroid() { mHandler.post(new Runnable() { public void run() { mWebView.loadUrl("javascript:wave()"); } }); } }, "demo"); mWebView.loadUrl("file:///android_asset/demo.html"); //调用的网页 }}
[java] view plaincopyprint?
1. </pre><pre name="code" class="java"><pre name="code" class="html">
</pre><pre name="code" class="java"><pre name="code" class="html">
[html] view plaincopyprint?
1. demo.html:
demo.html:
[html] view plaincopyprint?
1. <html>
2. <script language="javascript">
3. function wave() { //准备在activity里调用的函数
4. document.getElementById("droid").src="android_waving.png";
5. }
6. </script>
<html> <script language="javascript"> function wave() { //准备在activity里调用的函数 document.getElementById("droid").src="android_waving.png"; } </script>
[html] view plaincopyprint?
1. <body>
2. <a onClick="window.demo.clickOnAndroid()"> //调用activity的clickOnAndroid()函数
3. <imgidimgid="droid"src="android_normal.png"/><br>Click me!
4. </a>
5. </body>
6. l>