WebView與JavaScript的交互


目錄:


一、整體思路

二、簡單例子實現過程

       1、打開項目的asset目錄,創建新的文件test.html

       2、補充html代碼:添加供本地調用的js方法、調用本地方法的js代碼

       3、補充java代碼:本地加載js代碼、提供給js調用的方法

       4、效果圖


一、整體思路


       首先在項目assets目錄底下創建一個html文件或者直接自己寫好了然后復制到這個目錄底下,然后本地通過WebView將html加載到頁面進來,接着可以通過在html文件中增加js方法,然后本地java文件去調用js方法;也可以先在本地Java文件寫好提供給js調用的方法代碼,然后在html文件中調用java方法,從而實現WebView與JavaScript的相互調用。

畢竟我只是初學者,js只懂皮毛,因此下面做了一個很簡單的例子供大家參考。


二、簡單例子實現過程


1、打開項目的asset目錄,創建新的文件test.html

       (1)在項目文件處右鍵new->folder->Assets folder->Ok:

 

       (2)接着在assets目錄處右鍵new->new File,文件名可以為test.html:


2、補充html代碼:添加供本地調用的js方法、調用本地方法的js代碼

<html>
    <body>
    <br><br>
    <a><h1>js中調用本地方法</h1></a>
    <script>
        function sayHello()
        {
             alert("Hello")
         }
         var aTag = document.getElementsByTagName('a')[0];
         aTag.addEventListener('click', function(){
        //調用android本地方法
            control.toastMessage("js中調用本地方法");
             return false;
          }, false);
    </script>
    </body>
</html>

3、補充java代碼:本地加載js代碼、提供給js調用的方法

       (1)布局簡單如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#bbe4fb"
    android:orientation="vertical"
    android:paddingBottom="15dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="15dp"
    tools:context="com.example.suqh.webviewjs1.MainActivity">

    <Button
        android:id="@+id/btn_show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="本地調用js方法" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</LinearLayout>

 

       (2)MainActivity.java代碼如下:

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private Button btnShow;
    private WebView webView;

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

    private void initView() {
        btnShow = (Button) findViewById(R.id.btn_show);
        webView = (WebView) findViewById(R.id.webView);
    }

    private void initData() {
        webView.setWebChromeClient(new WebChromeClient());
        WebSettings set = webView.getSettings();
        //設置webview支持js
        set.setJavaScriptEnabled(true);
        //設置本地調用對象及其接口
        webView.addJavascriptInterface(new JsInteraction(), "control");
        webView.loadUrl("file:///android_asset/test.html");
    }

    private void initEvent() {
        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //本地調用js方法
                webView.loadUrl("javascript:sayHello()");
            }
        });
    }

    public class JsInteraction {
        @JavascriptInterface  
        public void toastMessage(String message) {   //提供給js調用的方法
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
        }
    }
}


4、效果圖

       點擊“本地調用js方法”按鈕(左下圖),點擊頁面上的文字“js調用本地方法”(右下圖):
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM