Question

我正在玩jquery和js，试图为PHP网站构建一个ajax覆盖图像查看器。将此代码包含在“图库页面”的底部，查看器将打开，我可以使用查看器中的下一个和上一个链接进行导航。但后退按钮和历史记录很难理解。浏览器经常只显示只显示ajax调用的响应，而不会显示基础页面和css文件。

也许有人知道在这种情况下通常会发生什么？我想了解为什么 back 有时会导致页面损坏，即只有ajax响应。

<script type="text/javascript">

    $(document).ready(function() {

        function loadOverlay(href) {
            $.ajax({
                    url: href,
                })
                .done(function( data ) {
                    var theoverlay = $('#flvr_overlay');
                    theoverlay.html( data );

                    var zoompic = $('#zoompic');

                    zoompic.load(function() {
                        var nih = zoompic.prop('naturalHeight');
                        var photobox = $('#photobox');
                        if($(window).width() >= 750){
                            photobox.css('height',nih);
                        }
                        theoverlay.show();
                        $('body').css('overflow-y','hidden');

                        $(window).resize(function () {
                            var viewportWidth = $(window).width();
                            if (viewportWidth < 750) {
                                photobox.css('height','auto');
                                zoompic.removeClass('translatecenter');
                            }else{
                                photobox.css('height',nih);
                                zoompic.addClass('translatecenter');
                            }
                        });
                    });
            });
            return false;
        }

        var inithref = window.location.href;

        $(window).on('popstate', function (e) {
            if (e.originalEvent.state !== null) {
                //load next/previous
                loadOverlay(location.href);
            } else {
                //close overlay
                $('#flvr_overlay').hide().empty();
                $('body').css('overflow-y','scroll');
                history.replaceState(null, inithref, inithref);
            }
        });

        $(document).on('click', '.overlay', function () {
            var href = $(this).attr('href');
            history.pushState({}, href, href);    
            loadOverlay(href);
            return false;
        });
    });

</script>

修改

点击转发有效：

/ photos（普通页面）
/ photos / 123（与下面的'/ photos'重叠）
/ locations / x（普通页面）
/ photos / 567（覆盖'/ locations / x'）

点击返回会在第2点给我一个破碎的视图。

Answer 1

您是否需要阻止popstate中的默认行为以阻止浏览器实际导航回上一页？

Answer 2

你必须通过自己的代码来管理它。

您有几个选择。

使用localstorage记住上一个查询
使用cookies（但不要）

使用hash.location.hash =＆＃34;上次搜索＆＃34;更新网址。您将再次查看哈希，如果已设置，则执行另一个ajax来填充数据。如果你已经完成了localstorage，那么你可以只缓存最后一个ajax请求。

我会选择本地存储和哈希解决方案，因为这是某些网站所做的事情。您还可以复制并粘贴URL，它只会加载相同的查询。这非常好，我想说非常容易

更改为document.location.hash =＆＃34;最新搜索＆＃34;并没有改变任何东西.t。

这将进入jQuery代码的其余部分：

// Replace the search result table on load.
if (('localStorage' in window) && window['localStorage'] !== null) {
    if ('myTable' in localStorage && window.location.hash) {
        $("#myTable").html(localStorage.getItem('myTable'));
    }
}

// Save the search result table when leaving the page.
$(window).unload(function () {
    if (('localStorage' in window) && window['localStorage'] !== null) {
        var form = $("#myTable").html();
        localStorage.setItem('myTable', form);
    }
});

Answer 3

另一种解决方案是在使用后退按钮时使用INPUT字段进行保留。所以，我喜欢这样：

我的页面包含一个隐藏的输入：

动态加载ajax内容后，我会在显示内容之前将内容备份到隐藏字段中：

function loadAlaxContent()
{
    var xmlRequest = $.ajax({
            //prepare ajax request
            // ...
        }).done( function(htmlData) {
            // save content
            $('#bfCache').val( $('#bfCache').val() + htmlData);

            // display it
            displayAjaxContent(htmlData);
        });
}

最后要做的是在页面加载时测试隐藏的字段值。如果它包含某些内容，因为后退按钮已被使用，所以，我们只需要显示它。

jQuery(document).ready(function($) {

    htmlData = $('#bfCache').val();

    if(htmlData)
        displayAjaxContent( htmlData );
});

ajax图像查看器，后退按钮和历史记录 - 缺少html和css

修改

3 个答案: