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.
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 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.
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.
Some background: I am using Jquery Mobile (1.4 stable) and Phonegap (3.3) to build an app. that I am currently testing on Android 2.3 (device) and Android 4.1.2 (emulator). I have a link in index.html that has a link to another page (say test.html also a JQM page). The test.html also resides inside the www folder of the app. but is quite a large html file 159 KB in size uncompressed. When the link is clicked in index.html , I wish to show a loading message until the test.html page (takes 2~3 seconds to load) is shown on screen. I do not want to load the test.html using ajax, so have mentioned data-ajax='false' on the link (because this causes problems for test.html).
Methods I have tried to achieve this:
a) Listen to vclick on the <a> and used the technique mentioned in https://stackoverflow.com/a/16277865 to show the message. I didn't use event.preventDefault() so expected JQM to follow the link normally. Also tried simply $.mobile.loading('show') without using setInterval.
b) Listen to vclick on the <a> and used the technique mentioned https://stackoverflow.com/a/16277865 but this time set event.preventDefault() and used window.location.assign('test.html');
c) Created a <span> that just said loading, hid it using $('span selector').hide() on $(document).ready() and then listened to vclick on the <a> and did a $('span selector').show() to show the message.
RESULT of all 3 methods is the same. In Android 2.3 , upon click of the button to goto test.html the screen stays on the index.html for 2 ~ 3 seconds. No loading message is shown whether from JQM (a) and (b) or the simple (c) method. Strangely, I can see the message on a Desktop Chrome while debugging (put a breakpoint after the span is shown/$.mobile.loading is called) and see the message from both JQM and my hidden span. It only doesn't work on the actual device. I tried this also on Android 4.1.2 thinking this is a 2.3 peculiarity but here I see a blank white page for the 2 ~3 seconds before the test.html is shown.
I put a $(document).on on all the page related events in index.html but none of them fired (put alert messages in all listeners to test). pagebeforechange and pageshow fire only when returning back from another page to index.html, so I couldn't use pagebeforehide, pagehide which was my other alternative. Putting the load message in the test.html's page events is too late (tried this too) because those get fired only after the 2~3 seconds needed to load the page in the DOM.
Here is a sample index.html on which you can reproduce this issue in an Android device. I have linked to an external website here (that takes a few seconds to load) in lieu of the large test.html I have.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-url="index.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 263px;">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<h1 class="ui-title" role="heading" aria-level="1">Homepage</h1>
</div>
<div data-role="content" class="ui-content" role="main">
Click here to test
<span id="loading">Loading please wait...</span>
</div>
<div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
<h4 class="ui-title" role="heading" aria-level="1">Footer here</h4>
</div>
</div>
<script>
$(document).ready(function(){
$("#loading").hide();
$(".Next").on( "vclick",function(event){
event.preventDefault();
//$.mobile.loading('show');
$("#loading").show();
var topage = event.currentTarget.href;
window.location.assign(topage);
});
});
</script>
</body>
</html>
In summary, I have a link in index.html that leads to a large test.html that needs to be loaded using data-ajax=false. The test.html takes 2 ~3 seconds to load and I wish to show a loading message till the test.html is shown on screen.
Many thanks for any suggestions you can provide to solve this problem.
Another solution I found was to add a pause of 50 ms after the loading widget is called. The 50 ms timeout allowed it to show it before doing the redirect.
$('.Next').click(function(event) {
event.preventDefault();
$.mobile.loading('show');
setTimeout(function() {
window.location.assign('test.html');
}, 50);
});
This didn't require creating an intermediary html and is consistently showing the loading message on both A2.3 and A4.1.2.