Android - 如何在运行时加载外部javascript文件生成的HTML数据？ [英] Android - How to load external javascript files within at runtime generated HTML data?
问题描述
我有一个包含HTML数据的WebView。数据在运行时生成。我的应用程序的一个主要功能是突出显示此HTML数据的某些部分。我尝试使用javascript。
I have a WebView containing HTML data. The data is generated at runtime. A main feature of my app is highlighting certain parts of this HTML data. I tried this by using 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 是我的在运行时使用以下格式生成的数据：
tokenizedText is my at runtime generated data with this format:
<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函数：
When my data is loaded in the WebView, the user can highlight a particular sentence by giving its number. This method then calls the corresponding javascript function:
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）：
The javascript function for highlighting (defined inside file:///android_asset/src_javascript.js):
function highlightSentence(object,color)
{
document.getElementById(object).style.backgroundColor = color;
}
执行highlightSentence方法时Logcat的输出：
The output of Logcat when I execute the highlightSentence method:
I/chromium﹕ [INFO:CONSOLE(1)] "Uncaught ReferenceError: highlightSentence is not defined", source: (1)
WebView无法找到highlightSentence函数。我认为这是因为我加载Javascript和JQuery文件的方式。然而，我不知道（并且找不到）在运行时生成的HTML数据中加载外部 js文件的正确方法。
Somehow the WebView can't find the highlightSentence function. I think it's because of the way I load the Javascript and JQuery files. Yet I don't know (and can't find) the proper way to load external js-files within at runtime generated HTML data.
注意：我仅将WebView用于离线使用，我不需要任何互联网通信。 WebView似乎是启用动态突出显示的最简单方法。
Note: I use the WebView solely for offline use, I have no need for any internet communication whatsoever. WebView seemed like the easiest way to enable dynamic highlighting.
推荐答案
似乎Javascript同源策略是问题的根源。 WebView只会加载与html源相同的javascript文件。由于没有给出html的原点，因此数据方案用作默认值。但是，如果数据加载的是与javascript文件相同的基本URL，则不会出现任何问题。
It seems the Javascript same origin policy is the root of the problem. The WebView will only load javascript files which are from the same origin as the html. Since no origin for the html was given, the data scheme is used as default. If, however, the data is loaded with the same base url as the javascript files, no problem arises.
加载html数据（带文件：/// android_asset / javascript / 作为javascript文件的目录）：
Load the html data (with file:///android_asset/javascript/ being the directory of the javascript files):
webview.loadDataWithBaseURL("file:///android_asset/javascript/", page, "text/html", "UTF-8", null);
然后在html中引用这样的javascript文件：
Then reference the javascript files like this inside the html:
<script src='jquery-1.8.2.js' type='text/javascript'></script>
<script src='src_javascript.js' type='text/javascript'></script>
这篇关于Android - 如何在运行时加载外部javascript文件生成的HTML数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
