logo标签列表

从资产文件夹加载CSS和JS

androidhtml
3

我已经搜索了好几个小时，虽然有类似的情况，但我觉得我的问题有些不同。我有一个网站，我要将其加载到 Webview 中。

    setContentView(R.layout.activity_main);
    WebView myWebView = (WebView) findViewById(webview);
    myWebView.loadUrl("http://my-website.com/index.php");
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    myWebView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            view.loadUrl(request.toString());
            return true;
        }
    }); }

网站加载正常，没有问题。我正在尝试做的事情是（因为有很多CSS和JS文件），从Android应用程序的资产文件夹中加载这些文件 - 我正在尝试使页面加载更快。

<link href="file:///android_asset/css/keyframes.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/materialize.min.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/swiper.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/swipebox.min.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/style.css" rel="stylesheet" type="text/css">

目前它没有加载任何被这样调用的CSS文件。 我真的不想因为一个简单的问题而打扰任何人，只是一直困扰着我，而我不擅长Java。 此外，请注意：这不是本地HTML页面，而是从远程服务器加载的PHP页面。

如果您将HTML的副本暂时放在“assets /”中，并从那里将其加载到“WebView”中，它是否有效？ - CommonsWare
"file:///。这不应该是"file://吗？ - greenapps
尝试过了，我遇到了同样的问题。没有任何文件被加载。@greenapps - Jimmy Canadezo
资产中有一个 css 文件夹吗？ - greenapps
有的。有CSS、JS和图片。@greenapes - Jimmy Canadezo
1
如果您想要真正的性能，缓存输出并将其放置在精确请求的位置上。通过对不存在的文件rewrite到index.php，可以一次完成编译，然后将输出写入例如/assets/asdugh3e9adHASH.css （/assets/asdugh3e9adHASH.css > index.php?path=$1）唯一标识符必须通过收集文件修改时间/文件名并进行哈希处理来确定。这样，即使在加载现有资产集时，也不需要执行PHP。 - twicejr
4个回答
1
我不是移动开发者，但我是一名网页开发者，曾为我的移动开发同事编写了一些webview页面。
据我所知，在webview中无法访问文件系统。但是，您可以让您的应用程序缓存css/js文件。
viewer.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT)

以下是来自stackoverflow上的答案(这里是有关缓存设置的文档)

使用默认的缓存设置，CSS / JS文件在第一次下载后就会像在普通浏览器中一样被缓存。因此，你可以简单地使用

<link href="https://your.domain/css/style.css" rel="stylesheet" type="text/css">

为了实现更快的页面加载，您所期望的。
0
0

如果你想从本地资源文件夹加载CSS和JS，那么首先需要下载网页，然后按以下方式在Web浏览器中传递：

使用以下方法下载数据：

public String getHtmlContent(String urlToLoad) {
        String outputStr = "";
        BufferedReader inputString = null;
        try {
            URL urlLoad = new URL(urlToLoad);
            inputString = new BufferedReader(new InputStreamReader(urlLoad.openStream()));
            String str;
            while ((str = inputString.readLine()) != null) {
                outputStr += str;
            }
        } catch (MalformedURLException e) {
        } catch (IOException e) {
        } finally {
            if (inputString != null) {
                try {
                    inputString.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return outputStr;
    }

然后，您需要将js和css文件放置在asset文件夹中，然后在网页中定义一个类似以下的URL。
<script src="file:///android_asset/jquery.min.js" type="text/javascript"></script>

您需要将所有的URL设置为file:///android_asset/，然后再加上您的CSS或JS名称。

完成所有操作后，您需要像下面这样使用WebView来设置您的网页内容：

String webData = getHtmlContent("http://webisteaddress.com/index.html");
    mWebView.loadDataWithBaseURL("file:///android_asset/", webData, "text/html", "utf-8", "");
0
使用此函数在您的WebView中加载CSS和JavaScript： 在WebViewClient上的onCreate()中注入CSS和JavaScript：
     webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url)
        {
            injectJavaScript(view);
            injectCSS();

         }

创建两种方法以注入JavaScript和CSS（来自res/raw）：
    private boolean injectJavaScript(WebView view){
        view.loadUrl("javascript:(function() { " +
            "var head = document.getElementsByTagName('header')[0];"
            + "head.parentNode.removeChild(head);" + "console.log('true');"+
            "})()");
        view.loadUrl("javascript:(function() { " +
            "var footer = document.getElementsByTagName('footer')[0];"
            + "footer.parentNode.removeChild(footer);" +
            "})()");
        view.loadUrl("javascript:(function() { " +
            "var nav = document.getElementsByTagName('nav')[0];"
            + "nav.parentNode.removeChild(nav);" +
            "})()");
        view.loadUrl("javascript:(function() { " +
            "var set = document.getElementsByClassName('banner');"
            + "set[0].style.margin = '0px';" +
            "})()");
    return true;
    }
    private void injectCSS() {
    try {
        InputStream inputStream = getResources().openRawResource(R.raw.css);
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
        wv1.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");

    } catch (Exception e) {
        e.printStackTrace();
    }
}

这对我非常有效。

你能分享一下你的CSS文件吗？我正在尝试替换通过URL在Webview中加载的实际字体。我已经将自己的字体添加到资产中，并尝试像你一样唤醒我的CSS，但我没有成功。请帮忙。 - Uzair Qaiser
对我来说不起作用，不知道为什么。 - famfamfam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接