AJAX图像查看器，后按钮和历史记录 - 缺少HTML和CSS

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>

编辑

单击向前工作：

1. /照片（普通页面）
2. /photos/123（下面的"/照片"覆盖）
3. /locations/x（普通页面）
4. /photos/567（下面的'/locations/x'覆盖）

单击 back 给我点2点。

Answer 1

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

Answer 2

您必须通过自己的代码进行管理。

您有一些选择。

1. 使用localstorage记住最后一个查询
2. 使用cookie（但不要）

使用document.location.hash ="最后搜索"时，请使用哈希（Hash）更新URL。您将再次查看哈希，如果设置了哈希，则执行另一个AJAX以填充数据。如果您完成了localstorage，则可以缓存最后一个Ajax请求。

我会选择LocalStorage和Hash解决方案，因为这是某些网站所做的。您也可以复制并粘贴URL，它将加载相同的查询。这很不错，我会说非常易于访问

更改为document.location.hash ="最新搜索"没有更改任何内容。

这将进入其余的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

另一个解决方案是使用输入字段在使用后按钮时保留。所以，我确实喜欢：

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

一旦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 );
});