Apache Cordova - Hybrid Mobile Application page opening like a chrome browser not like cordova application
Question
I'm working on Cordova to develop the hybrid mobile application using HTML, CSS and Javascript.
How can we redirect from one page to other pages not like browser application, it must be Cordova application.
It is working good in a browser but if I generate the .apk file and deploy onto the mobile device it is working like web application not like Cordova application. Here, I'm using coding like window.open(),window.location.href() and window.location.replace().
$(document).ready(function() {
$("#btn4").click(function() {
$lname = $("#lname").val();
$.ajax({
url: 'http://localhost:8080/RESTfulDemoDerby/webresources/com.mss.mmxregistration/session',
data: {lname: $lname},
type: 'GET',
crossDomain: true,
ContentType: 'html/text',
dataType: 'text',
cache: false
}).done(function(response) {
if (response== 'success') {
window.location.href='http://localhost:8383/HTML5Application1/listform.html';
}
else {
window.location.replace("http://localhost:8383/HTML5Application1/login1.html");
}
}).fail(function(request, textStatus, errorThrown) {
// alert(url);
alert(textStatus + " : " + errorThrown.toString());
});
});
});
let me clarify doubt that can we can add a PhoneGap plugin to Cordova application? Because both are different platforms to develop the hybrid application using HTML, CSS and Javascript.
1 answers
solution1
2 2015-06-30 12:19:46
You should take a deeper look into cordova/phonegap and the whole thing about this. The normal way for building an hybrid application with phonegap/cordova would be to set up a single-page-application.
That means, that you use a framework: For example - jquery mobil e. With help from this framework you're able to set up a single-page-application.
You can set up persistent toolbars for example. After you did that you can navigate through the pages via a normal <a href="#pageID">Page 2</a> where #pageID has to be the id from the page you want to navigate to.
Single-Page Application Template would look like this:
<div data-role="page" id="page1" data-title="Page 1">
<div class="content">
<a href="#page2">Testcontent Page 2 - Go to Page 2</a>
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2">
<div class="content">
<a href="#page1">Testcontent Page 2 - Back to Page 1</a>
</div>
</div>
data-title="Page 1" is the title which will be automatically changed through JavaScript and jQuery . It'll replace the <h1></h1> Tags content inside your persistent header.
Just Google for Single Page Application Cordova Tutorial or things like that, there a tons of results.
PLUGINS IN CORDOVA
Cordova wouldn't be as well known as it is, if there were not those great plugins. The list of plugins is nearly endless and from day to day there are new ones.
You can install a plugin via terminal.
- cd yourProject
- cordova plugin add cordova-plugin-pluginName where
pluginNamewould be the name of that plugin. For example: console - cordova plugin add cordova-plugin-console
After you added such a plugin to your project, you're going to run the build command ( cordova build - integrate the " plugin add process " inside your normal way of building an application.
So now after you added the plugin you want to, you can use the commands the plugin brings with. But attention: You have to wait for the deviceReady event, before you can use your plugins.
Example for the DeviceReady Event
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
You can find detailed information about that event and all the other events inside the cordova events docs .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.