I've been struggling with this issue where in my cordova app, the back button will exit the app no matter what. I have tried all the solutions I've come across online but haven't had any success.
All the solutions I've tried (example below) have produced the same result.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
}
The code inside my callback executes without issue, but after it executes, it exits the app. I can prevent the exit by including a ReferenceError in my function, for example
console.log(undefinedVar);
But this obviously doesn't seem like best practice.
The other solutions I've tried include using event.preventDefault() from the callback and ionic's registerBackButtonAction function.
Any suggestions would be greatly appreciated.
enter code here
<!DOCTYPE html>
<html>
<head>
<title>Stopping Back Button</title>
<link rel="stylesheet" type="tex`enter code here`t/css" href="style.css">
<script>
function getTitle() {
document.getElementById("ct").innerHTML = "DEMO: " + document.title;
}
</script>
<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);
getTitle();
}
// device APIs are available
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
alert('Back Button Disabled');
console.log('Back Button Disabled');
}
</script>
</head>
<body onload="onLoad()">
<ul id="nav">
<li>← Back</li>
<li></li>
</ul>
</body>
</html>
Related
I am writing a cordova (version 6) application for an Android 4.4 device. Here I am trying to catch the button-press events, e.g. volume-down button. Unfortunately I need to host the app on a server. Meaning all the html, css and js files are loaded remotely. Whereas the index.html of the app itself only contains:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>My App</title>
<script type="text/javascript">
function init() {
window.location.href="http://example.com:3000/myapp";
}
</script>
</head>
<body id="body" onload="init();">
</body>
</html>
On the server-side the cordova-js gets successfully injected with:
<script type="text/javascript" src="/assets/cordova.js"></script>
I have built the cordova-js by myself, using this repository and their documentation: https://github.com/apache/cordova-js
Most of the server-side cordova code is running fine! E.g. I have added some plugins which all work (wifi-information, show-toast-messages, and so on...). But unfortunately the button-listeners for menu, back, volup, voldown are not working anymore! They used to work, when the cordova code was loaded directly on the device, but since I put in on a remote server it doesn't work anymore.
JS-file from Server:
//Gets called from the body-tag of the html-site - works!
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
//This works!
console.log("onDeviceReady");
//This doesn't do anything (but also no error messages)
navigator.app.overrideButton("backbutton", true);
navigator.app.overrideButton("menubutton", true);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
//Plugins that are loaded from here all work!
}
function onMenuKeyDown(event) {
//This doesn't work
console.log("menu pressed");
}
function onBackKeyDown(event) {
//This doesn't work
console.log("back pressed");
}
function onVolumeUpKeyDown() {
//This doesn't work
console.log("Volume up pressed");
}
Can someone tell me, why this code isn't working anymore and help me fix this?
Try like this...
//Gets called from the body-tag of the html-site - works!
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
//This works!
console.log("onDeviceReady");
}
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
function onMenuKeyDown(event) {
console.log("menu pressed");
}
function onBackKeyDown(event) {
console.log("back pressed");
}
function onVolumeUpKeyDown() {
console.log("Volume up pressed");
}
I'm a little bit confused about how cordova works (i'm using android)...i've got an html page with this button:
<button id="mannaggia">mannaggia</button>
i'm trying to insert a javascript tag:
<script>
document.getElementById("mannaggia").addEventListener("click", myFunction);
myFunction(){
alert('is anybody out there?');
window.location="pag2.html";
}
</script>
nothing happens..
trying to insert a function in index.js outside this page is the same result...thank you
The function is declared after you added the event listener, so myFunction was undefined. Try putting the function before you add listener.
Revisit your html file once again.
best place to start your code are inside the device ready event
read more here Phonegap
<!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>
This question is already asked on stackoverflow here but I didn't found any answer to it, so I raised again this. Please can anyone able reply for this?
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
navigator.compass.getCurrentHeading(onSuccess, onError);
}
function onSuccess(heading)
{
alert('Heading: ' + heading.magneticHeading);
}
function onError(compassError)
{
alert('Compass Error: ' + compassError.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentHeading</p>
</body>
</html>
Either your device does not have a magnetic sensor, or the vendor has not implemented support for it in the OS.
Looking at the Android source code for the device-orientation plugin, the startup code is written like this (modified for brevity):
List<Sensor> list = this.sensorManager.getSensorList(Sensor.TYPE_ORIENTATION);
// If found, then register as listener
if (list != null)
this.setStatus(CompassListener.STARTING);
// If error, then set status to error
else
this.setStatus(CompassListener.ERROR_FAILED_TO_START);
Not sure why they made up their own error code there (public static int ERROR_FAILED_TO_START = 3), but really they should be reporting COMPASS_NOT_SUPPORTED as defined in the documentation.
Below is my markup in index.html
<html>
<head>
<title></title>
<link href="Styles/Style.css" rel="Stylesheet" />
<script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src ="Scripts/MyScripts.js" type="text/javascript"></script>
<script src="Scripts/cordova.js" type="text/javascript"></script>
</head>
<body>
<div id="test">Hello</div>
</body>
</html>
And Below is my script
window.onload = function () {
alert("test");
};
$(document).ready(function () {
alert("test2");
});
document.addEventListener("deviceready", "OnDeviceReady", false);
function OnDeviceReady()
{
alert("test3");
document.getElementById("test").innerHTML = "hello world";
}
I built the app using Phonegap build and tested it on android phone. The alerts in the first two functions are working fine, but the callback function for deviceready is not working. I'm am not sure if cordova.js is loaded correctly.
I downloaded phonegap and copied the config.xml and cordova.js from the following folder locations
\phonegap-2.9.1\phonegap-2.9.1\lib\android\cordova.js
\phonegap-2.9.1\phonegap-2.9.1\lib\android\example\res\xml\config.xml
I haven't made any changes to the config.xml yet. Could anyone please help me with my issue ? I am not sure what I'm doing wrong. Any help would be much appreciated. Thanks
You are passing a string as event handler and not the function. Try:
document.addEventListener("deviceready", OnDeviceReady, false);
In my application i have to alert user to signout on browser close.
For that i have used the javascript as below
<body scroll="no" onbeforeunload="browerClose()">
<script language="JavaScript" type="text/javascript">
function browerClose()
{
window.alert("Click OK to SignOut");
window.location.href = "http://localhost:8086/egs/ervlet?pri=logOut";
}
this is Working for IE ,but not works for FireFox,
Wats the Problem....Any Suggesstions
Thankxx in Advance,
I would suggest you move the javascript function to the head section of the HTML document. That way it is working for Firefox. Maybe this is because HTML documents are processed in sequential order and you need to define the function before you can use it.
Do something like this:
<head>
<script language="JavaScript" type="text/javascript">
function browerClose()
{
window.alert("Click OK to SignOut");
window.location.href = "http://google.com";
}
</script>
</head>
<body scroll="no" onbeforeunload="browerClose()">
<!-- you code here -->
onbeforeunload event will not work from fire fox version 26 if u used any custom alert message in your application which means you need to perform x operation when closing browser/tab or refreshing page but you put alert message in function which will be called from onbeforeunload then the x (update) operation will not happened.
<html>
<head>
<script>
function unloadfunction() {
alert('test');
// update employee ID in Database
}
</script>
</head>
<body onbeforeunload="unloadfunction();">
</body>
</html>