Android与Javascript交互

Posted Android-kongqw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android与Javascript交互相关的知识，希望对你有一定的参考价值。

转载请说明出处！
作者：kqw攻城狮
出处：个人站 | CSDN

本篇参考Android与HTML+JS交互入门

效果图

G1

加载本地html

contentWebView = (WebView) findViewById(R.id.webview);
// 加载Assets下的Html
contentWebView.loadUrl("file:///android_asset/html/test.html");

启用javascript

contentWebView.getSettings().setJavaScriptEnabled(true);
contentWebView.addJavascriptInterface(this, "android");

Android调用Javascript的方法

Javascript写法

<script type="text/javascript">
    function jsFunction(){
         document.getElementById("content").innerHTML = "JS方法被调用";
    }
    function jsFunctionArg(arg){
         document.getElementById("content").innerHTML = "JS方法被调用并收到参数：<br/>" + arg;
    }
</script>

Android写法

// 调用JS的jsFunction方法
contentWebView.loadUrl("javascript:jsFunction()");
// 调用JS的jsFunctionArg方法
contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')");

Javascript调用Android的方法

Android方法

@JavascriptInterface
public void androidFunction() {
    Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show();
}
@JavascriptInterface
public void androidFunction(String text) {
    Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \\n" + text, Snackbar.LENGTH_SHORT).show();
}

Javascript调用

<input type="button" style="width:300px;height:50px;" value="JS调用Android方法" onclick="window.android.androidFunction()" />
<input type="button" style="width:300px;height:50px;" value="JS调用Android带有参数的方法" onclick="window.android.androidFunction('[JS传递过来的数据]')" />

Code

HTML

P1

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
        <script type="text/javascript">
            function jsFunction(){
                 document.getElementById("content").innerHTML = "JS方法被调用";
            }
            function jsFunctionArg(arg){
                 document.getElementById("content").innerHTML = "JS方法被调用并收到参数：<br/>" + arg;
            }
        </script>
    </head>
    <body>
        <h1>HTML页面</h1>
        <hr/>
        <h3><div id="content">|</div></h3>
        <hr/>
        <input type="button" style="width:300px;height:50px;" value="JS调用Android方法" onclick="window.android.androidFunction()" />
        <br/>
        <input type="button" style="width:300px;height:50px;" value="JS调用Android带有参数的方法" onclick="window.android.androidFunction('[JS传递过来的数据]')" />
    </body>
</html>

测试类

package com.kongqw.kqwandroidjsdemo;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView contentWebView;

    @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled", "AddJavascriptInterface"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        contentWebView = (WebView) findViewById(R.id.webview);
        // 加载Assets下的Html
        contentWebView.loadUrl("file:///android_asset/html/test.html");
        // 启用Javascript
        contentWebView.getSettings().setJavaScriptEnabled(true);
        contentWebView.addJavascriptInterface(this, "android");
    }


    @JavascriptInterface
    public void androidFunction() {
        Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void androidFunction(String text) {
        Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \\n" + text, Snackbar.LENGTH_SHORT).show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_js_function1) {
            // 调用JS的jsFunction方法
            contentWebView.loadUrl("javascript:jsFunction()");
            return true;
        } else if (id == R.id.action_js_function2) {
            // 调用JS的jsFunctionArg方法
            contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')");
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

以上是关于Android与Javascript交互的主要内容，如果未能解决你的问题，请参考以下文章

Android中Java与JavaScript之间交互（转）

Android之利用JSBridge库实现Html，JavaScript与Android的所有交互

android webview与 java与javascript的交互

Android WebView实现原生与JavaScript的交互

Android WebView实现原生与JavaScript的交互

WebViewJavascriptBridge实现js与android和ios原生交互