Android中 Js 扩展及交互

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 plain copy print ?
    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. }  
    public class WebViewDemo extends Activity { private WebView mWebView; private Handler mHandler = new Handler(); public void 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可调用的接口 public void clickOnAndroid() { mHandler.post(new Runnable() { public void run() { mWebView.loadUrl("javascript:wave()"); } }); } }, "demo"); mWebView.loadUrl("file:///android_asset/demo.html"); //调用的网页 } }
    [java] view plain copy print ?
    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 plain copy print ?
    1. demo.html:  
    demo.html:
    [html] view plain copy print ?
    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 plain copy print ?
    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>  

你可能感兴趣的:(JavaScript,java,html,android,扩展,binding)