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

Posted 2023-03-15

【中文标题】我无法在 iOS 移动设备上使用 Phonegap 打开弹出对话框

【英文标题】：I cannot open popup dialog with Phonegap on iOS mobile

【发布时间】：2015-09-27 12:30:08

【问题描述】：

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 谢谢。

【参考方案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 有副作用，例如导致硬件后退按钮不起作用，因此我专门针对 iOS 9 使用 cordova-plugin-device：

$(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 应用程序一起使用。由于 iOS 8 中 WKWebView 中的 a bug，cordova-ios 3 仍然使用 UIWebView，但即将推出的适用于 iOS 9+ 的 cordova-ios 4 will support 和 WKWebView core plugin。请注意，将 WKWebView 与 Cordova/Phonegap 应用程序一起使用时，由于其更严格的安全性，还有其他注意事项，例如在 XHR 响应中需要 CORS 标头。

【讨论】：

我在全局更改此设置时产生了一些副作用，因此不得不在每个弹出窗口上设置 data-history="false"。在 iOS 9 上使用 jQM 1.4.2 为我解决了这个问题。

我尝试了 data-history="false" 但它不起作用，当我尝试上面的解决方案时，它在我进行任何移动页面更改后隐藏了我的页面............ $ .mobile.pageContainer.pagecontainer("change", "#homepage", transition: "fade");并且 .hide() 停止工作..