WKWebView 中的 DeviceMotion 和 DeviceOrientation iOS 13
DeviceMotion and DeviceOrientation in WKWebView iOS 13
我想在 iOS 13+ 中使用 WKWebView
中的 DeviceMotion
和 DeviceOrientation
事件。
我正在使用下面的代码
<html>
<style>
#container{
margin: 20px;
padding: 20px
}
#deviceType{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
font-weight: bold;
color: #08f
}
#permission{
padding: 2rem 5rem;
background: #08f;
color: white;
margin-top: 30;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
border: none;
border-radius: 1rem
}
#permissionStatus{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5rem;
font-weight: 600;
color: red;
margin-top: 30px
}
</style>
<body>
<div id="container">
<div id="deviceType"></div>
<div style="text-align: center">
<button id="permission">Ask for permission</button>
</div>
<div id="permissionStatus">Pending</div>
</div>
</body>
<script>
if (typeof DeviceMotionEvent.requestPermission === 'function') {
document.getElementById('deviceType').innerText = 'iOS 13'
document.getElementById('permission').addEventListener('click', function () {
console.log('button clicked')
DeviceMotionEvent.requestPermission().then(response => {
// This is showing "denied" without showing any permission popup
console.log(response)
document.getElementById('permissionStatus').innerText = response
}).catch(console.error)
});
} else {
// ignore this case for processing
console.log('non iOS 13')
document.getElementById('deviceType').innerText = 'non iOS 13'
}
</script>
</html>
此网页在 Safari 和 chrome 中均有效,并请求允许使用设备动作,如下所示
图片:
状态将根据我单击“允许”或“取消”进行更新
但在我的应用程序中,我正在使用 WKWebView
并且当我按下 Ask Permission 按钮时,它没有显示任何请求权限的警报,而是直接设置状态为 Denied。 (如下所示)。
如果我做错了什么或 WKWebView
方面需要任何额外的东西,请指导我。
这是我的 iOS WKWebView
代码。我不知道是否需要更改 WKUserContentController
或 WKWebViewConfiguration
。
self.webView = WKWebView(frame: .zero)
self.webView.translatesAutoresizingMaskIntoConstraints = false
// Add the webview as a subview of MTKView
self.view.addSubview(self.webView)
self.webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
self.webView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
self.webView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
self.webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
let websiteDataTypes = NSSet(array: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache])
let date = Date(timeIntervalSince1970: 0)
WKWebsiteDataStore.default().removeData(ofTypes: websiteDataTypes as! Set<String>, modifiedSince: date, completionHandler:{ })
self?.webView.load(URLRequest(url: URL(string: url)!))
我尝试使用 uiDelegate
并且有效
刚在里面加了一行viewDidLoad
webView.uiDelegate = self
您还必须确认 ViewController
到 WKUIDelegate
的类型。就是这样
在 Xamarin iOS (Xamarin.Forms) 上,您可以在 WkWebView 准备就绪时使用 EvaluateJavaScript
方法注入权限请求脚本:
webView.EvaluateJavaScript("DeviceMotionEvent.requestPermission().then(response => { if (response == 'granted') {window.addEventListener('devicemotion', (e) => {})}}).catch(console.error)");
如果使用自定义 WkWebView 渲染器,则可以在 OnElementChanged
中设置 webView 控件时注入脚本(如果此错误仍然存在,则必须实施 IWKUIDelegate https://bugs.webkit.org/show_bug.cgi?id=203287)
示例:
// 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);
然后当 WkWebView
准备就绪时,您可以在后面的代码中调用 yourCustomWebView.EvaluateJavaScript("requestSensorPermission()")。
EvaluateJavaScript:
https://docs.microsoft.com/en-us/dotnet/api/webkit.wkwebview.evaluatejavascript?view=xamarin-ios-sdk-12
Custom WkWebView Renderer: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview#create-the-custom-renderer-on-ios
我想在 iOS 13+ 中使用 WKWebView
中的 DeviceMotion
和 DeviceOrientation
事件。
我正在使用下面的代码
<html>
<style>
#container{
margin: 20px;
padding: 20px
}
#deviceType{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
font-weight: bold;
color: #08f
}
#permission{
padding: 2rem 5rem;
background: #08f;
color: white;
margin-top: 30;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
border: none;
border-radius: 1rem
}
#permissionStatus{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5rem;
font-weight: 600;
color: red;
margin-top: 30px
}
</style>
<body>
<div id="container">
<div id="deviceType"></div>
<div style="text-align: center">
<button id="permission">Ask for permission</button>
</div>
<div id="permissionStatus">Pending</div>
</div>
</body>
<script>
if (typeof DeviceMotionEvent.requestPermission === 'function') {
document.getElementById('deviceType').innerText = 'iOS 13'
document.getElementById('permission').addEventListener('click', function () {
console.log('button clicked')
DeviceMotionEvent.requestPermission().then(response => {
// This is showing "denied" without showing any permission popup
console.log(response)
document.getElementById('permissionStatus').innerText = response
}).catch(console.error)
});
} else {
// ignore this case for processing
console.log('non iOS 13')
document.getElementById('deviceType').innerText = 'non iOS 13'
}
</script>
</html>
此网页在 Safari 和 chrome 中均有效,并请求允许使用设备动作,如下所示
图片:
状态将根据我单击“允许”或“取消”进行更新
但在我的应用程序中,我正在使用 WKWebView
并且当我按下 Ask Permission 按钮时,它没有显示任何请求权限的警报,而是直接设置状态为 Denied。 (如下所示)。
如果我做错了什么或 WKWebView
方面需要任何额外的东西,请指导我。
这是我的 iOS WKWebView
代码。我不知道是否需要更改 WKUserContentController
或 WKWebViewConfiguration
。
self.webView = WKWebView(frame: .zero)
self.webView.translatesAutoresizingMaskIntoConstraints = false
// Add the webview as a subview of MTKView
self.view.addSubview(self.webView)
self.webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
self.webView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
self.webView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
self.webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
let websiteDataTypes = NSSet(array: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache])
let date = Date(timeIntervalSince1970: 0)
WKWebsiteDataStore.default().removeData(ofTypes: websiteDataTypes as! Set<String>, modifiedSince: date, completionHandler:{ })
self?.webView.load(URLRequest(url: URL(string: url)!))
我尝试使用 uiDelegate
并且有效
刚在里面加了一行viewDidLoad
webView.uiDelegate = self
您还必须确认 ViewController
到 WKUIDelegate
的类型。就是这样
在 Xamarin iOS (Xamarin.Forms) 上,您可以在 WkWebView 准备就绪时使用 EvaluateJavaScript
方法注入权限请求脚本:
webView.EvaluateJavaScript("DeviceMotionEvent.requestPermission().then(response => { if (response == 'granted') {window.addEventListener('devicemotion', (e) => {})}}).catch(console.error)");
如果使用自定义 WkWebView 渲染器,则可以在 OnElementChanged
中设置 webView 控件时注入脚本(如果此错误仍然存在,则必须实施 IWKUIDelegate https://bugs.webkit.org/show_bug.cgi?id=203287)
示例:
// 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);
然后当 WkWebView
准备就绪时,您可以在后面的代码中调用 yourCustomWebView.EvaluateJavaScript("requestSensorPermission()")。
EvaluateJavaScript: https://docs.microsoft.com/en-us/dotnet/api/webkit.wkwebview.evaluatejavascript?view=xamarin-ios-sdk-12
Custom WkWebView Renderer: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview#create-the-custom-renderer-on-ios