jQuery Mobile Dialog立即消失在Chrome中

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

1. 如果鏈接正確的jQuery和jQuery Mobile庫，一切正常（最后請參閱jsFiddle）。
2. 這個實現怎么樣？

$('#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'); 
});