Search code examples
javascriptiossafaricustom-function

Why does my javascript function not work only in iOS Safari?

I am building a website using C# and ASP.NET Core. One of the web pages has a button that is supposed to fill in an input box with your geo location using javascript. I'm having trouble getting Safari in iOS to run the script when I click the button. It seems to work everywhere else I have tested it (PC Desktop on Edge, Chrome, Firefox, iOS Device in Firefox and Chrome).

Here is the function, which is embedded in the bottom of the html page where the button is:

<script>
    var form = document.getElementById("locinput");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(prefillLocation);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function prefillLocation(position) {
        form.value = position.coords.latitude + ', ' + position.coords.longitude;
    }
</script>

I have tried attaching this function to buttons many different ways.

<input id="clickMe" type="button" value="Get GeoLoc" mousemove="getLocation();" onclick="getLocation();" />
<button value="iosbutton" type="button" mousedown="getLocation();" onclick="getLocation();">iOS Button</button>
<a id="iosButton"class="btn" data-g-label="button1" href="javascript:getLocation();">Get Location</a>
<input type="button" value="Test" onmousedown="javscript:getLocation();" />

In all other browsers, each one of the above "buttons" works. In Safari for iOS, nothing happens.

I did a sanity check by replacing my getLocation() function with an alert function, like this:

<input type="button" value="Test" onmousedown="javscript:alert('Hello');" />

This works just fine on iOS Safari. This leads me to believe there is some sort of security built in that doesn't allow custom scripts. But I'm sure there is a proper way to do it.

Can someone help me identify why this happens and how to make my custom function work in Safari for iOS?

Thanks so much!

Solution

  • Okay, a few things after running some tests:

    1. There's nothing wrong with the "buttons", above, Safari on Mac and iOS both respond to onclick="function()" just fine.

    2. Safari will deny all access to geolocation if the page is not accessed via https:. Attempting to access geolocation with http: will throw an error that is viewable in the console, but otherwise the error will be silent.

    3. If Safari tries to access geolocation via https, the browser will throw up a dialog saying something like "The website [your_site_name] would like to use your current location.", with "Don't Allow" and "Allow" buttons.

    enter image description here

    If the user manages to get through all of those hurdles, geolocation will work.

    The test code:

    <html>
<head>
</head>
<body>
<form id="locinput">
  <input id="clickMe" type="button" value="Get GeoLoc"
         onclick="getLocation();"/>
  <button value="iosbutton" type="button" onclick="getLocation();">iOS
    Button
  </button>
  <a id="iosButton" class="btn" data-g-label="button1"
     href="#" onclick="getLocation();">Get Location</a>
  <input type="button" value="Test" onclick="getLocation();"/>
</form>
<script>
  const form = document.getElementById('locinput');

  function getLocation () {
    console.log('getLocation()');
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(prefillLocation);
    } else {
      alert('Geolocation is not supported by this browser.');
    }
  }

  function prefillLocation (position) {
    form.value = position.coords.latitude + ', ' + position.coords.longitude;
  }
</script>
</body>
</html>