1. 程式人生 > >android中Webview與javascript的互動(互相呼叫)

android中Webview與javascript的互動(互相呼叫)

最近做android專案中遇到要在webview中做與js互動相關的東東,涉及到js中呼叫android本地的方法,於是查了資料整理了一下android和js互相呼叫的過程。如下demo,demo的主要實現過程如下:通過載入本地的html檔案(裡面有js指令碼),實現android本地方法和js中的互動。

第一步:

mainfest.xml中加入網路許可權

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

載入本地寫好的html檔案(定義好js中提供給android呼叫的方法 funFromjs(),和android提供給js呼叫的物件介面fun1FromAndroid(String name)

),放在 assets目錄下。

<body>
    <a>js中呼叫本地方法</a>
    <script>
    
    function funFromjs(){
    	document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //呼叫android本地方法
		myObj.fun1FromAndroid("呼叫android本地方法fun1FromAndroid(String name)!!");
        return false;
    }, false);
    </script>
    <p></p>
    <div id="helloweb"> 

	</div>
</body>

第三步:

實現android工程與js互動的相關程式碼

android主題程式碼:

 @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化
        initViews();

        //設定編碼
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        //支援js
        mWebView.getSettings().setJavaScriptEnabled(true);
        //設定背景顏色 透明
        mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
        //設定本地呼叫物件及其介面
        mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
        //載入js
        mWebView.loadUrl("file:///android_asset/test.html");
        
        //點選呼叫js中方法
        mBtn1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:funFromjs()");
                Toast.makeText(mContext, "呼叫javascript:funFromjs()", Toast.LENGTH_LONG).show();
            }
        });

    }
js呼叫的android物件方法定義
public class JavaScriptObject {
    Context mContxt;
    @JavascriptInterface //sdk17版本以上加上註解
    public JavaScriptObject(Context mContxt) {
        this.mContxt = mContxt;
    }

    public void fun1FromAndroid(String name) {
        Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
    }

    public void fun2(String name) {
        Toast.makeText(mContxt, "呼叫fun2:" + name, Toast.LENGTH_SHORT).show();
    }
}

效果圖:


。。。。

ps:據網友反應,在Android4.4以上不支援js的一些方法了,上面的思想大概是這樣,要實用的大家可以參考這個開源專案:

https://github.com/lzyzsd/JsBridge