Android - Как да зареждам външни javascript файлове в генерираните по време на изпълнение HTML данни?

Имам WebView, съдържащ HTML данни. Данните се генерират по време на изпълнение. Основна функция на моето приложение е подчертаването на определени части от тези 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;
}

Резултатът от Logcat, когато изпълня метода highlightSentence:

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

По някакъв начин WebView не може да намери функцията highlightSentence. Мисля, че е заради начина, по който зареждам файловете на Javascript и JQuery. И все пак не знам (и не мога да намеря) правилния начин за зареждане на външни js-файлове в генерираните по време на изпълнение HTML данни.

Забележка: Използвам WebView единствено за офлайн употреба, нямам нужда от никаква интернет комуникация. WebView изглеждаше като най-лесният начин за активиране на динамично подчертаване.


android javascript webview highlight
person Skywalker10    schedule 08.01.2015    source източник

Отговори (2)


arrow_upward
4
arrow_downward

Изглежда, че политиката за същия произход на Javascript е в основата на проблема. WebView ще зарежда само javascript файлове, които са от същия произход като html. Тъй като не е даден произход за html, схемата за данни се използва по подразбиране. Ако обаче данните са заредени със същия основен url като javascript файловете, не възниква проблем.

Заредете html данните (като file:///android_asset/javascript/ е директорията на javascript файловете):

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

След това препратете към javascript файловете като тези в html:

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

arrow_upward
0
arrow_downward

Ако приемем, че вашият javascript е в директорията на активите, посочете го с URL адрес на файла

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

file://android_asset/ сочи към директорията с активи във вашия apk. Така че можете да посочите скрипта във вашия html, когато го създавате за уеб изгледа.

 <script  charset='utf-8' type='text/javascript' 
          src='file://android_asset/myjavascript.js'></script>
person mjstam    schedule 08.01.2015
comment
Опитах това, като го добавих в моя makeHTML() метод, но сега получавам errorNot allowed to load local resource както за моя JQuery, така и за Javascript файла. - person Skywalker10; 09.01.2015
comment
Вижте това, надяваме се, че ще помогне: stackoverflow.com/questions/19997146/ - person mjstam; 09.01.2015