Android与Javascript交互

效果图

Android与Javascript交互_第1张图片

加载本地Html

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

启用Javascript

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

Android调用Javascript的方法

JavaScript写法

<script type="text/javascript">
    function jsFunction(){
         document.getElementById("content").innerHTML = "JS方法被调用";
    }
    function jsFunctionArg(arg){
         document.getElementById("content").innerHTML = "JS方法被调用并收到参数:
"
+ arg; }
script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Android写法

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

Javascript调用Android的方法

Android方法

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

Javascript调用

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

Code

HTML

Android与Javascript交互_第2张图片

<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方法被调用并收到参数:
"
+ 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

测试类

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交互)