Load js function only once onload

Question

I want this JS function to be called only once when the page is loaded .

function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;  
    window.location.href = "?    latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;
    var flag = true;
}

winhowes · Accepted Answer · 2015-02-21 12:04:18Z

1

It's going into an infinite loop because you are redirecting the page with

window.location.href = "?    latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;

every time the page loads. Instead you could do something like this for showPosition():

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;  
    var query = "?    latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;
    var stateObj = { query: query };
    history.pushState(stateObj, "query added", query);
    var flag = true;
}

This will add the query parameters to the URL without refreshing the page. For more details on history.pushState(), see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

edited Feb 21, 2015 at 12:04

answered Feb 21, 2015 at 11:55

winhowes

8,1255 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

radiovisual · Accepted Answer · 2015-02-21 12:11:27Z

0

You can simply use the onload event handler:

<body onload="getLocation()">

This will fire as soon as the page is ready.

Alternatively, you can use jQuery's .ready()like this:

$(document).ready(function(){
    getLocation();
});

answered Feb 21, 2015 at 12:11

radiovisual

6,4681 gold badge30 silver badges42 bronze badges

Comments

imbearr · Accepted Answer · 2015-02-22 02:31:42Z

0

Your code it's a big closure! It generate new request on this step:

window.location.href = "?latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;

You can use different ways:

simple parse window.location.href on load and don't ask location if (window.location.href.indexOf('?')!=-1)
mark client with browser data storage or coockies, and check it before ask location.

use Ajax for send location info to server:

var req = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange=function(){if((req.readyState==4)&&(req.status==200)){ console.log('location was sended to server'); }};
req.open("GET","?latitude="+position.coords.latitude+"&longitude="+position.coords.longitude,true);
req.send(null);

edited Feb 22, 2015 at 2:31

answered Feb 21, 2015 at 12:02

imbearr

1,0198 silver badges24 bronze badges

2 Comments

Torrezzzz Over a year ago

it was working for sometime.... but now am getting error r is not defined in the browser console....

imbearr Over a year ago

it's my fastcopypaste error =) in this code ((r.readyState==4)&&(r.status==200)) must be req, in my original code I was used variable r and I have changed it to req for more understandable... I have updated my answer, so you can try it again

Collectives™ on Stack Overflow

Load js function only once onload

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related