WebView与JS的简单交互

如今App里嵌套JS界面已经很普遍,是时候来了解JS与Android源代码的交互了。

1.Html,现在main下新建assets包,然后把html文件放在里面:




    



红线下面的为WebView的内容

显示内容(这个是一级标题)



2.xml布局文件,这里布局很简单,直接上代码:




    
3.MainActivity:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button btn1;
    private Button btn2;
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        btn1 = (Button) findViewById(R.id.btn1);
        btn1.setOnClickListener(this);
        btn2 = (Button) findViewById(R.id.btn2);
        btn2.setOnClickListener(this);
        mWebView = (WebView) findViewById(R.id.webView);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.addJavascriptInterface(MainActivity.this,"android");

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn1:
                mWebView.loadUrl("javascript:javacalljs()");
                break;
            case R.id.btn2:
                mWebView.loadUrl("javascript:javacalljswith('Java调用JS带参方法')");
                break;
        }
    }


    /**
     * JS调用java的方法
     */
    //由于安全原因 需要加 @JavascriptInterface
    //无参
    @JavascriptInterface
    public void startFunction(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this,"hello",Toast.LENGTH_SHORT).show();
            }
        });
    }

    //带参方法
    @JavascriptInterface
    public void startFunction(final String text){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                new AlertDialog.Builder(MainActivity.this).setMessage(text).show();
            }
        });
    }
}

其实很简单,就是一个方法的调用,只是调用的方法不同而已。

Demo下载

你可能感兴趣的:(Android)