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
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.
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 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 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 ?
I am loading an HTML file from my assets folder into a WebView using loadUrl(). The HTML file references a JW Player swf embedded alongside it in the assets folder.
I want JW Player to play a remote URL. Sadly, it will not.
If I load the SWF remotely from another server (instead of using the SWF in my assets folder) I can access external URL's. In this case, the external URL is an RTMP stream. For example:
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='utf-8'>
</head>
<body style='margin:0; pading:0;background-color: #000000;'>
<script type='text/javascript' src='http://developer.longtailvideo.com/svn/trunk/fl5/jwplayer.min.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://developer.longtailvideo.com/svn/trunk/fl5/player.swf',
'file': 'testvid.mp4',
'streamer': 'rtmp://b27i9s9t3.rtmphost.com/AndroidMedia',
'controlbar': 'bottom',
'width': '800',
'height': '450'
});
</script>
</body>
...works
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='utf-8'>
</head>
<body style='margin:0; pading:0;background-color: #000000;'>
<script type='text/javascript' src='file:///android_asset/jwplayer.min.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'file:///android_asset/player.swf',
'file': 'testvid.mp4',
'streamer': 'rtmp://b27i9s9t3.rtmphost.com/AndroidMedia',
'controlbar': 'bottom',
'width': '800',
'height': '450'
});
</script>
</body>
...does not work. JW Player loads - but once the play button is hit it flashes a quick "connection unavailable: error #2028" and then spins the ajax spinner forever.
I'm assuming this is a general issue with all SWF's loaded from the assets folder into a web view and is not specific to JW Player.
Any ideas?