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.
Related
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 the latest Expo SDK. I use a non-detached project.
I need to load a css from local file in a WebView that loads an html from string like this:
<WebView source={{ baseUrl: './', html: this.fullPost }} />
Where this.fullPost looks like this
this.fullPost = `
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>some html that uses style.css</body>
</html>`;
So where should I put the style.css file and what should I specify as the baseUrl?
How should this with Expo?
Thank you.
The easiest way is to wrap your css code into a javascript file:
style.js:
const css = `
<style>
// copy your css file's content here
</style>
`;
export default css;
Then just import style from './style'; and you can simply concat the style to this.fullPost.
I try to read epub file content to convert book formats using phonegap technology.i found examples using phonegap as shown below link:
http://bytedebugger.wordpress.com/2014/05/21/cordovaphonegap-ebook-reader-for-web-and-mobile-with-epub-js-plugin/
In this examples i am tries to implements basic epub example.I tries code as shown below :
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basic ePubJS Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- EPUBJS Renderer -->
<script src="../build/epub.min.js"></script>
<!-- Zip JS -->
<script src="../build/libs/zip.min.js"></script>
<!-- Inflate JS -->
<script src="../build/libs/inflate.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
<script>
var Book = ePub("content.epub");//here epub file path given
</script>
</head>
<body>
<div id="main">
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<div id="area"></div>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
</div>
<script>
Book.renderTo("area");
</script>
</body>
</html>
Error : The operation is insecure. undefined
The above example not gets any output it shows empty.I didn't get any idea about this.So can you please suggest me what to do for this?
Thanks in Advance.
First, reading this documentation: https://github.com/futurepress/epub.js/blob/master/README.md you will see an important part:
If you plan on using compressed (zipped) epubs (any .epub file)
include the minified version of zip.js
Also make sure to set EPUBJS.filePath to the directory containing inflate.js
<script src="/build/libs/zip.min.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
So, the first thing you need to do is to add theses libs.
Some browsers can block the access of a file, so if you have problems, maybe you will need to use it with a web server.
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'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.