Почему моя функция javascript не работает только в iOS Safari? - PullRequest
Новая
       67

Почему моя функция javascript не работает только в iOS Safari?

0 голосов
/ 17 апреля 2020

Я создаю сайт, используя C# и ASP. NET Core. На одной из веб-страниц есть кнопка, которая должна заполнить поле ввода вашим географическим местоположением с помощью javascript. У меня проблемы с получением Safari в iOS для запуска скрипта, когда я нажимаю кнопку. Кажется, он работает везде, где я его протестировал (P C Рабочий стол на Edge, Chrome, Firefox, iOS Устройство в Firefox и Chrome).

Вот функция, которая встроена в нижнюю часть страницы html, где кнопка: 

<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>

Я пытался прикрепить эту функцию к кнопкам различными способами. 

<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();" />

В во всех остальных браузерах каждая из перечисленных выше «кнопок» работает. В Safari для iOS ничего не происходит.

Я сделал проверку работоспособности, заменив функцию getLocation () на функцию оповещения, например: 

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

Это прекрасно работает на iOS Safari. Это наводит меня на мысль, что встроена какая-то система безопасности, которая не позволяет создавать собственные сценарии. Но я уверен, что есть правильный способ сделать это.

Может кто-нибудь помочь мне определить, почему это происходит и как заставить мою пользовательскую функцию работать в Safari для iOS?

Спасибо так много!

1 Ответ

0 голосов
/ 17 апреля 2020

Хорошо, несколько вещей после запуска некоторых тестов:

  1. Нет ничего плохого в "кнопках", выше, Safari на Ma c и iOS оба отвечают на onclick="function()" просто отлично.

  2. Safari запретит любой доступ к geolocation, если страница не доступна через https:. Попытка получить доступ к geolocation с помощью http: приведет к ошибке, которая отображается в консоли, но в противном случае ошибка будет молчать.

  3. Если Safari попытается получить доступ к geolocation через https, браузер выведет диалоговое окно, в котором будет указано что-то вроде: «Веб-сайт [your_site_name] хотел бы использовать ваше текущее местоположение.» С кнопками «Не разрешать» и «Разрешить».

enter image description here

Если пользователю удастся преодолеть все эти препятствия, geolocation будет работать.

Тестовый код: 

<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>
...