android与H5之间的调用_安卓后台服务定时调用h5-CSDN博客

本文链接：https://blog.csdn.net/lenovo_g410/article/details/72582235

android与H5之间的调用
好久好久都没写博客了，最近一段很长的时间都很忙，然后状态也很不好，终于有时间写写博客了，今天就写下 android 与H5之间的调用吧！ 内容也是蛮简单的。
目录如下：
（1）WebView
（2）android代码中调用HTML中的JavaScript的方法
（3）HTML中JavaScript调用android代码/或者方法
（1）说到WebView，网上其他博客有大量的讲解，我这里的话就简单列出代码就行了。（这里有个全面讲解WebView的 http://blog.csdn.net/carson_ho/article/details/52693322 ）

WebView webView = new WebView(this);
WebSettings webSettings = webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());

//加载网络资源
webView.loadUrl("https://www.baidu.com");
//显示页面
setContentView(webView);

其中new WebViewClient()，你自己可以写一个类去继承 WebViewClient，然后里面会有很多方法，比如：

onPageStarted()//开始载入页面调用的方法

onPageFinished()//在页面加载结束时调用的方法

onLoadResource()//在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次

可以参考上面的博客连接。

（2）android代码中调用HTML中的JavaScript的方法

接着重点讲，java代码中调用页面JavaScript的方法：

现在，我在Java代码中用WebView打开了一个HTML页面，然后，我想在Java代码中把一个值传递到HTML页面并显示，就要在Java代码中调用JavaScript的方法，然后页面就会执行JavaScript了，一句话，java代码调用JavaScript中的方法。

现在就举个列子，首先我在一个Activity中的TextView输入名字，然后点击一个按钮跳转到HTML页面，然后html页面显示刚才输入的名字。

OK！首先列出HTML页面（比较简单）

<html>
<head>
    <script type="text/javascript">
	//一个叫做javaCallJs 的JS方法
	function javaCallJs(arg){
		 document.getElementById("content").innerHTML = ("你好！"+arg );
	}

    </script>

</head>

<body>

<p style="font-size:80px;" id="content"></p>

</body>
</html>

OK！现在写Activity的代码

public class JavaAndJSActivity extends Activity implements View.OnClickListener {
    private EditText name;
    private Button btnLogin;
    private WebView webView;
	
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        findViews();
    }

    private void findViews() {
        setContentView(R.layout.activity_java_and_js);
        name= (EditText) findViewById(R.id.et_name);
        btnLogin = (Button) findViewById(R.id.btn_login);
        btnLogin.setOnClickListener(this);
        initWebView();//初始化WebView
    }
	
    private void initWebView() {
        webView = new WebView(this);
        WebSettings webSettings = webView.getSettings();
        //设置支持javaScript脚步语言
        webSettings.setJavaScriptEnabled(true);
        //支持缩放按钮-前提是页面要支持才显示
        webSettings.setBuiltInZoomControls(true);
        //设置客户端-不跳转到默认浏览器中
        webView.setWebViewClient(new WebViewClient());
        //加载本地的html，就是上面的html页面
        webView.loadUrl("file:///android_asset/call.html");//我是用的是android studio，所以我把html文件放在assets里面
    }

    @Override
    public void onClick(View v) {
        if (v == btnLogin) {
            goToHtml();
        }
    }
	
    private void goToHtml() {
	String name= etNumber.getText().toString().trim();
       	webView.loadUrl("javascript:javaCallJs(" + "'" + name+ "'" + ")");//调用html里面JavaScript的方法
	setContentView(webView);
    }
	
    
}

这里的重点就是这个：

webView.loadUrl("javascript:javaCallJs(" + "'" + name+ "'" + ")");//调用html里面JavaScript的方法

这里是工程目录

对了，要记住添加网络的权限，在清单文件里面。

运行效果如下，我输入boy显示

（3）HTML中JavaScript调用android代码/或者方法

ok，接下来就是在html中，使用JavaScript方法调用android的方法。

展示HTML代码，很简单，就是在之前的html中加入一行代码，

加一个按钮

<input type="button" value="点击" οnclick="window.Android.showToast()" />

<html>
<head>
    <script type="text/javascript">
	
	function javaCallJs(arg){
		 document.getElementById("content").innerHTML = ("你好！"+arg );
	}

    </script>

</head>


<body>

<p style="font-size:80px;" id="content">小白</p>

<input type="button" value="点击" οnclick="window.Android.showToast()" />

</body>
</html>

Activity的代码，

public class JavaAndJSActivity extends Activity implements View.OnClickListener {
    private EditText etNumber;
    private Button btnLogin;
    private WebView webView;
	
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        findViews();
    }

    private void findViews() {
        setContentView(R.layout.activity_java_and_js);
        etNumber = (EditText) findViewById(R.id.et_number);
        btnLogin = (Button) findViewById(R.id.btn_login);
        btnLogin.setOnClickListener(this);
        initWebView();//初始化WebView
    }
	
	private void initWebView() {
        webView = new WebView(this);
        WebSettings webSettings = webView.getSettings();
        //设置支持javaScript脚步语言
        webSettings.setJavaScriptEnabled(true);
        //支持缩放按钮-前提是页面要支持才显示
        webSettings.setBuiltInZoomControls(true);
        //设置客户端-不跳转到默认浏览器中
        webView.setWebViewClient(new WebViewClient());
        //设置支持js调用java
        webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
        //加载本地的html，就是上面的html页面
        webView.loadUrl("file:///android_asset/call.html");//我是用的是android studio，所以我把html文件放在assets里面
    }

    @Override
    public void onClick(View v) {
        if (v == btnLogin) {
            goToHtml();
        }
    }
	
    private void goToHtml() {
	String numebr = etNumber.getText().toString().trim();
        webView.loadUrl("javascript:javaCallJs(" + "'" + numebr + "'" + ")");
        setContentView(webView);
    }
	
    /**
     * js可以调用该类的方法
     */
    class AndroidAndJSInterface{
        @JavascriptInterface
        public void showToast(){
            Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
        }
    }
}

这里的重点就是这个，在初始化WebView的时候，使用该方法

//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

这里 new AndroidAndJSInterface() 是下面写的内部类

/**
     * js可以调用该类的方法
     */
    class AndroidAndJSInterface{
        @JavascriptInterface
        public void showToast(){
            Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
        }
    }

OK，显示效果如下：当点击点击按钮的时候，就弹出框！