javascript - 如何使我的 .css 和 .js 文件与 Android 上的 WebView 中加载的 html 代码一起使用

标签 javascript android html css webview

因此,我用 html 制作了一个简单的待办事项列表,并且与 .html 文件关联的 .css 和 .js 文件在浏览器中正常工作。现在我正在尝试让它作为 Android 应用程序在 WebView 中工作。我正在使用 AndroidStudio 并创建了一个 Assets 文件夹并向其中添加了我的 .css 和 .js 文件。我将所有 html 代码复制到一个字符串中并使用 loadWithBaseURL。只有我的 html 在 Web View 中加载,没有任何样式或功能。有人可以指出我正确的方向来使其正常工作吗?

enter image description here

package com.android.todowebview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.app.Activity;

public class MainActivity extends Activity {

    private WebView browser;

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

        browser = (WebView) findViewById(R.id.webView1);
        browser.getSettings().setJavaScriptEnabled(true);

        String todoHtml = "<html>\n" +
                "  <head>\n" +
                "    <title>ToDoList</title>\n" +
                "    <meta http-equiv=\"Content-Type\" content=\"text/html\" charset=\"UTF-8\"/>\n" +
                "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n" +
                "    <meta name=\"apple-mobile-web-app-cabable\" content=\"yes\"/>\n" +
                "    <link rel=\"stylesheet\" href=\"styles.css\"\n" +
                "  </head>\n" +
                "  <body>\n" +
                "    <head>\n" +
                "      <h1>\n" +
                "        ToDo-List\n" +
                "      </h1>\n" +
                "    </head>\n" +
                "    <form>\n" +
                "      <label>\n" +
                "        Title:\n" +
                "        <input id=\"newitem\" type=\"text\" placeholder=\"Tap to enter a new item&hellip;\">\n" +
                "        <br>\n" +
                "        Details:\n" +
                "        <input id=\"detail\" type=\"text\" placeholder=\"Details of new item&hellip;\">\n" +
                "        <br>\n" +
                "        Date:\n" +
                "        <input id=\"date\" type=\"date\" placeholder=\"year/month/day\">\n" +
                "        <br>\n" +
                "        Time:\n" +
                "        <input id=\"time\" type=\"time\" placeholder=\"00:00\">\n" +
                "        <br>\n" +
                "      </label>\n" +
                "      <button type=\"button\" id=\"additem\">\n" +
                "        Add\n" +
                "      </button>\n" +
                "    </form>\n" +
                "    <ul id=\"todo-list-container\">\n" +
                "    </ul>\n" +
                "    <!--\n" +
                "    <p id=\"total\">\n" +
                "      <span class=\"total1\">\n" +
                "        Total:\n" +
                "        <span id=\"totalcount\">\n" +
                "          0\n" +
                "        </span>\n" +
                "      </span>\n" +
                "      <span class=\"remain\">\n" +
                "        Remaining:\n" +
                "        <span id=\"remaining\">\n" +
                "          0\n" +
                "        </span>\n" +
                "      </span>\n" +
                "    </p>\n" +
                "    -->\n" +
                "    <fieldset>\n" +
                "      <button class=\"button deletechecked\" type=\"button\" id=\"delete-checked-items\">\n" +
                "        Delete Checked\n" +
                "      </button>\n" +
                "      <button class=\"button deleteall\" type=\"button\" id=\"delete-all-items\">\n" +
                "        Delete All\n" +
                "      </button>\n" +
                "    </fieldset>\n" +
                "\n" +
                "    <script type=\"text/template\" id=\"item-template\">\n" +
                "    <li>\n" +
                "      <label>\n" +
                "        <input type=\"checkbox\">\n" +
                "        <!-- ITEM_NAME -->\n" +
                "      </label>\n" +
                "    </li>\n" +
                "    </script>\n" +
                "    \n" +
                "    <script src=\"todo_back.js\">\n" +
                "    </script>\n" +
                "  </body>\n" +
                "</html>";

        //browser.loadData(todoHtml, "text/html", "UTF-8");
        browser.loadDataWithBaseURL("file:///android_asset", todoHtml, "text/html", "UTF-8", null);

    }
}

最佳答案

出于测试目的,或者快速而肮脏的方法,您可以尝试将 css 文件内容移动到样式标记中,将 js 文件移动到脚本标记中,以避免链接/文件夹错误。

关于javascript - 如何使我的 .css 和 .js 文件与 Android 上的 WebView 中加载的 html 代码一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38755862/

相关文章:

javascript - JSF 中的 HTML 内容呈现

javascript - 如何按星期几设置 DIV 或 LI "class"?

android - Android XML 中的异常

android - 由于 : 'null' - Android Studio 3. 5,安装失败

Javascript 问题 - 在 document.getElementById 之后无法提交表单

html - 如何通过单击按钮创建 Material 卡?

javascript - Jquery 粘性导航问题

javascript - Vue : const { state = {} } = this. $store 中的奇怪符号;

android - 通过将高度设置为 wrap_content 来裁剪和显示 child ,同时允许 child 占据其内容的全部高度?

php - 使用 PHP + AJAX 发送帖子