i try to load in WebView a code HTML with CSS, in local. the file CSS is storage in sdcard0/Style/Template.css. Html code is:
<link rel="stylesheet" type="text/css" href="Style/Template.css" />
Java code is:
webView.loadData(source, "text/html", "UTF-8");
Not works.. i can't use Asset folder, there is any solution?
Have you tried using link href file ?
Related
I am trying to load html from filesDir using webview.loadDataWithBaseURL(baseUrl, htmlString). The relative paths in the HTML won't work hence it loads without styles, javascript and images.
The baseUrl that I am providing is file:///data/user/0/com.mydomain.app/files/folder/index.html The issue gets resolved when the baseUrl is changed to file:///android_asset/folder/index.html.
Note : Currently the assets are present in both android_asset as well as filesDir folders; but I am planning to remove the assets from android_asset folder.
In App file structure
main
assets
folder
index.html
utils
style.css
script.js
images
image.jpg
java
res
filesDir (Persistant Files) structure
com.mydomain.app
cache
files
folder
index.html
utils
style.css
script.js
images
image.jpg
Content of index.html is passed as htmlString.
<head>
<link rel="stylesheet" href="../utils/style.css"/>
</head>
<body>
<img src="../images/image.jpg"/>
<script src="../utils/script.css" />
</body>
I believe you need to call setAllowFileAccess in WebSettings to enable access to file:// URLs, as they're disabled by default in API 30 and above.
webview.getSettings().setAllowFileAccess(true);
Problem:
I should display offline a Html page stored in my react-native app, and for to do it I used WebView:
<WebView
originWhitelist={['*']}
source = {{uri:'file:///android_asset/index.html'}}
/>
but it load just html file without css and/or js, this is an example of my html page:
my file html is stored in: react-native-project->android->app->src->main->assets->web
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body >
<h1>Hello World</h1>
</body>
</html>
this is an example of my css page:
my file css is stored in: react-native-project->android->app->src->main->assets->web->css
h1 {
color:red;
}
I have found this post on medium but not work for my and BaseUrl not work.
Question:
How I can display a Html page with relative file css and js connected to it offline on react-native?
can I use the cache how do react-native-offline-cache-webview ?
Thanks for your attention and sorry if my English is wrong but I'm not a native speaker bye
Am using android webview tutorial based create application. how to get local file in live android. Coding given below help me.
String htmlData;
htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"Style.css\" />";
//lets assume we have /assets/style.css file
mWebView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
Try as webView.loadUrl("file:///android_asset/filename.html");
implement css file in html file. So add <link rel="stylesheet" type="text/css" href="Style.css" /> in html head section.
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 am working on an application in Android, where I am using a local html file which includes css files, but It won't work and I have no Idea why.
The Java code is like this:
view.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "UTF-8", null);
The HTML code is like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/main.css" rel="stylesheet">
<style>
</style>
The path is correct, Eclipse WebBrowser shows the html Page correct but if I test it on my Device it's without styles.
The Logcat throws the Error "Unknown Chromium Error: -6"
Thanks a lot in advance
you cannot refer to this path inside a webview. you probably need to store your css file in assets folder and refer to it dynamically:
put CSS in assets folder, do your manipulation with HTML, but refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
webView.loadDataWithBaseURL("file:///android_asset/", htmlString, "text/html", "utf-8", null);
E.g. you have styles.css file, put it to assets folder, create HTML and load it:
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\"styles.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(tables.toString());
sb.append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html","utf-8", null);
from: WebView, add local .CSS file to an HTML page?
On a related note, if you're not storing the file in the assets folder and want to use relative paths, Webview on Android sometimes requires dot-slash before relative paths.
<LINK href="./styles/file.css" type="text/css" rel="stylesheet">
See this post
In your case the error -6 means FILE_NOT_FOUND, which probably due to access permission issue on your device.
You may need to put the CSS file under the same folder of your HTML files. For security consideration, webkit engine will apply same-domain policy when accessing local files. i.e. accessing sub-resource files (such as CSS, JS, images) that are not in the same folder of your main HTML file is not allowed.