CODEWITHSUNDEEP
javascriptandroidjquerywebview
Kaidul
Kaidul

Reputation: 15885

Javascript is not working in webView when Loaded from asset folder but working from both http server & localhost

I am trying to load offline version of python documentation into an webview from assetfolder. The offline docs work perfectly in my pc web browser in offline but not working properly in webview (something like jquery is missing).

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = (WebView) findViewById(R.id.wrapper);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient());
        webView.loadUrl("file:///android_asset/python/index.html");
    }

}

And this error message is shown when I tried to load the home page or navigate to any page.

09-24 01:03:02.789: E/Web Console(479): ReferenceError: Can't find variable: $ at file:///android_asset/python/index.html:164

And the above error is for a Jquery code snippet ( I think this for that the jquery library isn't loading)

<script type="text/javascript">$('#searchbox').show(0);</script>

But when I load those pages from my local server localhost or http server, this is working perfectly. What did I miss?

Edit Showing nothing in the webView. After using loadDataWithBaseURL:

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = (WebView) findViewById(R.id.wrapper);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient());
        AssetManager assetManager = getAssets();
        String htmlPage = null;
        InputStream input;
        try {
            input = assetManager.open("python/index.html");

            int size = input.available();
            byte[] buffer = new byte[size];
            input.read(buffer);
            input.close();
            // byte buffer into a string
            htmlPage = new String(buffer);

        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
            webView.loadDataWithBaseURL("file:///android_asset/", htmlPage, "text/html", "utf-8", "");

    }
}

Upvotes: 0

Views: 3115

Answers (2)

Kaidul
Kaidul

Reputation: 15885

The problem was - I extracted those web files from a phonegap app's asset folder; those had some additional files ad different structure. That's why it was not working in Android naive environment !

Upvotes: 0

S.A.Norton Stanley
S.A.Norton Stanley

Reputation: 1873

Your html page should be having reference to 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script>

Since you say the docs should load offline the jquery js is not being loaded. You could probably bundle jquery along with your application and reference it locally like this

  <script src="file:///android_asset/js/jquery-1.8.2.min.js"></script>

Also include 

<script src="file:///android_asset/js/jquery.mobile-1.3.2.min.js"></script>

You might also have to load your html page using loadDataWithBaseURL as seen below instead of loadUrl.

 AssetManager assetManager = getAssets();
            String htmlPage=null;
            InputStream input;
            try {
                input = assetManager.open("python/index.html");

                int size = input.available();
                byte[] buffer = new byte[size];
                input.read(buffer);
                input.close();
                // byte buffer into a string
                htmlPage = new String(buffer);

            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }   
webView.loadDataWithBaseURL("file:///android_asset/", htmlPage, "text/html", "utf-8", "");

Note: jquery-1.8.2.min.js and jquery.mobile-1.3.2.min.js files should be present in your assets folder.

Hope this helps.

Upvotes: 1

Related Questions