jquery mobile - changePage“跳转”回旧页面




jquery-mobile webkit (4)

我有一个jQuery Mobile应用程序的大问题:我使用自定义函数(它们由onClick触发)来切换与currentPage的页面。

它只发生在Android设备上的网站已经改变(由于Ajax请求)与集成的浏览器。 iOS和Chrome的作品不错。

点击元素后,动画开始,但在结束之前,会切换回旧页面。 半秒钟后,它切换回新的。

我在这里制作了一个bug的电影: http//www.youtube.com/watch?v = sXxvVUxniNg

非常感谢你

代码(CoffeeScript):

class Guide

    @categoriesLoaded = false

    @loadSearch: ->

        $.mobile.changePage $("#guide"),
            transition: 'slide'
            changeHash: false

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) ->
                output = Mustache.render $("#tmpl-guide-categories-select").html(), 
                    categories: data

                $("#guide-search-category").append output

                $("#guide-search-category").val($("#guide-search-category option:first").val());

window.WgSwitchGuide = ->
        Guide.loadSearch

我在android和ios上都有同样的问题。 对我来说,这是发生沉重的页面,即复杂的元素等网页看起来像你正在使用“幻灯片”过渡,这也是我使用的。 取出页面转换(即$ .mobile.changePage(“page.html”,{transition:“none”}))为这些页面解决了这个问题给我。 希望这可以帮助。

如果要保留转换,可以尝试使用$ .mobile.loadPage显示上一页时首先预加载页面,然后显示转换。 我自己正在探索这条路线,但这可能值得尝试。

编辑:好的 - 我探讨了最后的建议,这似乎并没有工作。 将坚持第一个选项。


你会尝试添加事件stopPropagation和preventDefault方法在第一页的点击事件? 这样,click事件的默认动作就不会被触发。 此外,stopPropagation可以防止事件冒泡DOM树,从而阻止任何父处理程序被通知事件。

  • event.stopPropagation();
  • event.preventDefault();

例:

$("p").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    // change page
});

我有同样的问题。 而且我尝试了一切,最后我终于解决了。 我发现的错误主要是在浏览器内。 所以我将pushStateEnabled的配置设置为false。 我做了以下操作,添加了这个脚本。

<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>

应该在调用jquery-mobile脚本之前添加,以获取更多信息,您可以在JQuery描述中看到它

它解决了问题不再回头。


在尝试了几个星期来找到解决方案之后,我最终篡改了JQM库以禁用一个接一个的页面转换。 这不是一个好的解决方案,但是这是唯一能够工作的东西。

我得到的页面跳回$ .mobile.changePage和锚链接。 我使用幻灯片转换,但删除它并没有解决问题。 将pushStateEnabled设置为false也不起作用。 跳跃发生在所有设备和浏览器上(我测试过)。

所以这就是我对JQM库做的(v1.3.2)。

在定义$ .mobile.changePage函数之前,我添加了:

var justChangedPage = false;

然后在函数内部有一行:

if ( pbcEvent.isDefaultPrevented()) {
    return;
}

我改为:

if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
    return;
}

然后在$ .mobile.changePage函数的这部分之后:

if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
    settings.dataUrl = documentUrl.hrefNoHash;
}

我补充说:

justChangedPage = true;
setTimeout(function() {
    justChangedPage = false;
}, 500);

(把它放在函数中是不行的 - 所有这些东西在单个页面转换中不止一次执行,而半秒钟似乎是阻止页面跳转的最小超时。

我希望这可以帮助别人,即使它是一个黑客...







android-browser