I need some help on how to inject CSS before showing WebView. Appreciate any help.
I need to inject CSS into WebView from assets, before the WebView shows.
You should load url contents manually to your html structure. put this code as page.html in your assets folder.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style type="text/css">
// your css code here
</style>
</head>
<body>
${body}
</body>
</html>
then in your java code:
String pageBody; // get page body by httpUrlConnection or okhttp or...
String html = FileUtils.readFromAssets("page.html", context);
// replace pageBody with ${body} in your html file
html = html.replace("${body}", pageBody);
WebView webView = (WebView) getView().findViewById(R.id.webView);
webView.getSettings().setAllowFileAccess(true);
WebSettings settings = webView.getSettings();
settings.setDefaultTextEncodingName("utf-8");
settings.setJavaScriptEnabled(true);
webView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", null);
Related
I'm trying to load html with CSS which has ID selector and the file doesn't load to the webview as expected.
This is the file which I tried to load:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
However when I tried the code below,it loads to the webview.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
I have enabled these properties on the WebView:
mWebView.setWebViewClient(new CustomWebViewClient());
mWebView.setWebChromeClient(new CustomWebChromeClient());
mWebView.getSettings().setSupportZoom(true); // ZoomControls
mWebView.getSettings().setBuiltInZoomControls(true); // Multitouch
mWebView.getSettings().setDisplayZoomControls(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(CONFIG.webviewEnableViewport());
mWebView.getSettings().setAllowFileAccess(true);
mWebView.requestFocus(View.FOCUS_DOWN);
mWebView.setHorizontalScrollBarEnabled(true);
mWebView.setVerticalScrollBarEnabled(true);
Can anyone help me on this?
I could solve the issue by using the base64 encoding.
String encodedHtml = Base64.encodeToString(myHtmlString.getBytes(),
Base64.NO_PADDING);
mWebView.loadData(encodedHtml, "text/html", "base64");
Actually I want to load complete site from internet link but i want to load css files from mobile (means not from internet). Because I want to load all page faster using internal local css file.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="dist/css/font-awesome.min.css" />
</head>
</html>
So Here I want to Load "bootstrap.min.css" and "font-awesome.min.css" from mobile memory only.
My Android Code :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String url = "http://www.MySiteName.com/";
view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true); // Enable JavaScript Support
view.setWebViewClient(new WebViewClient()); // Links open or Navigate in same webView not in Browser
view.loadUrl(url);
}
Please put CSS in assets folder, and refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
if your css file name is mycss.css
StringBuilder data = new StringBuilder();
data .append("<HTML><HEAD><LINK href=\"mycss.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
data .append(tables.toString());
data .append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", data .toString(), "text/html", "utf-8", null);
thank you
Because the two other answers are just copy pastas and I happened to have the same issue I will help you with my solution:
You need to specify the file path in the head section of your html file.
Pay attention to the part after href
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="file:///android_asset/bootstrap.min.css" />
<link rel="stylesheet" href="file:///android_asset/font-awesome.min.css" />
</head>
</html>
I just can't get my head around why the other posters just copied and pasted and didn't even read what you were trying to tell them.
I hope this helps.
Be aware that your resources folder can be named differently.
I have an Android application with WebView and index.html in assets.
There is such thing in HTML like localStorage.
In my index.html I have script: localStorage.setItem("key", "value");
Is there any way to debug webkit, or to see stack trace when we call localStorage.setItem ?
I want to see which methods called in native from the beginning to the end.
I think there should be some possibility.
I believe have not enough debug skills.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView browser = (WebView)findViewById(R.id.webView);
browser.setHapticFeedbackEnabled(true);
browser.getSettings().setJavaScriptEnabled(true);
browser.getSettings().setSavePassword(false);
browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
browser.setWebViewClient(new WebViewClient());
browser.setWebChromeClient(new WebChromeClient());
browser.loadUrl("file:///android_asset/index.html");
}
Index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
localStorage.setItem("lastname", "Smith");
</script>
</body>
</html>
I'm searching for a way to load remote html's in phonegap android app.
I'm using super.loadUrl("file:///android_asset/www/hello.html"); but how to load remote html page?
it's very simple Venkat,
just load required html page with the http request,
super.loadUrl("http://www.test.com/test1.html");
or you can load local html file like you did
super.loadUrl("file:///android_asset/www/hello.html");
and in hello.html used window.location in onLoad() javascript function to load external html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LoadUrl
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
window.location="http://170.60.26.20:8099/Sencha/Html/index.html";
}
</script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
Please make sure you set the internet permission in android manifest file.
I have seen various discussions on the problem of serving WebView pages from assets, none of which seemed definitive.
I want to be able to use a webview to display html (and included css) files stored in the project assets.
I have found that wv.loadUrl("file:///android_asset/html_no_copy/demo_welcome.html") displays that file okay, but links in demo_welcome.html, either local (no url prefixing the file name) or absolute - the same form as fed to loadUrl - don't work. They get a "Web page not available" error displayed on the view.
WebView wv = (WebView)this.findViewById(R.id.splashWebView);
wv.loadUrl("file:///android_asset/html_no_copy/test.html"); // Works
or
wv.loadUrl("file:///android_asset/html_no_copy/demo_welcome.html"); // Works
But neither of the following links in demo_welcome.html work:
CLICK HERE<p>
OR HERE
I know I can get around this by writing a content provider, but that seems extreme.
I want this to work from SDK 1.6 (4) on up.
Does anyone know if this can be done with just HTML, or does one need to kluge up some code to load the data?
Well, I found something that seems to work (on 1.6 and 2.2), in spite of a warning that it would recurse.
I also discovered that a css style-sheet link inside the first and second page both work without the following intercept. Odd and it makes me a bit nervous. Thoughts?
Here's the code:
WebView wv = (WebView)this.findViewById(R.id.splashWebView);
wv.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
view.loadUrl(url);
return true;
}
});
wv.loadUrl("file:///android_asset/html_no_copy/demo_welcome.html");
Here's the file contents:
demo_welcome.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo Html</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<H1>Testing One Two Three</H1>
CLICK HERE<p>
OR HERE
</body>
</html>
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="test.css" />
<title>Insert title here</title>
</head>
<body>
<H1>TEST.HTML</H1>
</body>
</html>
instead of loadUrl, try using the loadDataWithBaseURL method:
wv.loadDataWithBaseURL("fake://not/needed", html, mimeType, encoding, "");