Question

我已经看了一会儿，觉得我错过了一些明显的东西......

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

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

我有两个问题：

1 - 有谁知道这里发生了什么？我已经尝试过和不返回虚假，我认为不应该重要，只是为了测试逃避。

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中查看它。

我已经尝试了一些其他参数，但不知道为什么它首先发生，我不知道从哪里开始。

Answer 1

我也有一个消失的对话问题 - 结果与早先试图摆脱“闪烁”有关 - 一个SO答案表明以下会阻止闪烁（它没有）：

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

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

Answer 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

Answer 3

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

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

请注意，1.3.0b（在jsfiddle.com上作为选项提供）不起作用。 1.3.1确实。

然后绑定到pageshow事件：

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

jQuery Mobile Dialog立即消失在Chrome中

3 个答案: