My device is a HTC One X, browser is Chrome. I'm trying to get HTML5 GeoLocation to work in browser however I'm unable to, it works on iOS and desktop however nothing for my Android. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
<title>HTML5 Test</title>
<script src='http://cloud.keepiteasy.net/libs/modernizr.custom.89661.js' type='text/javascript'></script>
<script src='http://cloud.keepiteasy.net/libs/jquery.js' type='text/javascript'></script>
</meta>
</head>
<body>
<script type="text/javascript">
$(function() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
}
function success(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert(lat);
alert(lng);
}
function error(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
});
</script>
</body>
</html>
UPDATE: I fixed the doctype
UPDATE: I updated the error function
UPDATE: On my HTC I am still getting nothing, not even an error. On my Nexus 7 (just tried it), it works fine... WTF, hardware issue? But other GPS based apps work...
I got the same issue on my HTC One X. At least you can make sure, your error function gets called, by adding a timeout:
navigator.geolocation.getCurrentPosition(success, error, {timeout:3000});
In this example, your error function gets called after 3 seconds.
Seems to be a hardware issue of some sort as no website can acquire my geolocation on my OneX, however my Nexus 7 the above code works fine.
Just restart your phone, guys. Yeah it's kinda stupid but it's the solution.
Related
I have this demo code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body onload="init()">
<script type="text/javascript">
function init() {
this.ws = new WebSocket("ws://localhost:1234");
console.log("opening");
// on close, display message and try to reopen
this.ws.onclose = function (evt) {
console.log("closed");
}
}
</script>
</body>
</html>
Which is connecting to a websocket endpoint that doesn't exist. I would expect this to error out basically immediately, but in Firefox, the time between it printing "opening" and printing "closed" is over a minute:
Is this expected behavior, or can it be configured to time out more quickly? In Chrome the connection errors out immediately:
Found it. This is intentional behavior to comply with RFC 6455. Per this patch, it uses an exponential backoff up to 60 seconds max. Unfortunately I think this means auto-reconnecting to a websocket endpoint in Firefox is broken.
I've tried many variations of the script below, including changing the syntax and using window.prompt, but can't find a way to get the prompt to work.
Note: If there are errors in my other code (html), feel free to point them out, but focus on the JS - the page is loading perfectly with all elements, but the script simply doesn't run on a mobile device, even though it ran perfectly when I didn't have a prompt. Can you please help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>program</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var accesskey="config";
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
var attempt=window.prompt("Mobile browsers are not currently supported. If
you are a developer, enter the access key.")
if(accesskey!=attempt)
{
alert("Bye!");
window.location("https://google.com);
}
else
{
console.log("Authenticated");
}
}
</script>
</body>
</html>
You have a number of line breaks / spaces in your regular expression and prompt message.
window.location is not a function; simply assign the URL to it.
You are missing a closing " at the end of google.com.
Fixing up these three issues produces the following working example:
var accesskey = "config";
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var attempt = window.prompt("Mobile browsers are not currently supported. If you are a developer, enter the access key.")
if (accesskey != attempt) {
alert("Bye!");
window.location = "https://google.com";
} else {
console.log("Authenticated");
}
}
Hope this helps! :)
Prompt is working as below your regex is having line break and also its false so i have forced it to be true here.
Also window.location("https://google.com); is missing closing " and its a property not a function you should do window.location="https://google.com"
var accesskey="config";
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || true)
var attempt=window.prompt("Mobile browsers are not currently supported. If you are a developer, enter the access key.")
if(accesskey!=attempt)
{
alert("Bye!");
window.location ="https://google.com";
}
else
{
console.log("Authenticated");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>program</title>
</head>
<body>
</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.
I have a Firefox OS app that makes calls to cross domain pages and downloads data to display on the app, wich all works fine because I used the systemXHR permission and appended the { mozSystem: true } on every XMLHttpRequest.
Then I attached the Flurry script, made the FlurryAgent calls in the .js of the app and started recieving the info from the events on the Flurry Event Logs when I ran it on the Firefox OS Simulator. When I tried to install my app on a Firefox OS device, the Flurry session never starts and the app never loads.
I don't understand why Flurry works on the simulator and not on the device. I checked a lot of times for the internet connection on the device, wich works fine for the browser and other apps that were already installed. And my app worked fine on the device before I had attached Flurry.
Here is a sample of my code:
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="css/mystyle.css" />
<script src="https://cdn.flurry.com/js/flurry.js"></script>
<script src="js/app.js"></script>
</head>
<body>
.js
$(document).on('pagebeforecreate', '[data-role="page"]', function(){
if ($(this).attr('id')=="splash"){
$.mobile.allowCrossDomainPages = true;
}
});
$(document).on('pageinit', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pageinit!!");
if ($(this).attr('id')=="splash"){
FlurryAgent.startSession("7ZFX9Z4CVT66KJBVP7CF"); //Here is were it crashes
alert("Inicio sesion flurry");
console && console.log($(this).attr('id') + "- Entro al if para el timer");
var timer = window.setTimeout(next, 10000);
}
});
If there is anything else that you need to help me figure out what happens, let me know.
The device I'm using is a Qualcomm model, especifically Peak and has the OS version: Boot2Gecko 1.1.1.0hd-GP
This may be a CSP issue. Have a look at: https://developer.mozilla.org/en-US/Apps/CSP?redirectlocale=en-US&redirectslug=Apps%2FCSP Specifically Remote scripts are banned.
If I run the below code as regular html5 code in the browser, Its works fine. I want the same result using android. I am getting the following error:
12-08 12:56:26.546: ERROR/Web Console(703): TypeError: Result of
expression 'service.useService' [undefined] is not a function. at
file:///android_asset/www/index.html:12
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<script language="JavaScript">
var iCallID;
function InitializeService()
{
service.useService("http://10.15.1.205/HelloService/Service.asmx?wsdl", "HelloWorldService");
service.HelloWorldService.callService("HelloWorld");
}
function ShowResult()
{
document.write(event.result.value);
}
</script>
</head>
<body onload="InitializeService()" id="service" style="behavior:url(webservice.htc)" onresult="ShowResult()">
</body>
</html>
This isnt a problem with HTML5 this is a Internet Explorer only CSS attribute -> http://msdn.microsoft.com/en-us/library/ms530723(v=vs.85).aspx
Cannot find it in any official HTML5 / CSS3 documentation ...
So unless your Android device runs Internet Explorer you need to find an alternative