1. 程式人生 > >webView和js互動

webView和js互動

1.匯入網路許可權
2.View佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/path_et"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/load"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="載入"
            android:onClick="load"/>

    </LinearLayout>


    <WebView
        android:id="@+id/show_wb"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/call"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="呼叫js的方法"
        android:onClick="call"/>

</LinearLayout>

3.MainActivity程式碼

/*
webView建立流程:
		1. 新增許可權:AndroidManifest.xml中必須新增聯網許可權,否則會出Web page not available錯誤。
*/

public class MainActivity extends AppCompatActivity  {


    private WebView mWebView;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.show_wb);

        WebSettings settings = mWebView.getSettings();

        //支援h5
        settings.setJavaScriptEnabled(true);
        //是否可以縮放
        settings.setSupportZoom(true);

        mWebView.setWebViewClient(new WebViewClient(){

            /**
             * 給WebView加一個事件監聽物件(WebViewClient)並重寫shouldOverrideUrlLoading,
             * 可以對網頁中超連結按鈕的響應
             * 當按下某個連線時WebViewClient會呼叫這個方法,並傳遞引數:當前響應的的url地址
             */

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                // 此處可新增一些邏輯:是否攔截此url,自行處理
                // 下方2行程式碼是指在當前的webview中跳轉到新的url

                view.loadUrl(url);
                return true;
            }
        });

        // Android端定義一個方法,給js呼叫,
        // 使用webView物件,呼叫addJavascriptInterface方法(),
        // 第一個引數是寫一個類,在這裡面提供要暴露的方法,方法前最好加一個註解:@JavascriptInterface,
        // 第二個引數是標識字串,js通過這個標識,呼叫我們的方法.    在js裡面是這樣使用的:Android.showToast(content);
        mWebView.addJavascriptInterface(new Object(){

            @JavascriptInterface
            public void showToast (String content){
                Toast.makeText(MainActivity.this, "content", Toast.LENGTH_SHORT).show();
            }
        },"Android");

    }

    //呼叫js暴露的方法.格式固定:webView物件.loadUrl("javascript:js方法名(引數)");
    public void call(View v) {
        mWebView.loadUrl("javascript:changeInputValue('哈哈! ycf 很高興認識你,我叫如花')");
    }

    //這是本地的寫法
   // private static final String HTML_URL = "file:///android_asset/test.html";
    private static final String HTML_URL = "http://169.254.53.96:8080/test.html";

    //載入本地的檔案
    public void load(View v){
        mWebView.loadUrl(HTML_URL);
    }

}

在這裡插入圖片描述