Android与JS交互问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android与JS交互问题相关的知识,希望对你有一定的参考价值。

android通过WebView加载js网页代码两者之间交互


public class MainActivity extends Activity {

private WebView webView;

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

webView = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = webView.getSettings();
webSettings.setjavascriptEnabled(true);//支持javascrip必须有
webSettings.setDefaultTextEncodingName("utf-8");
webView.addJavascriptInterface(this, "test");//对应js中的test.xxx,通过该标记来调用Android中的方法

webView.setWebChromeClient(new WebChromeClient() {});//要加上这句,否则部分机型无法弹出窗口

webView.loadUrl("http://192.168.3.4:8080/WebViewTest/test.html");//通过tomcat启动一个网页,当然本地的也行
//webView.loadUrl("file:///android_asset/test.html");//放到assets目录下即可
}

/**
 * js调用该方法
 * @param msg
 */
@JavascriptInterface
public void helloAndroid(String msg){

    Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}

/**
 * 调用js中的方法
 * @param v
 */
public void call(View v){

webView.post(new Runnable() {

        @Override
        public void run() {

                webView.loadUrl("javascript:callJS()");
                Log.v("zd", "callJS");
        }
    });
}
}


//xml布局,只有

<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" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="call"
                android:text="Call JS" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2" >
            <WebView
                android:id="@+id/webView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>


//js代码,其中通过前面声明的test来引用android中的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">

    function show() {
            test.helloAndroid("text/javascript");//Android是在Android端定义的
    }
    
    function callJS() {
        alert("HelloWebView, i‘m from js: ");
    }
    
</script>

<input type="button" name="提交" value="提交" onclick="show();"></input>

</body>
</html>


技术分享技术分享

















本文出自 “爬过山见过海” 博客,请务必保留此出处http://670176656.blog.51cto.com/4500575/1865182

以上是关于Android与JS交互问题的主要内容,如果未能解决你的问题,请参考以下文章

Android与JS交互问题

js与原生的交互

WKWebView与js交互中产生的内存泄漏

Android与HTML+JS交互入门

Android与js交互实例

WebViewJavascriptBridge Android端 乱码问题(webview与页面js交互 传输参数乱码)