WKWebView 中的 DeviceMotion 和 DeviceOrientation iOS 13

Question

我想在 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並且當我按下詢問權限按鈕時，它沒有顯示任何詢問權限的警報，它直接將狀態設置為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)!))

Answer 1

我嘗試使用uiDelegate並且它有效

剛剛在viewDidLoad中添加了一行

webView.uiDelegate = self

您還必須將ViewController的類型確認為WKUIDelegate 。 而已

Answer 2

在 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 控件時注入腳本（如果此錯誤仍在https://bugs.webkit.org/show_bug.cgi?id=203287 附近，則必須實現 IWKUIDelegate ）

例子：

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

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

WKWebView 中的 DeviceMotion 和 DeviceOrientation iOS 13

問題描述

2 個解決方案

解決方案1
3 已采納 2019-12-09 09:05:42

解決方案2
0 2020-02-24 08:55:21

WKWebView 中的 DeviceMotion 和 DeviceOrientation iOS 13

問題描述

2 個解決方案

解決方案1 3 已采納 2019-12-09 09:05:42

解決方案2 0 2020-02-24 08:55:21

解決方案1
3 已采納 2019-12-09 09:05:42

解決方案2
0 2020-02-24 08:55:21