我正在尝试在我的网站上实现 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);
});
我收到以下错误消息:
[警告] 在请求并授予许可之前,不会触发任何设备运动或方向事件。
从 iOS 13 beta 2 开始,您需要调用 DeviceOrientationEvent.requestPermission() 来访问陀螺仪或加速度计。这将显示一个权限对话框,提示用户允许访问此站点的运动和方向。
请注意,如果您尝试在页面加载时自动调用它,这将不起作用。用户需要采取一些操作(例如点击按钮)才能显示对话框。
此外,当前的实现似乎要求网站启用 https。
欲了解更多信息,请参阅此页面
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 );
使用页面上的一个元素作为事件触发器,并为其指定“request”的 id。
这将在请求 API 授权之前检查 https 并根据需要进行更改。 昨天发现的,但不记得网址了。
您需要单击或用户手势来调用 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 并重新启动它才能重新出现提示。
在 Xamarin iOS (Xamarin.Forms) 上,您可以在 WkWebView 准备就绪时使用
EvaluateJavaScript
方法注入权限请求脚本:
webView.EvaluateJavaScript("DeviceMotionEvent.requestPermission().then(response => { if (response == 'granted') {window.addEventListener('devicemotion', (e) => {})}}).catch(console.error)");
如果使用自定义 WkWebView 渲染器(如果此错误仍然存在,则必须实现 IWKUIDelegate https://bugs.webkit.org/show_bug.cgi?id=203287),可以在设置 webView 控件时注入脚本
OnElementChanged
示例:
// 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.EvaluateJavaScript("requestSensorPermission()") 。
评估JavaScript: https://learn.microsoft.com/en-us/dotnet/api/webkit.wkwebview.evaluatejavascript?view=xamarin-ios-sdk-12
自定义 WkWebView 渲染器: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview#create-the-custom-renderer-on-ios
这并不是真正的答案,而是在
DeviceMotion
上使用 WKWebView
时需要考虑的事情。
在 Xcode 13 上,您可以使用这个新的
WKUIDelegate
。您仍然需要像其他答案提到的那样请求权限,但它不会提示用户授予权限,而是直接授予它。
@available(iOS 15, *)
func webView(_ webView: WKWebView,
requestDeviceOrientationAndMotionPermissionFor origin: WKSecurityOrigin,
initiatedByFrame frame: WKFrameInfo,
decisionHandler: @escaping (WKPermissionDecision) -> Void) {
decisionHandler(.grant)
}
有一个简单的“解决方法”:-)
风格:
@media only screen and (orientation: portrait) {
#orientation-tag{
display: none;
height: 0px;
}
}
@media only screen and (orientation: landscape) {
#orientation-tag{
display: none;
height: 1px;
}
}
HTML:
<div id="orientation-tag"></div>
Javascript:
function getScreenOrientation() {
var element = document.getElementById('orientation-tag')
var computedStyle = window.getComputedStyle(element)
var value = computedStyle.getPropertyValue('height')
if(value == '0px'){
return 'portrait'
}else if(value == '1px'){
return 'landscape'
}else{
return 'undefined'
}
}