Android - 如何在运行时生成的 HTML 数据中加载外部 javascript 文件？答案

【问题标题】：Android - How to load external javascript files within at runtime generated HTML data?Android - 如何在运行时生成的 HTML 数据中加载外部 javascript 文件？
【发布时间】：2015-01-08 16:46:59
【问题描述】：

我有一个包含 HTML 数据的 WebView。数据是在运行时生成的。我的应用程序的一个主要功能是突出显示此 HTML 数据的某些部分。我通过使用 javascript 进行了尝试。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_reader_page, container, false);

    webview = (WebView) rootView.findViewById(R.id.resultText);
    webview.getSettings().setJavaScriptEnabled(true);

    String page = makeHTML();
    webview.loadUrl("file:///android_asset/jquery-1.8.2.js");
    webview.loadUrl("file:///android_asset/src_javascript.js");
    webview.loadData(page, "text/html", "UTF-8");

    return rootView;
}

private String makeHTML() {
    StringBuilder sb = new StringBuilder();

    sb.append("<!DOCTYPE html>\n");
    sb.append("<html>\n");
    sb.append("<head>\n");
    sb.append("</head>\n");
    sb.append("<body>\n");
    sb.append(tokenizedText + "\n");
    sb.append("</body>\n");
    sb.append("</html>\n");

    return sb.toString();
}

tokenizedText 是我在运行时生成的数据，格式如下：

<YT_SEN id="_YT_SEN_0">This is my first sentence.</YT_SEN>
<YT_SEN id="_YT_SEN_1">This is my second sentence.</YT_SEN>
...

当我的数据加载到 WebView 中时，用户可以通过给出其编号来突出显示特定的句子。然后这个方法调用相应的javascript函数：

public void highlightSentence(int sent_id) {
    if (android.os.Build.VERSION.SDK_INT < 19) {
        webview.loadUrl("javascript:highlightSentence('_YT_SEN_" +sent_id+ "', " +color+ ")");
    } else {
        webview.evaluateJavascript("javascript:highlightSentence('_YT_SEN_" +sent_id+ "', " +color+ ")", null);
    }
}

用于突出显示的 javascript 函数（在 file:///android_asset/src_javascript.js 中定义）：

function highlightSentence(object,color)
{
    document.getElementById(object).style.backgroundColor = color;
}

我执行highlightSentence方法时Logcat的输出：

I/chromium﹕ [INFO:CONSOLE(1)] "Uncaught ReferenceError: highlightSentence is not defined", source:  (1)

WebView 不知何故找不到 highlightSentence 函数。我认为这是因为我加载 Javascript 和 JQuery 文件的方式。但是我不知道（也找不到）在运行时生成的 HTML 数据中加载 external js 文件的正确方法。

注意：我仅将 WebView 用于离线使用，我不需要任何互联网通信。 WebView 似乎是启用动态突出显示的最简单方法。

【问题讨论】：

标签： javascript android webview highlight

【解决方案1】：

似乎 Javascript 同源策略是问题的根源。 WebView 只会加载与 html 来源相同的 javascript 文件。由于没有给出 html 的来源，因此默认使用数据方案。但是，如果数据是使用与 javascript 文件相同的基本 url 加载的，则不会出现问题。

加载html数据（file:///android_asset/javascript/是javascript文件的目录）：

webview.loadDataWithBaseURL("file:///android_asset/javascript/", page, "text/html", "UTF-8", null);

然后在html里面引用这样的javascript文件：

<script src='jquery-1.8.2.js' type='text/javascript'></script>
<script src='src_javascript.js' type='text/javascript'></script>

【讨论】：

【解决方案2】：

假设您的 javascript 在资产目录中，使用文件 url 指向它

 file://android_asset/<some java script file in assets>

file://android_asset/ 指向您的 apk 中的资产目录。因此，当您为 webview 构建脚本时，您可以在 html 中引用该脚本。

 <script  charset='utf-8' type='text/javascript' 
          src='file://android_asset/myjavascript.js'></script>

【讨论】：

我尝试将其添加到我的 makeHTML() 方法中，但现在我的 JQuery 和 Javascript 文件都出现错误“Not allowed to load local resource”。
看看这个希望它会有所帮助：stackoverflow.com/questions/19997146/…