Question

我使用jQueryMobile在我最近的一个移动应用程序中实现了神话般的photoswipe库，我遇到了一个与iOS 5同时使用它的小问题（可能是其他人，但我只是得到了iOS 5设备。）

以下是实施的javascript

<script type="text/javascript">

    (function (window, $, PhotoSwipe) {

        $(document).ready(function () {

            $('div.gallery-page')
                    .live('pageshow', function (e) {

                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));

                        photoSwipeInstance.show(0);

                        return true;

                    })

                    .live('pagehide', function (e) {

                        var 
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }
                        console.log($(e.target));
                        history.back();

                        return true;

                    });

        });

    } (window, window.jQuery, window.Code.PhotoSwipe));

</script>

上面的示例与实现指南完全一样，但有一点不同：当引发pageshow事件并附加实例时，我正在调用“photoSwipeInstance.show（0）;”以便立即显示画廊。

这一切都很好，只是当我从工具栏关闭图库时，它会回到静态页面而不是从它调用的页面。

我的第一个想法是实现针对“onHide”事件的方法并执行“history.back（）;”语句：

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
    history.back();
});

这在Android上就像一个魅力，但在iOS上没有发生任何事情，所以我想到了iOS设备的双重历史记录：

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
    console.log(navigator.appVersion);
    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        history.go(-2);
    } else {
        history.back();
    }

});

但仍然没有运气，iOS只是坐在那里嘲笑我。有没有人知道重定向到附加了photoswipe实例的页面的最佳方法，而不是回到实际的html页面？以下是最终JS标记的示例：

<script type="text/javascript">

(function (window, $, PhotoSwipe) {

    $(document).ready(function () {

        $('div.gallery-page')
                .live('pageshow', function (e) {

                    var 
                        currentPage = $(e.target),
                        options = {},
                        photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));

                    // onHide event wire back to previous page.
                    photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
                        console.log(navigator.appVersion);
                        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
                            history.go(-2);
                        } else {
                            history.back();
                        }

                    });

                    photoSwipeInstance.show(0);

                    return true;

                })

                .live('pagehide', function (e) {

                    var 
                        currentPage = $(e.target),
                        photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                    if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                        PhotoSwipe.detatch(photoSwipeInstance);
                    }

                    return true;

                });

    });

} (window, window.jQuery, window.Code.PhotoSwipe));

</script>

Answer 1

我有类似的问题 - 我相信iOS上的onHide事件没有触发，所以我通过听ToolBar事件来解决它：

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){
if(e.toolbarAction === 'close'){
    //i needed to use a specific location here: window.location.href = "something";
    //but i think you could use the history back
    history.back();
}
});

iOS上的Photoswipe画廊关闭活动

1 个答案: