Android

Question

我有一个包含 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函数（在文件中定义：///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 文件的方式。但是我不知道（也找不到）在运行时加载外部 js 文件的正确方法生成 HTML 数据。

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

Answer 1

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

指向它

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

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

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

Answer 2

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

加载 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>

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

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

javascript

webview

highlight