我不能在iOS手机上使用Phonegap打开弹出对话框 [英] I cannot open popup dialog with Phonegap on iOS mobile

问题描述

我有一个奇怪的问题Phonegap在iOS平台上。在Android上，弹出正常工作。
我有这个代码：

 < button data-rel =popupdata-position-to = windowdata-transition =popid =prueba23>Botón< / button> 
< div data-role =popupid =popupDialog> 
< div data-role =headerdata-theme =astyle =top：-21px> 
< h1>删除页面？< / h1> 
< / div> 
< div role =main> 
< h3 class =ui-title>您确定要删除此页吗？< / h3> 
< p>此操作无法撤消。< / p> 
< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li>< a href =＃test-data-role =buttondata-icon =infodata-iconpos =notext> Volver< / a& li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< script> 
 $（'＃prueba23'）。on（'tap'，function（e）{
 e.preventDefault（）; 
 $（'＃popupDialog'）。 ）; 
}）; 
  

并且在iOS平台上，我第一次点击按钮，弹出窗口出现和一秒钟后消失。在第二（和第三，第四，...）时间，弹出工作正常。

这里有一个我记录的示例视频： https://www.youtube.com/watch?v=HTkrUr1vpsM&feature=youtu.be
。谢谢。

解决方案

我假设你在iOS 9上测试，从HTML的外观，使用jQuery Mobile您的应用程式。如果是这样，你已经遇到了一个在iOS 9中引入的bug /功能，即在iOS 9.0 UIWebview中使用 window.location.hash by Cordova / Phonegap） - 有关详情，请参见此错误报告。

这会导致使用jQuery Mobile时出现问题，默认情况下使用 window.location.hash 。它也导致使用此机制的弹出/对话框/选择菜单的问题，因此您看到的症状。注意，iOS 8和9上的Safari使用WKWebView而不是UIWebView，因此在iOS 9浏览器中查看的JQM网站不会遇到这些问题。

您可以修复这些问题在iOS 9.0 Cordova应用程序上阻止jQuery Mobile自动侦听/使用location.hash：

  $（document） 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; 
} 
}）; 
  
这固定了我的导航和弹出问题，但其他人说，在弹出的div上的设置 data-history =false修复了他们的问题， 
 
 
 
此外，您也可以使用此插件在iOS 8和9上使用您的Cordova应用程序使用新的WKWebView。 cordova-ios 3仍然使用UIWebView，因为在iOS 8中的WKWebView中有错误，但即将推出的cordova-ios 4 将支持适用于iOS 9+的 WKWebView核心插件。请注意，由于其更严格的安全性，如在XHR响应中需要CORS头，因此在使用WKWebView与Cordova / Phonegap应用程序时还有其他注意事项。
 
I have a strange problem with Phonegap on iOS platform. On Android, "popup" works correctly.
I have this code:
<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>
and on iOS platform, at first time that I tap button, popup's appears and dissapears after a second. On second (and third, fourth,...) time, popup works correctly. Only has a strange behaviour at first time that I tap the button.

Here you have an example video that I record: https://www.youtube.com/watch?v=HTkrUr1vpsM&feature=youtu.be
Thank you.
解决方案
I assume you are testing on iOS 9 and, from the looks of your HTML, using jQuery Mobile in your app. If so, you've come across a bug/"feature" introduced into iOS 9 which is that setting of window.location.hash is asynchronous in the iOS 9.0 UIWebview (used by Cordova/Phonegap) - see this bug report for details. 

This causes issues when using jQuery Mobile, which by default uses window.location.hash to navigate between "pages". It also causes issues with popups/dialogs/select menus which use this mechanism, hence the symptoms you are seeing. Note that Safari on iOS 8 and 9 uses WKWebView not UIWebView, hence JQM sites viewed in the browser on iOS 9 don't encounter these issues.

You can fix these issues on iOS 9.0 Cordova apps by preventing jQuery Mobile from automatically listening/using location.hash:
$(document).on("deviceready", function(){
    $.mobile.hashListeningEnabled = false;
});
However, I found this had side effects on Android such as causing the hardware back button not to work, so I targeted it specifically at iOS 9 using cordova-plugin-device:
$(document).on("deviceready", function(){
    if(device.platform === "iOS" && parseInt(device.version) === 9){
        $.mobile.hashListeningEnabled = false;
    }
});
This fixed my navigation and popup issues, but others have said that setting data-history="false" on the popup div fixed the issue for them, so if the above doesn't work, try this too.

Alternatively you can use this plugin to use the new WKWebView on iOS 8 and 9 with your Cordova app. cordova-ios 3 still uses UIWebView due to a bug in WKWebView in iOS 8, but the upcoming cordova-ios 4 will support a WKWebView core plugin for iOS 9+. Note that there are additional considerations when using WKWebView with Cordova/Phonegap apps due to its stricter security, such as requiring CORS headers on XHR responses.

                        
这篇关于我不能在iOS手机上使用Phonegap打开弹出对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！