[英]Why does my javascript function not work only in iOS Safari?
I am building a website using C# and ASP.NET Core.我正在使用 C# 和 ASP.NET 核心构建网站。 One of the web pages has a button that is supposed to fill in an input box with your geo location using javascript. web 页面之一有一个按钮,该按钮应该使用 javascript 在输入框中填写您的地理位置。 I'm having trouble getting Safari in iOS to run the script when I click the button.当我单击按钮时,我无法在 iOS 中获取 Safari 以运行脚本。 It seems to work everywhere else I have tested it (PC Desktop on Edge, Chrome, Firefox, iOS Device in Firefox and Chrome).它似乎在我测试过的其他任何地方都有效(Edge 上的 PC 桌面、Chrome、Firefox、iOS 设备在 Firefox 和 Chrome 中)。
Here is the function, which is embedded in the bottom of the html page where the button is:这是function,它嵌入在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>
I have tried attaching this function to buttons many different ways.我尝试将这个 function 以多种不同的方式连接到按钮上。
<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.在 iOS 的 Safari 中,没有任何反应。
I did a sanity check by replacing my getLocation() function with an alert function, like this:我通过用警报 function 替换我的 getLocation() function 进行了完整性检查,如下所示:
<input type="button" value="Test" onmousedown="javscript:alert('Hello');" />
This works just fine on iOS Safari.这在 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?有人可以帮我确定为什么会发生这种情况以及如何使我的自定义 function 在 Safari 中为 iOS 工作吗?
Thanks so much!非常感谢!
Okay, a few things after running some tests:好的,运行一些测试后的一些事情:
There's nothing wrong with the "buttons", above, Safari on Mac and iOS both respond to onclick="function()"
just fine.上面的“按钮”没有任何问题,Mac 上的 Safari 和 iOS 都响应onclick="function()"
就好了。
Safari will deny all access to geolocation
if the page is not accessed via https:
.如果页面不是通过https:
访问的,Safari 将拒绝所有对geolocation
的访问。 Attempting to access geolocation
with http:
will throw an error that is viewable in the console, but otherwise the error will be silent.尝试使用http:
访问geolocation
:将引发可在控制台中查看的错误,否则该错误将无声。
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.如果 Safari 尝试通过https
访问geolocation
,浏览器会弹出一个对话框,上面写着“网站 [your_site_name] 想使用您当前的位置。”,带有“不允许”和“允许”按钮。
If the user manages to get through all of those hurdles, geolocation
will work.如果用户设法克服所有这些障碍, geolocation
就会起作用。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.