[Android] An unobvious behaviour with baseUrl WebView parameter

If I use baseUrl as

String.format("file://%s/.folder/%s/%s", Environment.getExternalStorageDirectory().getAbsolutePath(), var1, var2)

I'll see normal UI by Monocle but I'll not see images. So I use baseUrl as

String.format("file://%s/.folder/%s/%s/", Environment.getExternalStorageDirectory().getAbsolutePath(), var1, var2)

I'll see all images and css styles but Monocle UI will not show. Why?

Additional information First: Before loading page I do follow modifications

    @Override
    public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl) {
        int insertIndex = data.indexOf("</head>");
        String newCode = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" />\n";
        newCode = newCode.concat("<script src=\"file:///android_asset/monocle/scripts/monocore.js\"></script>\n");
        newCode = newCode.concat("<script src=\"file:///android_asset/monocle/scripts/monoctrl.js\"></script>\n");
        newCode = newCode.concat("<script type=\"text/javascript\" src=\"file:///android_asset/somefile.js\"></script>\n");
        newCode = newCode.concat("<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/monocle/styles/monocore.css\" />\n");
        newCode = newCode.concat("<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/monocle/styles/monoctrl.css\" />\n");
        newCode = newCode.concat("<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/somefile.css\" />\n");
        data = data.substring(0, insertIndex).concat(newCode).concat(data.substring(insertIndex));

        insertIndex = data.indexOf("<body>") + 6;
        newCode = "\n<div id=\"reader\">\n";
        data = data.substring(0, insertIndex).concat(newCode).concat(data.substring(insertIndex));

        insertIndex = data.indexOf("</body>");
        newCode = "\n</div>\n";
        data = data.substring(0, insertIndex).concat(newCode).concat(data.substring(insertIndex));

        Log.d("LectureWebView", data);

        super.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);
    }

where somefile.js and somefile.css are for creating Monocle UI. Second: I see this problem only when I load local xhtml files. If I load these files from Internet all will work normally. Third: There is the same problem when I use null as baseUrl.

UPD I found one solution but it's very hacky. I use first way for load local files. Next I call follow line in loadDataWithBaseURL method

data = data.replaceAll("src=\"", "src=\"".concat(baseUrl).concat("/"));

Next I call super method with baseUrl without end-slash.

I'm not familiar with Android development, but a general point I have to make quite often: Monocle uses frames to sandbox the content of components, but this means that we need inter-frame script access. If you are using the file:// protocol you may fall foul of the browser's cross-origin policy — better to serve the content over a http-like protocol if you can. Or investigate whether you can manually adjust the security policy of the Android WebView.

It also sounds to me like you need to check whether the WebView is reporting script errors — perhaps follow this guide: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

I'm closing this on the basis that it sounds like a problem with Android WebView, not Monocle. If you do isolate a specific issue with Monocle, please re-open, or better, create a new issue describing the specific failing.

joseph / Monocle

[Android] An unobvious behaviour with baseUrl WebView parameter #241