jQuery Mobile 对话框在 Chrome 中立即消失答案

【问题标题】：jQuery Mobile Dialog Disappears immediately in ChromejQuery Mobile 对话框在 Chrome 中立即消失
【发布时间】：2013-02-26 20:21:18
【问题描述】：

我已经看了一段时间，觉得我错过了一些明显的东西......

我正在使用 jQuery mobile 为 Web 应用程序的用户弹出一个对话框，我正在使用用户代理嗅探来提供一个快速对话框，以指导用户根据他们的平台选择如何安装应用程序。

虽然这似乎无关紧要，但我想确保我尽可能地覆盖我的基地。最后一个 if 语句适用于宽度小于 600 像素且没有先前 ua 字符串之一的浏览器……因此，如果您减少 Chrome 的桌面安装，它将触发该弹出窗口。但是，在 Chrome 中它会出现然后立即消失。我看不到任何抛出的错误，因为我没有看到它在 Firefox 中发生，所以我没有看到发生了什么。

我有两个问题：

1 - 有人知道这里发生了什么吗？我尝试过返回 false 和不返回 false，我认为这无关紧要，只是为了测试逃生。

2 - 有没有人建议做这个清洁剂。由于我正在测试 ua，我正在考虑尝试将其作为 switch 语句运行，但我不确定测试是否能正常工作......但我觉得我并没有把头绕在右边大大地。

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isWinPhone = ua.indexOf("windows phone") > -1;
var isBlackberry = ua.indexOf("blackberry") > -1;
var isbbTen = ua.indexOf("bb10") > -1;
var current_width = $(window).width();
$( '#home' ).live( 'pageinit',function(event){
if(isAndroid) {
$.mobile.changePage( '#android' , { transition:"pop", role:"dialog" });
return false;
};
if(isWinPhone) {
$.mobile.changePage( '#winPhone' , { transition:"pop", role:"dialog" });
return false;
};
if(isBlackberry) {
$.mobile.changePage( '#Blackberry' , { transition:"pop", role:"dialog" });
return false;
};
if(isbbTen) {
$.mobile.changePage( '#bbTen' , { transition:"pop", role:"dialog" });
return false;
};
if(current_width < 599 && !isAndroid && !isWinPhone && !isBlackberry && !isbbTen){
$.mobile.changePage( '#generic' , { transition:"pop", role:"dialog" });
return false;
};
});

您可以在这里看到同样的事情：http://jsfiddle.net/fskirschbaum/2YTwE/1/ 如果您在 Chrome 中查看它。

我尝试了其他一些参数，但不明白为什么会发生这种情况，我不知道从哪里开始。

【问题讨论】：

您在您的环境中运行什么版本的 JQuery？您的 jsfiddle 示例中的#dialog 页面在哪里？
我一直在运行 jQuery 1.8.3，并且一直在运行 jQuery Mobile 1.2.0 和 1.2.0 - #dialog 页面与其他两个页面在同一页面上使用多页面jQuery Mobile 的处理，所以它包含在
...

标签： javascript jquery google-chrome jquery-mobile

【解决方案1】：

我也有一个消失的对话框问题 - 原来与早期尝试摆脱“闪烁”有关 - 一个 SO 答案表明以下将停止闪烁（它没有）：

.ui-page { -webkit-backface-visibility: hidden; }

当我删除这行 css 时，对话框工作正常。

【讨论】：

那是为了回到这个，这是一个有趣的建议。在我的情况下这不是问题，但我只是使用该 CSS 组合了一个快速演示并看到问题发生了。我已经看到之前引用的 CSS（以及其他一些帮助在 jQm 中“修复转换”的东西）。也许它对将来寻求帮助的任何人都有用。

【解决方案2】：

如果您链接正确的 jQuery 和 jQuery Mobile 库，一切都会正常工作（请参阅最后的 jsFiddle）。
这个实现怎么样

$('#home').on('pageinit', function(){
    var ua = navigator.userAgent.toLowerCase(),
        page = '', 
        role='dialog';

    switch(true) {
        case (ua.indexOf("android") > -1):
            page = '#android';
            break;
        case (ua.indexOf("windows phone") > -1):
            page = '#winPhone';
            break;
        case (ua.indexOf("blackberry") > -1):
            page = '#Blackberry';
            break;
        case (ua.indexOf("bb10") > -1):
            page = '#bbTen'; 
            break;
        case ($(window).width() < 599):
            page = '#generic';
            break;
    }
    if (page.length) {
        $.mobile.changePage(page, {transition:'pop', role:role});
        return false;
    }    
});

这里正在运行jsFiddle

【讨论】：

感谢您的回答。我喜欢你对 switch 语句所做的事情，我在想象它时遇到了一些麻烦。

【解决方案3】：

我也有这个问题，如果我在加载页面时有条件地打开了一个弹出窗口，在 Chrome 浏览器中（不是在 FF 中）修复结果是将库更新到 jqm 1.3.1。

就是这样。在 FF 和 Chrome 中测试。

请注意，jsfiddle.com 上作为选项提供的 1.3.0b 不起作用。 1.3.1 可以。

然后绑定到pageshow事件：

jQuery(document).on ( 'pageshow', function(event) {
    $( '#popupID' ).popup('open'); 
});

【讨论】：