ios - 我无法在 iOS 移动设备上使用 Phonegap 打开弹出对话框

Question

我在 iOS 平台上遇到 Phonegap 的奇怪问题。在 Android 上，“弹出窗口”可以正常工作。我有这段代码:

<button data-rel="popup" data-position-to="window" data-transition="pop" id="prueba23">Botón</button>
<div data-role="popup" id="popupDialog">
    <div data-role="header" data-theme="a" style="top:-21px">
        <h1>Delete Page?</h1>
    </div>
    <div role="main">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
    </div>
    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#test-ries" data-role="button" data-icon="info"   data-iconpos="notext">Volver</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
$('#prueba23').on('tap', function(e){
    e.preventDefault();
    $('#popupDialog').popup('open');
});
</script>

在 iOS 平台上，我第一次点击按钮时，弹出窗口出现并在一秒钟后消失。在第二次(和第三次、第四次……)时，弹出窗口正常工作。第一次点击按钮时只有一个奇怪的行为。

这是我录制的示例视频:https://www.youtube.com/watch?v=HTkrUr1vpsM&feature=youtu.be谢谢。

Answer 1

我假设您正在 iOS 9 上进行测试，并且从您的 HTML 外观来看，您正在您的应用程序中使用 jQuery Mobile。如果是这样，您遇到了 iOS 9 中引入的错误/“功能”，即 window.location.hash 的设置在 iOS 9.0 UIWebview(由 Cordova/Phonegap 使用)中是异步的 -见this bug report了解详情。

这会导致使用 jQuery Mobile 时出现问题，它默认使用 window.location.hash 在“页面”之间导航。它还会导致使用此机制的弹出窗口/对话框/选择菜单出现问题，因此会出现您所看到的症状。请注意，iOS 8 和 9 上的 Safari 使用 WKWebView 而不是 UIWebView，因此在 iOS 9 上的浏览​​器中查看 JQM 站点不会遇到这些问题。

您可以通过阻止 jQuery Mobile 自动监听/使用 location.hash 来解决 iOS 9.0 Cordova 应用程序上的这些问题:

$(document).on("deviceready", function(){
    $.mobile.hashListeningEnabled = false;
});

但是，我发现这对 Android 有副作用，例如导致硬件后退按钮不起作用，所以我使用 cordova-plugin-device 将其专门针对 iOS 9 :

$(document).on("deviceready", function(){
    if(device.platform === "iOS" && parseInt(device.version) === 9){
        $.mobile.hashListeningEnabled = false;
    }
});

这解决了我的导航和弹出问题，但是 others have said在弹出式 div 上设置 data-history="false" 为他们解决了这个问题，所以如果上面的方法不起作用，也试试这个。

或者您可以使用 this plugin将 iOS 8 和 9 上的新 WKWebView 与您的 Cordova 应用程序一起使用。由于 a bug，cordova-ios 3 仍然使用 UIWebView在 iOS 8 的 WKWebView 中，但即将推出的 cordova-ios 4 will support一个WKWebView core plugin适用于 iOS 9+。请注意，由于其更严格的安全性，将 WKWebView 与 Cordova/Phonegap 应用程序一起使用时还有其他注意事项，例如在 XHR 响应中需要 CORS header 。