Develop Reference

Android WebView with css and javascript

Many of the answers I've been seeing here are 6+ years old so I was wondering if I could get a more recent answer as they haven't been working for me. I have an html file file.html which contains a
<LINK href="stylesheet.css" type="text/css" rel="stylesheet">
for the CSS and the following for the javascript:
<script src="myscript.js"></script>
file.html, stylesheet.css and myscript.js are all stored in app/assets/Content/
So I am trying to run it with:
WebView webView = (WebView) findViewById(R.id.event_webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("file:///assets/Content/file.html");
However, the WebView is showing the error:
Webpage not available: The webpage at
file:///assets/Content/file.html could not be loaded because
net::ERR_FILE_NOT_FOUND
I have also considered using loadDataWithBaseURL but this requires the data field to contain all of the html which is too big of a file to hardcode.
Does anybody know how I could use html+css+javascript for a WebView?

Your URI for asset folder is incorrect. Change asset to android_asset. As follows:
webView.loadUrl("file:///android_asset/file.html");

Android webview loading css from assets, but not js

Using Android Studio and avd emulator. css defintely loading, js will execute from within head or attached to body tag, but not from external file in assets.
My MainActivity:
WebView webview = new WebView(this);
webview.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webview.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", null);
setContentView(webview);
My html head:
<link rel="stylesheet" href="my.css" />
<script src="jquery.mobile.min.js" type="text/javascript" />
<script src="my.js" type="text/javascript" />
Test JS (no jquery) that executes in head but not in external my.js:
function var1() {
document.getElementById('jstest').innerHTML = 'hi';
}
window.onload = var1;
My Current sentiment:
Charlie Brown.

Changing to jquery.min.js and getting rid of the mobile version has resolved everything. It probably sent the entire js into tilt, but the inline was processing first.

Select change Event not working on Android WebView

I have this piece of code on my WEB APP:
$(document).on('pageinit', function(){
$(".radius").on('change',function(){
$("#cercadeMiForm").submit();
});
});
No if I run this on my website, every time I change selection on the combo with class "radius", my form gets submitted properly.
If I run it on my mobile device standalone browser app, it works as well.
However, when I run it in my own app's webview, it does not work. I am using jQueryMobile and it seems to be working okay so I guess it's not a jQuery thing.
This is where I initialize my WebView:
mWebView = (WebView) findViewById(R.id.webView);
mWebView.getSettings().setUserAgentString(Constants.USER_AGENT);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

Open external page in InAppBrowser android 2.3 doesn't work

i have this little issue, in iOS InAppBrowser works well, but in android no way, i turn on all external page in white list, i put a console.log to see if method is called, but doesn't open here how i handling with that
link : a href="#" onclick="openInAppBrowser('my link);" class="recents">
and the method
enter code here
function openInAppBrowser(url){
console.log('click in app brownser');
console.log('page: ' + url);
window.open(encodeURI(url), '_blank', 'location=yes');
}
Any idea? In iOS works fine but in android no way, if any one could help me

Did you enable JavaScript on your webview?
http://developer.android.com/guide/webapps/webview.html
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true)

JavaScript in a WebView

I have a block of html that has javascript embedded in it:
<!DOCTYPE html>
<html>
<body>
<h1>Testing</h1>
<script type="text/javascript">
var paEmbedId = 461745;
var paEmbedWidth = 600;
var paEmbedOemId = 24500;
var paServer = 'http://www.ncataggies.com/';
var paIframe = true;
</script>
<script type="text/javascript" src="http://www.ncataggies.com/oemjs/0/PhotoAlbum2009Embed.js"></script>
</body>
</html>
When I put the code inside a text document and run it from a browser(as a HTML file), the code runs perfectly.
How can I do this using a WebView in android?

You can use loadData method of WebView widget:
String summary = "<html><body>You scored <b>192</b> points.</body></html>";
webview.loadData(summary, "text/html", null);
// ... although note that there are restrictions on what this HTML can do.
// See the JavaDocs for loadData() and loadDataWithBaseURL() for more info.
If JS is not enabled, then you can also enable JS in WebView:
webview.getSettings().setJavaScriptEnabled(true);
But before that, you may want to read this from Android:
By default, a WebView provides no browser-like widgets, does not
enable JavaScript and web page errors are ignored. If your goal is
only to display some HTML as a part of your UI, this is probably fine;
the user won't need to interact with the web page beyond reading it,
and the web page won't need to interact with the user. If you actually
want a full-blown web browser, then you probably want to invoke the
Browser application with a URL Intent rather than show it with a
WebView.