iOS 上的 Photoswipe 画廊关闭事件答案

【问题标题】：Photoswipe gallery close event on iOSiOS 上的 Photoswipe 画廊关闭事件
【发布时间】：2012-06-05 01:41:25
【问题描述】：

我已经在我最近使用 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>

【问题讨论】：

标签： javascript ios ios5 jquery-mobile photoswipe

【解决方案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();
}
});

【讨论】：