CODEWITHSUNDEEP
androidhtmlwebview
Melody
Melody

Reputation: 1203

How to load a js file from assets into webview when loading html from assets?

I want to load the HTML file which is having JS reference from Android Asset folder. When i open the HTML file in browser it loads properly with all JS reference. But when i load from Android JS files are not referring.
Sample Code

WebView web_view = FindViewById<WebView>(Resource.Id.webView); `web_view.Settings.JavaScriptEnabled = true;`
                string sampleHtmlData = "<html><head>" +
                "<script src=\"epub.min.js\"></script>" +
                "<script src=\"jquery-1.10.2.min.js\" type=\"text/javascript\"></script>" +
                "<script>" +
                "var book = ePub(\"Azure_Cosmos_DB_and_DocumentDB_Succinctly/\");" +
                "$(document).ready(function(){  book.renderTo(\"area\"); });" +
                "</script>" +
                "</head><body> <div id=\"prev\" onclick=\"book.prevPage()\" style=\"font - size: 64px; cursor: pointer;\" class=\"arrow\">‹</div>" +
                "<div id =\"area\" style =\"height:500px;\" ></ div >" +
                "<div id = \"next\" onclick = \"book.nextPage()\" style = \"font-size: 64px;cursor:pointer;\" class=\"arrow\">›</div></body></html>";
                web_view.LoadDataWithBaseURL("file:///android_asset/Sample/", sampleHtmlData, "text/html", "UTF-8", null);

I have tried to load using LoadUrl also.

web_view.LoadUrl("file:///android_asset/Sample/index.html")

File Path: Assets/Sample

Can anyone suggest me to load local Html file with corresponding JS files? EPUB js will be supported in Android?

Upvotes: 0

Views: 4747

Answers (3)

Melody
Melody

Reputation: 1203

The issue has been resolved by enabling below properties.

if (Build.VERSION.SdkInt >= Build.VERSION_CODES.JellyBean)
            {
                webView.Settings.AllowUniversalAccessFromFileURLs = true;
                webView.Settings.AllowFileAccessFromFileURLs = true;
            }

Note: Keep the required JS files directly into Assets folder instead of keeping inner folders to keep JS files

-Thanks

Upvotes: -1

Pratik Vyas
Pratik Vyas

Reputation: 654

Hello Try this example if it helps 

public class MainActivity extends Activity {

WebView view;
JSInterface api;

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    view = (WebView) findViewById(R.id.webView);
    api = new JSInterface();
    WebSettings asd = view.getSettings();

    asd.setJavaScriptEnabled(true);
    view.addJavascriptInterface(api, "api");

    String url = "file:///android_asset/index.html";
    view.loadUrl(url);
    view.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }

        public void onPageFinished(WebView view, String url) {
            view.loadUrl("javascript:api.getString(document.getElementsByClassName('txtTitle')[0].innerHTML)");
        }
    });
}

private class JSInterface {

    @JavascriptInterface
    public void getString(String str) {
        Log.d("STRING", str);
    }

}
}

Upvotes: 1

Alen Smith
Alen Smith

Reputation: 1512

You should try this friend.

webView.loadData("Your HTML source", "text/html", "UTF-8");

webView.loadData() loads webpage source code directly into WebView

Please embed your JAVASCRIPT inside HTML

Upvotes: 1

Related Questions