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

Android - How to load external javascript files within at runtime generated HTML data?

本文关键字：数据 HTML 加载 外部 文件 javascript 运行时 Android      更新时间：2023-09-26

我有一个包含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数据中加载外部js文件的正确方法。

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

似乎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>

假设你的javascript在资产目录中，用文件网址指向它

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

文件：//android_asset/指向 APK 中的资产目录。因此，在为 Web 视图生成脚本时，可以在 html 中引用脚本。

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