I'm developing an android app using cordova.
The index.html has the following:
<!DOCTYPE html>
<html>
<head>
<title>Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" media="all" href="/style.css">
...
My problems concerns the link tag. Although logcat output shows the embedhttp server serving up the style.css, the styles don't get applied to the html.
In contrast, the js files I include, seem to be working perfectly fine.
<body>
<script type="text/javascript" src="/cordova.js"></script>
<script type="text/javascript" src="/lib/jquery-2.1.0.min.js"></script>
...
Has anyone else run into this issue?
I was experiencing the same problem and I solved writing the path to the images relative to css file location and not relative to .HTML file location.
I have the following structure:
css
index.css
images
mage1.png
index.html
My css class, declared inside índex.css file, must be like this one:
body {
background: url('../images/image1.png');
}
What you have to be aware of is that cordova counts relative paths differently than your normal browser. So I would recommend not using relative paths for images but use the absolute path from the project "home". Ex:
body {
background: url('images/image1.png');
}
This worked for me as I needed to keep a functioning version for a webapp as well as for a cordova nativified app.
Related
I am loading the webview with local file by using below code,
<WebView
originWhitelist={["*"]}
allowFileAccess={true}
javaScriptEnabled={true}
androidLayerType={"hardware"}
source={Platform.OS === "android" ? { uri: "file:///android_asset/about.html" } : require("./constants/about.html")}
/>
Here, the "about.html" internally refers one another HTML file.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color:black;font-family:arial;font-size:12px;
}
</style>
</head>
<body>
<p>Welcome</p>
<p>
Referring another Local HTML<a target="_blank" href=“another_Local.html">link</a>.
</p>
</body>
But this implementation is working fine iOS Platform, but the same is not working in Android. Please suggest.
You may need to use react-native-fs or expo-file-system to load any files in your react-native app.
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
I'm using phonegap to convert my html file into an android app. Since I started using Jquery to show/hide images my buttons for this has become numb.
I have both linked to normal jquery file and mobile version but can't get the buttons to work in android devices (it works in internet explorer but not Google chrome). Any ideas of what I have done wrong?
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2.css">
<script src="C:\Users\Oscar\Desktop\Ja\jquery-1.11.1.js"></script>
<script src="C:\Users\Oscar\Desktop\Ja\jquery.mobile-1.4.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Info▼');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Info▲');
}
});
});
});
</script>
The problem seems to come from the path to your jQuery script.
<script src="C:\Users\Oscar\Desktop\Ja\jquery-1.11.1.js"></script>
<script src="C:\Users\Oscar\Desktop\Ja\jquery.mobile-1.4.2.js"></script>
The path to jquery-1.11.1.js and jquery.mobile-1.4.2.js should be relative to the HTML file you packaged with PhoneGap.
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.
I'm trying to access the data inside the assets/css from an external HTML file.
The process goes like this:
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, user-scalable=yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ola</title>
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/main.css" />
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/sch.css" />
<script type="text/javascript" src="file:///android_asset/css/ethan.js" />
<script type="text/javascript" src="scripts/allinone.js" />
</head>
<body>
<input id="btnTest1" name="button" type="button" style="height:0px;width:0px;" />
</body>
</html>
So here the thing is that, I'm actually calling the HTML file using a link (since the HTML file is not locally present). But main.css, sch.css and ethan.js are locally present in the assets/css folder.
What I'm trying to do is to load the allinone.js which is obviously external and the other three files into the which are internal and run the script.
I found "file:///android_asset/css/main.css" but it looks like it doesn't work.
Please help....
I would be curious to know more about the use case here. My understanding is this:
You're loading an externally hosted HTML file into an Android Webview
You need to overlay some local styles/scripts, which can't be hosted on the external site along with the HTML (presumably because you're generating them dynamically).
If that's so -- and given that the logical approach you conceived of using the file:// URI does not work -- there would seem to be two options, each making use of the webView API:
Load the HTML file from the remote source, modify it, then set it as the webView's source. Locate the tag of the remote HTML and inject your local JS / CSS inline there.
Make use of the 'loadUrl' WebView method to inject your CSS/Javascript dynamically (this seems unnecessarily complicated if #1 is an option). For example:
mWebView.loadUrl("javascript:injectJavascript(js)");
where the parameter 'js' is some inline Javascript that you load within your Android code, and injectJavascript is a method in the remote HTML file that actually inserts it into your DOM. Take an analogous approach to insert your CSS ...
Admittedly these approaches are a bit hackish. Ideally you would use a custom method of the WebView class like 'addCssToDom' or something, but as far as I can see, no such methods are available.