Android WebView使用以及与JavaScript进行交互实例

来源：互联网发布：什么源码值得读知乎编辑：程序博客网时间：2024/06/05 02:39

最近项目中使用到了WebView，所有就深入研究了Webview的使用以及与JavaScript进行交互的问题。经过研究，自己也做了一个综合性的例子，以此来记录自己的学习成果。此例子主要实现了WebView的简单使用以及Android与Js进行交互的问题。

第一：WebView的使用

1.WebView使用过程中需要网络权限，所以第一步要在清单文件声明此权限。

 <uses-permission android:name="android.permission.INTERNET"></uses-permission>

2.在布局文件中添加WebView控件，或者通过JAVA代码之间实例化Webview，此Demo是通过布局文件实现的。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="match_parent"        /></RelativeLayout>

3.对WebView进行相关设置，具体Api在代码中有注释，再此不在详细叙述。

package cn.chinaiptn.webviewdemo;import android.app.Activity;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.KeyEvent;import android.view.View;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;public class WebViewDemoActivity extends AppCompatActivity {    private WebView webview;    private WebSettings webSettings;    private Activity mActivity;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_webviewdemo);        mActivity = WebViewDemoActivity.this;        webview = (WebView) findViewById(R.id.webview);        webview.loadUrl("http://www.baidu.com");        WebSettings webSettings = webview.getSettings();        //设置支持Javascript        webSettings.setJavaScriptEnabled(true);        webSettings.setAllowFileAccess(true);        webSettings.setAllowFileAccessFromFileURLs(true);        //允许放到或者缩小        webSettings.setSupportZoom(true);        //隐藏webview缩放按钮        webSettings.setDisplayZoomControls(false);        // 为图片添加放大缩小功能        webSettings.setUseWideViewPort(true);        //自适应屏幕        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);        webSettings.setLoadWithOverviewMode(true);        //取消滚动条        webview.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);        //设置打开别的url是不适用系统浏览器        webview.setWebViewClient(new MyWebviewClient());    }    class MyWebviewClient extends WebViewClient {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            view.loadUrl(url);            return true;        }    }    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        //按下返回键的处理        if (webview.canGoBack() && keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {            webview.goBack();            return true;        }        return super.onKeyDown(keyCode, event);    }}

第二：Android 调用JS代码

这里主要分两部分介绍，调用有参函数和调用无参数函数。

1.调用无参数函数。

（1）编写HTML代码，并放到assets目录下，相关html代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title id="title">Nativetojs</title>        <script type="text/javascript">            function javacalljs(){                 document.getElementById("nativetojs").innerHTML =                     "<br\>JAVA调用了JS的无参函数";            }        </script>    </head>    <body >    <p>安卓调用js</p>    <div style="margin-top: 20px;margin-left: 20px">        <div id="nativetojs"></div>    </div>    </body></html>

（2）在JAVA代码中进行调用：

加载本地html代码：

webview.loadUrl("file:///android_asset/nativetojs.html");

设置时间监听，调用JS代码（此处一定要确保函数名称与JS中的函数名称一致）：

        btn_tojs.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                webview.loadUrl("javascript:javacalljs()");            }        });

（3）效果图如下：

2.安卓调用有参函数

（1）编写HTML代码，并放到assets目录下，相关html代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title id="title">Nativetojs</title>        <script type="text/javascript">            function javacalljswith(arg){                 document.getElementById("nativetojs").innerHTML = "<br\>JAVA调用了JS的有参函数"+arg;            }        </script>    </head>    <body >    <p>安卓调用js,包含参数</p>    <div style="margin-top: 20px;margin-left: 20px">        <div id="nativetojs"></div>    </div>    </body></html>

（2）在JAVA代码中进行调用：

加载本地html代码：

 webview.loadUrl("file:///android_asset/nativetojswithparam.html");

设置时间监听，调用JS代码（此处一定要确保函数名称与JS中的函数名称一致，并确保字符串两端加上引号，否则会执行不到JS）：

        btn_tojs.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                String content = ed_content.getText().toString().trim();                webview.loadUrl("javascript:javacalljswith("+"'"+content+"'"+")");            }        });

（3）运行效果如下：

第三：JS调用Android代码

（1）编写HTML代码，并放到assets目录下（确保onclick下的别名和方法名与JAVA代码中一致），相关html代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title id="title">JStoNative</title>    </head>    <body >    <p style="font-size:34px">JS调用安卓代码</p>    <div style="margin-top: 20px;margin-left: 20px">       <input type="button"  value="我要调用安卓代码啦。" onclick="jstoandroid.startFunction()"  /></br>        <input type="button"  value="我要调用安卓代码啦，切换页面" onclick="jstoandroid.updateActivity()"  />    </div>    </body></html>

（2）在JAVA代码进行相关实现

    //由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface    //JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应    @JavascriptInterface    public void startFunction(){        runOnUiThread(new Runnable() {            @Override            public void run() {                Toast.makeText(JsToNativieActivity.this, "hahahha", Toast.LENGTH_SHORT).show();            }        });    }    @JavascriptInterface    public  void updateActivity(){        runOnUiThread(new Runnable() {            @Override            public void run() {                Intent intent=new Intent(JsToNativieActivity.this,MainActivity.class);                startActivity(intent);            }        });    }

到此，Webview的简单使用以及与JS的交互已经介绍完毕，如果有不正确出之处，欢迎讨论！

点击去下载源码

0 0