Android webview和js的相互调用

最新推荐文章于 2023-03-21 15:23:47 发布

qq_18147975

最新推荐文章于 2023-03-21 15:23:47 发布

阅读量431

点赞数 1

本文链接：https://blog.csdn.net/qq_18147975/article/details/50010445

版权

 function  javaToJs(params){
        	  alert(params); 
        }

最近发现公司很多项目用到了很多h5,有很多界面还需要使用js和android的相互调用.虽然说不难,但是对于刚接触的新手来说难免为遇到一些小问题.下面我就从h5代码和android代码简单的叙述一下.

先写一个H5的代码:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>js和android</title>
<script>
        function shareToPlat(paras){
            window.jsObj.shareToPlatJava(paras);
        }
        function  javaToJs(params){
        	  alert(params); 
        }
    </script>
<style>
#button {
	height: 100px;
	color: black;
}
</style>
</head>
<body>
	<button id="button" οnclick="shareToPlat('js调用java,我是传递的参数')">js调用android代码</button>
</body>


</html>

代码解释:

<pre name="code" class="html"> window.jsObj.shareToPlatJava(paras);

window代表当前的窗体,jsObj是在java代码中绑定的js对象, shareToPlatJava()是绑定的对象中需要调用的方法.

</pre><p><pre name="code" class="html"> function  javaToJs(params){
        	  alert(params); 
        }

这个是java调用js的方法,代码很简单只是简单的弹出一个提示框而已,并从Java代码中传递了一个参数过来.

下面看看android的代码

MainActivity:

package com.example.jsclickjava;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity implements OnClickListener {

    private WebView wv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wv = (WebView) findViewById(R.id.wv);
        findViewById(R.id.javaTojs).setOnClickListener(this);
        wv.getSettings().setJavaScriptEnabled(true);//很重要,表明支持js代码
        wv.addJavascriptInterface(new JsObject(this).onClickShare(), "jsObj");//
        wv.loadUrl("file:///android_asset/sharesdk.html");//加载本地文件的时候是放在assert文件夹内
        wv.setWebChromeClient(new WebChromeClient());//如果希望弹出对话框必须加上这句话
        
    }

    @Override
    public void onClick(View v) {
        wv.loadUrl("javascript: javaToJs('java调用js代码,我是传递的参数')");//调用Js代码
    }

}

JsObject:

package com.example.jsclickjava;

import android.app.Activity;
import android.app.Dialog;
import android.webkit.JavascriptInterface;

/**
 * 
 * @author chenhaigen
 *
 *  js和java代码相互调用的方法卸载这个类里面
 */
public class JsObject {

    private Activity activity;
    public JsObject(Activity activity) {
        this.activity=activity;
    }

    /**
     * @return 返回需要绑定到js的对象
     * 
     * 对象里面的方法名称一定要和js里面调用的方法名和参数一致
     */
    public  Object onClickShare(){

        return  new Object(){
            @JavascriptInterface/*这句代码很重要,4.2以上的版本必须加载这句代码*/
            public void shareToPlatJava(String params){
                Dialog dialog = new Dialog(activity);
                dialog.setCancelable(true);
                dialog.setCanceledOnTouchOutside(true);
                dialog.setTitle(params);
                dialog.show();
            }
        };    
    }

}

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"
    android:background="@android:color/white"
    tools:context="com.example.jsclickjava.MainActivity" >

    <WebView
        android:id="@+id/wv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
       />
    <Button
        android:id="@+id/javaTojs" 
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:text="java调用js代码并带参数"/>

</LinearLayout>

以上就是全部代码

几个常见的错误:

1:11-24 06:01:17.900: I/chromium(28017): [INFO:CONSOLE(9)] "Uncaught TypeError: Object [object Object] has no method 'shareToPlatJava'", source: file:///android_asset/sharesdk.html (9)

出现一般是由于你没有加响应的注解导致的:

在js调用java代码的时候在4.2版本以上需要加上:@JavascriptInterface 这个注解.

具体可以看这篇文章:

http://blog.csdn.net/zgjxwl/article/details/9627685

2:怎么都不弹出alert:

webview只是一个承载体,真正的渲染等还需要使用webviewChromClient去实现,所以只需要增加默认的WebChromeClient();就可以了

wv.setWebChromeClient(new WebChromeClient());

3:js无法调用Java代码:

首先确定你绑定的对象的别名.和你h5里面调用的是一模一样的,像我上面使用的别名就是"jsObj",所以我在h5里面写js的时候也必须是这个

 window.jsObj.shareToPlatJava(paras);

如果不一样就无法调用成功,在就是需要看下你抵用的方法有没有返回一个object对象回来,如果没有返回一个具体的绑定对象,也无法绑定成功

最后附上运行的效果图:

qq_18147975

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android webview和js的相互调用

function javaToJs(params){ alert(params); } 最近发现公司很多项目用到了很多h5,有很多界面还需要使用js和android的相互调用.虽然说不难,但是对于刚接触的新手来说难免为遇到一些小问题.下面我就从h5代码和android代码简单的叙述一下. 先写一个H5的代码: js和
复制链接

扫一扫