如何让DeviceOrientationEvent和DeviceMotionEvent在Safari上运行?

时间:2019-06-09 11:13:10

标签: javascript safari mobile-safari device-orientation devicemotion

我正在尝试在我的网站上实现DeviceOrientationEvent和DeviceMotionEvent以获得3D效果。但是,该控制台不会记录任何信息,并且显然iOS 13需要用户设置权限才能开始执行此操作。我似乎无法弄清楚如何正确设置它。

我已经做过一些研究,这就是我发现的:https://github.com/w3c/deviceorientation/issues/57#issuecomment-498417027

不幸的是,在线提供的所有其他方法不再可用。

window.addEventListener('deviceorientation', function(event) {
    console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});

我收到以下错误消息:

[警告]在请求并授予许可之前,不会触发任何设备运动或方向事件。

4 个答案:

答案 0 :(得分:4)

您需要单击或用户手势才能调用requestPermission()。 像这样:

<script type="text/javascript">
    function requestOrientationPermission(){
        DeviceOrientationEvent.requestPermission()
        .then(response => {
            if (response == 'granted') {
                window.addEventListener('deviceorientation', (e) => {
                    // do something with e
                })
            }
        })
        .catch(console.error)
    }
</script>

<button onclick='requestOrientationPermission();'>Request orientation permission</button>

注意:如果您在权限提示上单击“取消”并要再次对其进行测试,则需要退出Safari并重新启动以使提示再次出现。

答案 1 :(得分:1)

if ( location.protocol != "https:" ) {
location.href = "https:" + window.location.href.substring( window.location.protocol.length );
}
function permission () {
    if ( typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) {
        // (optional) Do something before API request prompt.
        DeviceMotionEvent.requestPermission()
            .then( response => {
            // (optional) Do something after API prompt dismissed.
            if ( response == "granted" ) {
                window.addEventListener( "devicemotion", (e) => {
                    // do something for 'e' here.
                })
            }
        })
            .catch( console.error )
    } else {
        alert( "DeviceMotionEvent is not defined" );
    }
}
const btn = document.getElementById( "request" );
btn.addEventListener( "click", permission );

使用页面上的元素作为事件触发器,并为其赋予ID“请求”。

这将检查https,并在请求API授权之前根据需要进行更改。 昨天找到了这个,但是不记得URL了。

答案 2 :(得分:0)

从iOS 13 beta 2开始,您需要调用DeviceOrientationEvent.requestPermission()来访问陀螺仪或加速度计。这将显示一个权限对话框,提示用户允许该站点的运动和方向访问。

请注意,如果您尝试在页面加载时自动调用它,则此方法将无效。用户需要采取一些措施(例如点击按钮)才能显示对话框。

此外,当前的实现似乎要求该网站启用https。

有关更多信息,请参见this page

答案 3 :(得分:0)

在Xamarin iOS(Xamarin.Forms)上,准备就绪时,可以在WkWebView上使用EvaluateJavaScript方法注入权限请求脚本:

webView.EvaluateJavaScript("DeviceMotionEvent.requestPermission().then(response => { if (response == 'granted') {window.addEventListener('devicemotion', (e) => {})}}).catch(console.error)");

如果使用自定义WkWebView渲染器(如果此错误仍在https://bugs.webkit.org/show_bug.cgi?id=203287,则必须实施IWKUIDelegate),当在OnElementChanged中设置webView控件时,可以注入脚本。

示例:

// do this when setting up the webview control in OnElementChanged
                //enable device motion sensors permission script:
                //https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140
                var source =
                "function requestSensorPermission() {" +
                "   if (typeof(DeviceMotionEvent) !== 'undefined' && typeof(DeviceMotionEvent.requestPermission) === 'function') {" +
                "       DeviceMotionEvent.requestPermission() .then(response => {" +
                "           if (response == 'granted') { " +
                "               window.addEventListener('devicemotion', (e) => { })" +
                "           }" +
                "       }).catch(console.error)" +
                "   }" +
                "}";
                var script = new WKUserScript(new NSString(source), WKUserScriptInjectionTime.AtDocumentEnd, true);
                wkWebView.Configuration.UserContentController.AddUserScript(script);

然后,您可以在 yourCustomWebView 准备就绪后,在代码后调用 yourCustomWebView 。在代码中评估JavaScript(“ requestSensorPermission()”)。

评估JavaScript: https://docs.microsoft.com/en-us/dotnet/api/webkit.wkwebview.evaluatejavascript?view=xamarin-ios-sdk-12

自定义WkWebView渲染器: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview#create-the-custom-renderer-on-ios