Question

我是第一次使用jQuery Mobile / Django移动网络应用程序。有疯狂的事情正在发生，我很确定它们可以归结为jQuery Mobile，因为我将Django的DEBUG设置为True并且我没有在那里得到任何错误，因为其中两个问题只出现在移动设备上。以下是我注意到的事情：

仅在移动设备上，退出我在http://chishenma.herokuapp.com/choose_category宣传该页面为测试版的弹出窗口时，我收回了一页，因此我无法真正进入该页面想。
仅限移动设备，当我尝试从http://chishenma.herokuapp.com/choose_category页面访问/ help_me_decide页面时，网址将更改为http://chishenma.herokuapp.com/choose_category/#/help_me_decide/，而不是通常的http://chishenma.herokuapp.com/help_me_decide/。
在移动设备和PC上，如果我从http://chishenma.herokuapp.com/help_me_decide/页面转到http://chishenma.herokuapp.com/help_me_decide/页面，则图片不会显示。但是，如果我刷新/ help_me_decide页面或使用其直接链接打开它，图像就会显示正常。

为什么会发生这些事情，我该怎么办呢？

以下是我的弹出脚本和HTML div（一个用于普通页面，一个用于/ help_me_decide页面）：

<script>
jQuery(document).on ( 'pageinit', '#one', function(event) {
setTimeout(function(){
    $( '#popupWelcome' ).popup(); 
    $( '#popupWelcome' ).popup('open'); 
},500);
});

jQuery(document).on ( 'pageinit', '#four', function(event) {
setTimeout(function(){
    $( '#popupDecideOMatic' ).popup(); 
    $( '#popupDecideOMatic' ).popup('open'); 
},500);
});

</script>

<div data-role="popup" id="popupWelcome" class="ui-content" data-theme="a" data-overlay-theme="b" style="max-width:300px;background-color:#FFFF99;">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
    <p>Welcome, and thanks for testing <strong>ChiShenMa</strong>!  Please kindly excuse the mess, this is still a work in progress.  Feel free to play around and let us know your feedback!</p>
</div>

<div data-role="popup" id="popupDecideOMatic" class="ui-content" data-theme="a" data-overlay-theme="b" style="max-width:300px;background-color:#FFFF99;">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
    <p>This is an early test of the <strong>Decide-O-Matic</strong>.  Swipe right if you like a picture and left if you don't.  After 10 swipes, we will match you with the perfect restaurant!</p>
</div>

如果还有其他代码我可以发布有用，请告诉我。这是整个项目：https://github.com/MichelleGlauser/Chishenma/

Answer 1

奥马尔帮我找到了解决方案。

他让我将data-history =“false”设置为'div data-role =“page”'中的一个属性，然后在该div中移动弹出脚本。
显然网址仅在iPhone上的移动Chrome中更改，而不是在Safari中更改，并且它不是问题，因为它会解析为预期的网址。
我学会了如何设置/ help_me_decide页面（'four'）通过http而不是AJAX加载，方法是在/ choose_category页面上为它添加'rel = external'。

由于弹出窗口正在闪烁并且/ help_me_decide页面上的图像未加载，我们在pagecontainershow上设置了一个弹出脚本，其中包含Timeout，如下所示：

$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if (activePage[0].id == "four") {
        setTimeout(function () {
            $("#popupDecideOMatic").popup().popup("open");
        }, 50);
        $(".slider", activePage).slick();
    }
});

但事实证明滑块实际上已经被初始化了，所以我们拿出'$（“。slider”，activePage）.slick（）;'并且出现了图像（不知道他们为什么不首先出现）。

类似的代码用于/ choose_category页面：

$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if (activePage[0].id == "one") {
        setTimeout(function () {
            $("#popupWelcome").popup("open");
        }, 50);
    }
});

图像轮播失败，除非使用jQuery Mobile刷新和奇怪的重定向

1 个答案: