android与js交互

最新推荐文章于 2024-05-14 08:50:37 发布

猛虎细嗅o蔷薇

最新推荐文章于 2024-05-14 08:50:37 发布

阅读量439

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/gly742279097/article/details/45075143

版权

Android 专栏收录该内容

91 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;"><html>
    <script language="javascript">
        /* This function is invoked by the activity */
        function wave() {        
           document.getElementById("droid").src="android_waving.png";
          
        }
    </script>
    <body>
        <!-- Calls into the javascript interface for the activity -->
        <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;" >
                <img id="droid" src="android_normal.png"/><br><br>
                Click me!
        </div></a>
    </body>
</html></span>

<span style="font-size:18px;"><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:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

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

</LinearLayout></span>

<span style="font-size:18px;">package com.example.webviewdemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

@SuppressLint("JavascriptInterface")
public class MainActivity extends Activity {

	private static final String LOG_TAG = "WebViewDemo";

    private WebView mWebView;

    private Handler mHandler = new Handler();

    @SuppressLint("SetJavaScriptEnabled")
	@Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webView1);

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);

        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Log.d(LOG_TAG, message);
                result.confirm();
                return true;
            }
        });

        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

        mWebView.loadUrl("file:///android_asset/web.html");
    }

    final class DemoJavaScriptInterface {

        DemoJavaScriptInterface() {
        }

        @JavascriptInterface
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    mWebView.loadUrl("javascript:wave()");
                }
            });

        }
    }
}
</span>

在在运行的时候遇到个问题

android中webView中Js不执行是因为版本的问题，大于等于17后就需要对调用方法加注解才会执行。

解决方法如下：

其实很简单，就是在你的js调用的方法上面加@JavascriptInterface

如何交互？

1，android如何调用js。

调用形式：

mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

,2，js如何调用android。

调用形式：

<a onClick="window.demo.clickOnAndroid()">

代码中的“demo”是在android中指定的调用名称，即

 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

代码中的clickOnAndroid()是“demo”对应的对象：new DemoJavaScriptInterface() 中的一个方法。

demo的理解。

现在你一定了解了android和js的交互了。是时候分析一些demo了，根据上面讲的你也应该比较清楚了。具体交互流程如下：

1，点击图片，则在js端直接调用android上的方法clickOnAndroid()；

2，clickOnAndroid()方法（利用线程）调用js的方法。

3，被上步调用的js直接控制html。

猛虎细嗅o蔷薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android与js交互

/* This function is invoked by the activity */ function wave() { document.getElementById("droid").src="android_waving.png"; } <
复制链接

扫一扫

专栏目录