Android与Html&JS交互

最新推荐文章于 2021-07-02 18:50:40 发布

luyouxin

最新推荐文章于 2021-07-02 18:50:40 发布

阅读量754

点赞数

分类专栏： android 文章标签： android html5

本文链接：https://blog.csdn.net/luyouxin/article/details/50923008

版权

android 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最近的项目中有个网上商城的功能，最后决定用Html5来实现，这样的话Android这边就能省去很多时间去实现这个功能，只需要与做与Html&JS交互就行！
下面介绍下怎么Android与Html&JS之间的交互，先上html5实现的简单界面和代码：
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">

        function method1(){
            var  value='fdsaf';
            document.getElementById('get_result1').value=value;
        }

        function method2(arg){
            document.getElementById('get_result2').value=arg;
        }


    </script>
</head>
<body>
<h1>
    Android与JS交互
</h1>
<h2> Android调用了JS里面的method1方法</h2>
<input id="get_result1" type="text"/>
<h2>Android调用了JS里面的method2方法</h2>
<input id="get_result2" type="text"/>
<input type="submit" value="点击调用java代码" onclick=" window.android.method3()"/>
<input type="submit" value="点击调用java代码并传递参数"
       onclick="window.android.method4('JS调用了Android带参数的方法')"/>
</body>
</html>

Android通过点击Button以后会在html5界面上的输入框中输入文字信息。
JS调用Android方法：
设置webView的addJavascriptInterface方法，该方法有两个参数，第一个参数为被绑定到js中的类实例，第二个参数为在js中暴露的类别名，在js中引用java对象就是用这个名字，在这个demo中在js中暴露的类别名是android。这样js调用Android的方法是window.android.method3()，这样就可以调用Android里面的方法了。

public class MainActivity extends Activity implements View.OnClickListener {
    private Button btn1, btn2;
    private WebView webView;

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

    @JavascriptInterface
    private void initView() {
        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        webView = (WebView) findViewById(R.id.webview);
        //因为访问的页面中有 Javascript，则 webview 必须设置支持 Javascript ，否则显示空白页面。
        webView.getSettings().setJavaScriptEnabled(true);、
        //第一个参数为被绑定到js中的类实例，第二个参数为在js中暴露的类别名，在js中引用java对象就是用这个名字
        webView.addJavascriptInterface(MainActivity.this, "android");
         //加载asset下的Android.html,如果是访问网络上的资源需要在AndroidManifest.xml中加上"android.permission.INTERNET"
        webView.loadUrl("file:///android_asset/Android.html");
    }

    private void setListener() {
        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn1:
                webView.loadUrl("javascript:method1()");
                break;
            case R.id.btn2:
                String url = "javascript:method2" + "('传个参数给js')";
                webView.loadUrl(url);
                break;
            default:
                break;
        }
    }
    @JavascriptInterface
    public void method3() {
        Toast.makeText(MainActivity.this, "运行了Method3", Toast.LENGTH_SHORT).show();
    }
    @JavascriptInterface
    public void method4(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}

webview中调用js的方法很简单直接webView.loadUrl(“javascript：method1()”);method1()是在javascript中定义的方法名，这样就简单的完成了Android与Html5的交互了。
这里写图片描述
在这中间有个细节地方如果不注意的话，在js调用Android方法的时候一直不成功，打印的信息：

 "Uncaught TypeError: undefined is not a function", source: file:///android_asset/Android.html (29)

这是因为我的targetSdkVersion大于17。
在targetSdkVersion大于17的时候JS只能访问带有 @JavascriptInterface注解的Java函数而当targetSdkVersion<17时没问题。

luyouxin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android与Html&JS交互

最近的项目中有个网上商城的功能，最后决定用Html5来实现，这样的话Android这边就能省去很多时间去实现这个功能，只需要与做与Html&JS交互就行！下面介绍下怎么Android与Html&JS之间的交互，先上html5实现的简单界面和代码： <!DOCTYPE html><html><head> <script type="text/javascript"> f
复制链接

扫一扫