如何在Android的WebView中使用本地的jQuery

最新推荐文章于 2024-06-23 21:52:08 发布

老黄的宠物

最新推荐文章于 2024-06-23 21:52:08 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： android 界面文章标签： webView jquery android js注入

本文链接：https://blog.youkuaiyun.com/qq_29598727/article/details/85159282

android 同时被 2 个专栏收录

11 篇文章

订阅专栏

界面

4 篇文章

订阅专栏

本文详细介绍如何在Android项目中集成jQuery库，包括下载jQuery文件、放置于assets文件夹、通过Java代码使WebView支持JavaScript，以及加载jQuery到WebView的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天遇到一个需要显示epub文件格式的项目，或许有人会知道epub文件解析出来的是html。
跑题了，我回来。

如何在Android中的jquery文件呢，首先，你需要先有一个jquery.js文件对吧，下载网址在这里https://jquery.com/download/，下载好jQuery文件后把文件复制粘贴到你的Android 项目的assets文件夹下

如果没有的话可以自己新建一个assets文件夹，我呢就习惯把js文件放在js文件夹里，所以我新建了一个js文件夹。

然后就是java代码层面的东西了，首先你要获取webview并且允许他使用js吧

            //获取webview对象，并设置好允许使用js
            mWebView= (WebView) findViewById(R.id.webView);
            WebSettings webSetting = mWebView.getSettings();
            webSetting.setJavaScriptEnabled(true);

然后就是准备html代码

 
            //这是我自己找的一些纯html代码，里面就一个<body>标签
            String strHtml1 = StringUtils.bytes2Hex(data);
            strHtml1 = "<body><div id=\"flipbook\">" + strHtml1 + "</div></body>";

后面这里就比较关键了，你需要给webview设置webViewClient，并重写里面的onPageFinished方法

            mWebView.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    
                    //获取上边assets文件夹里的jquery文件夹的字节流，并转为String形式
                    String jsStr = "";
                    try {
                        InputStream in = getAssets().open("js/jquery-3.3.1.min.js");
                        byte buff[] = new byte[1024];
                        ByteArrayOutputStream fromFile = new ByteArrayOutputStream();
                        do {
                            int numRead = in.read(buff);
                            if (numRead <= 0) {
                                break;
                            }
                            fromFile.write(buff, 0, numRead);
                        } while (true);
                        jsStr = fromFile.toString();
                        in.close();
                        fromFile.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    
                    //将上边获取到的js代码串加入到webView中
                    mWebView.loadUrl("javascript:" + jsStr);
                    
                    //测试代码
                    mWebView.loadUrl("javascript:" + "$(document).ready(function(){\n" +
                            " alert(\"Hii!!!!\");\n" +
                            "});");
                }
            });
            mWebView.setWebChromeClient(new WebChromeClient());
            mWebView.loadDataWithBaseURL(null, strHtml1, "text/html", "utf-8", null);

好了，运行，来，我们来看下效果，出现了弹出框