android app与h5交互

最新推荐文章于 2024-04-29 09:22:15 发布

轻风青阳

最新推荐文章于 2024-04-29 09:22:15 发布

阅读量1.8k

点赞数 2

文章标签： android java javascript html app

本文链接：https://blog.csdn.net/qq_28533013/article/details/51455129

版权

一，android本地调用js的方法

1,(包括有参和无参的情况）

首先我们从本地加载一个HTML，

    webview = (WebView) findViewById(R.id.webview);
        // 启用javascript
        webview.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html，JavaCallJSActivity.html 该文件大小写没问题
        webview.loadUrl("file:///android_asset/JavaCallJS1.html");
        //支持从html中弹出对话框
        webview.setWebChromeClient(new WebChromeClient());

接下来就是用java调用js的方法。

View.OnClickListener btnClickListener = new Button.OnClickListener() {
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button1://Java调用吴参数的js的函数
                    // 无参数调用
                    webview.loadUrl("javascript:javaCallJs()");
                    break;
                case R.id.button2:
                    // 调用有参数的js的函数
                    // 传递参数调用
                    webview.loadUrl("javascript:javaCallJswithargs(" + "'我是志高'" + ")");
                    break;
                case R.id.button3:
                    //调用 HTML 中的javaScript 函数 弹出对话框、
                    //webview.setWebChromeClient(new WebChromeClient()); 这行代码不写的话是弹不出来框的
                    webview.loadUrl("javascript:showMsg()");
                    break;
                default:
                    break;
            }

        }
    };

然后让我们看一下js代码

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<meta http-equiv="Content-Type"	content="text/html;charset=UTF-8">

    
	
<script type="text/javascript">
	function javaCallJs(){
	   
		 document.getElementById("content").innerHTML +=   
	         "<br\>java调用了js无参函数";
	}
      function javaCallJswithargs(arg){
		 document.getElementById("content").innerHTML +=   
	         ("<br\>java调用了js带参函数，并且参数是："+arg);
	}
	
	
   function showMsg(){
      alert("志高你好,我是来自javascript");
   }
   
   function showMsgInAndroid(){
      myjs.showMsg('hello in android!');
   }
	
</script>
	
	
</head>



		<body>
			   兄弟我是一个 html页面，这里有javascript代码，点击按钮，javascript会被调用 <br/>			
			<div id="content">  </div>
		</body>


</html></span></span>

2,Android调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。

Java调用js代码：

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

js函数处理，并将结果通过调用java方法返回

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

Java在回调方法中获取js函数返回值

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

可已得到result=3;

二，Js调用Android本地方法

1，添加一个类或对象，js可以访问该类或对象的方法，该类或对象可以调用js里的方法。

首先创建一个对象：

private Object getHtmlObject() {
        Object insertObj = new Object() {
           @JavascriptInterface
            public void JavacallHtml() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.loadUrl("javascript: alertMessage()");
                        Toast.makeText(JavaCallJSActivity2.this, "clickBtn",
                                Toast.LENGTH_SHORT).show();
                    }
                });
            }
         @JavascriptInterface
            public void JavacallHtml2() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.loadUrl("javascript: showFromHtml2('I'am the king of the word!!')");
                        Toast.makeText(JavaCallJSActivity2.this, "clickBtn2",
                                Toast.LENGTH_SHORT).show();
                    }
                });
            }
        };

        return insertObj;
    }

接下来使用webview对象的addJavascriptInterface方法

addJavascriptInterface方法有两个参数，第一个参数就是我们自己创建的对象，对象里面提供我们要提供给javascript访问的方法；第二个参数是访问我们在obj中声明的方法时候所用到的js对象，调用模式为window.interfaceName.方法名()或者是javascript:interfaceName.方法名() ;，如

mWebView.addJavascriptInterface(getHtmlObject(), "Android");
mWebView.loadUrl("file:///android_asset/JavaCallJS2.html");

接下来看看html里的代码

<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0032)http://localhost:8080/jsandroid/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store,no-cache">
    <meta name="Handheldfriendly" content="true">
    <meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes">
    <meta name="robots" content="all">
    <meta name="keywords" contect="doodle, mobile, doodlemobile, game, games">
    <meta name="description" content="Make People's Mobile Life More Connected Through Games.">

    <title>jsandroid_test</title>

    <script type="text/javascript" language="javascript">   
          
       
        function alertMessage() {
             alert("alert")
        }
        function showFromHtml(){  
            document.getElementById("id_input").value = "JS无参方法被调用了";
        }  
          
        function showFromHtml2( param ){  
            document.getElementById("id_input2").value = "JS有参方法被调用了 : " + param;   
        }  

    </script>
</head>


<body>

hello 今天星期五

<br>
<br>
<br>


<input id="id_input" style="width: 90%" type="text" value="请输入内容"/>
<br>
<input type="button" value="button1--Java调用JS无参方法" οnclick="javascript:Android.JavacallHtml()"/>

<br>
<br>
<br>

<input id="id_input2" style="width: 90%" type="text" value="请输入内容"/>
<br>
<input type="button" value="JavacallHtml-Java调用JS有参方法" οnclick="window.Android.JavacallHtml2()"/>

</body>
</html></span></span>

当我们点击button的时候，调用了Android里的JavacallHtml()方法，在JavacallHtml()方法里又调用了js里的方法：

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

最后弹出对话框。

奇怪的是，运行程序后并没有按照我的意愿弹出对话框。

查资料我手机是6.0系统，4.2以上系统必须在Android本地的方法加上注解@JavascriptInterface

还有一个地方需要注意

如果 addJavascriptInterface 方法里参数使用内部类，记得回调方法里操作涉及到界面的，记得放在handler里，因为必须在主线程操作。

2，url中附加的私有协议，后端发送给前端数据的约定

在网页跳转的时候【必须有跳转】，截获跳转地址Url，分析Url从而得知意图

mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                view.setVisibility(View.GONE);
                Toast.makeText(Activity.this, "网络服务不可用", Toast.LENGTH_SHORT).show();
            }
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                LogController.d("shouldOverrideUrlLoading=" + url);
                   //注意，下面的判断就是意图分析
                   Uri uri = Uri.parse(url);
                if ("http".equals(uri.getScheme())) {
                   //在这里做你想做的事情
                   return true;
                } else {
                    return false;
                }
            }
        });
    }

轻风青阳

关注

2
点赞
踩
3

收藏

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

1，java调用js首先我们从本地加载一个HTML， webview = (WebView) findViewById(R.id.webview); // 启用javascript webview.getSettings().setJavaScriptEnabled(true); // 从assets目录下面的加载html，J
复制链接

扫一扫