I'm searching for a way to load remote html's in phonegap android app.
I'm using super.loadUrl("file:///android_asset/www/hello.html"); but how to load remote html page?
it's very simple Venkat,
just load required html page with the http request,
super.loadUrl("http://www.test.com/test1.html");
or you can load local html file like you did
super.loadUrl("file:///android_asset/www/hello.html");
and in hello.html used window.location in onLoad() javascript function to load external html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LoadUrl
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
window.location="http://170.60.26.20:8099/Sencha/Html/index.html";
}
</script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
Please make sure you set the internet permission in android manifest file.
Related
I looked into this solution history.pushState does not update url for "share ..." button on mobile Chrome.
I tried this snippet,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="canonical" href="http://localhost:3000">
<title>Test Website</title>
<script src="./jquery.min.js"></script>
</head>
<body>
Hey shan <br> <br>
<button id="btn">Click me</button>
<script>
$(document).ready(function () {
$('#btn').click(function () {
history.pushState({urlPath:'/'}, "/", "/1234?name=shan&color=87878");
});
});
</script>
</body>
</html>
This is working even without changing canonical url too. With the above code if i click the native share button in android chrome browser the string http://localhost:3000/1234?name=shan&color=87878 gets copied.
But in my actual website the same is not happening. The only change over there is Router.replace from nextjs. The approximate snippet looks like this
buttonClick = Router.replace(...)
The problem is when user clicks a button Router.replace is called with the params and everything works except the native share copies only the url http://localhost:3000/1234 not the query string.
But the querystring gets copied when i use the copy button or edit button on the browser.
I am not sure how to approach this problem, what could be the issue? Is any meta tag could block copying the queryparam?
I have a html page, I want to launch my native app when loading this page. the following is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
</head>
<body>
<br><br><br>
<a id="link1" style='display:none' href="baidufe://schemedemo/get/info?id=10000">test link</a>
<br>
<button onclick="launch()">Launch</button>
</body>
<script language="JavaScript">
function launch(){
console.log("test");
var clickTarget = document.getElementById("link1");
clickTarget.click();
};
window.onload=function(){
launch();
};
</script>
</html>
But when i open this page in android chrome(version is 49), my native app isn't launched. when i click the "Launch" button, my native app can be successfully launched.
what's root cause? but my requirement is native app will be launched when opening this page, how to fix it? Thank!
That seems like a rather indirect way to accomplish that you want...instead of simulating a click event, why not set the window location directly and skip a step?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
setTimeout(function() {
window.location = 'baidufe://schemedemo/get/info?id=10000'
}, 250);
</script>
</html>
Keep in mind automatically redirecting users this way has a ton of edge cases, and may show a nasty 'Page could not be found' error if they don't have your app installed.
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 am developing an android application. In that, I am trying to get the image in the javascript, but its not loading. Can someone help me to get the image in the javascript in the phone gap android app...
Code:
<img src="img/nextIcon.png" /></span>'
why the end span tag ?
Basically your file should look something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Something</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad()">
<img src="img/nextIcon.png" />
</body>
</html>
And then of course you should have included the image in a folder called img which is in you www folder
I've tried to setup Phonegap on Android and deviceready won't fire. The reason is that DeviceInfo.uuid is always null/undefined.
It seems like the non-javascript parts of phonegap isn't loaded correctly, but I can't see exactly what. For everything outside the www directory I'm using the code provided in the sample directory of the phonegap download.
Anyone know what may be causing this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap-1.0.0.js"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#something"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
var initialize = function() {
window.console.log("deviceready||resume");
};
document.addEventListener("deviceready", initialize);
document.addEventListener("resume", initialize);
window.console.log("onBodyLoad!");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Herro World</h1>
</body>
</html>
In case someone else stumble on this problem.
I hadn't realized that phonegap-1.0.0.js is different for the iPhone and Android version. It has the same name, but the content is different. Thus, one must load the correct file. I solved it like this:
<script type="text/javascript">
// Atrocious way of loading two diffent phonegap scripts, but other loading methods won't work.
// also there shouldn't be two scripts to begin with -- so much for cross-platform.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.match(/android/)) {
document.write("<script type='text/javascript' src='javascripts\/phonegap-android-1.0.0.js'><\/script>");
} else {
document.write("<script type='text/javascript' src='javascripts\/phonegap-iphone-1.0.0.js'><\/script>");
}
</script>
If you want some function to execute when the device is ready do something like this
document.addEventListener("deviceready", onDeviceReady, true);
// PhoneGap is now ready
function onDeviceReady() {
// Write your code here
}
I am not sure why your code is not working.Try placing the document.addEventListener outside the scope of the function.