Question

我有一个网站使用XMLHttpRequests在用户点击链接时请求部分网页。

相关代码：

function requestPage(url, push) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            main.innerHTML = xhr.responseText;
            attachLinkClickHandlers(main); // `main` = container element

            if (push)
                window.history.pushState(url, title, url);
        }
    };

    xhr.open('GET', url);
    xhr.setRequestHeader('Content-Only', 1); // Server responds to Content-Only header by not sending everything surrounding the main content.
    xhr.send();
}

window.addEventListener('popstate', function (e) {
    var page = e.state;
    requestPage(page, false);
});

window.history.replaceState(location.href, document.title, location.href);
attachLinkClickHandlers(document);

在链接上点击：

requestPage(link.href, true);

服务器响应示例：

正常请求回复：

<!doctype html>
<html>
    <head>
        ...stuff...
    </head>
    <body>
        ...stuff...
        <main>
            <h1>Content</h1>
            <p>Content Content</p>
        </main>
        ...stuff...
    </body>
</html>

设置Content-Only标头的响应：

<h1>Content</h1>
<p>Content Content</p>

一切按预期工作（页面加载，后退/前进按钮导航在网站内），除 ...如果我点击外部 link（没有附加点击处理程序，因为那将是交叉原点），然后按下浏览器上的后退按钮，我接受了XHR的响应 - 只是内容，没有<html>，<head>或<body>标记，也就是没有CSS或JavaScript。

如果发生这种情况，如何让浏览器加载完整页面？

Answer 1

您是否使用相同的网址来检索两种不同类型的内容？

如果是这样，我有完全相同的问题。我使用相同的URL和不同的请求标头来返回html应用程序页面或一些JSON数据。在history.pushState调用和导航之后单击返回将导致在浏览器中显示JSON响应（因为这是与URL关联的浏览器缓存的最后一个响应）。

浏览器似乎只跟踪网址及其响应。使用XHR请求标头指定您实际需要的内容类型不是浏览器跟踪的内容。因此，当您离开然后返回时，所有浏览器都有URL（可能还有缓存的响应）。

我的修复方法是更改实际从用于修改浏览器历史记录的JSON数据中获取的URL。

// on click of product item 123
var url = 'http://<webserver>/products/123',
    title = 'Product 123';

history.pushState({
        url: url,
        title: title
    }, title, url);

product = $.getJSON(url + '?json=1'); // make the url different

我整理了一些小测试，以突出其工作原理https://github.com/robbishop/history-api-test

我在几个浏览器中尝试了这一点并注意到Firefox（版本50.0）与Chrome的工作方式不同。例如，如果您修改页面内容，然后使用虚假URL调用history.pushState，则向后导航，单击返回。在Chrome中，您找不到404页面（因为该URL不是真实的），但在Firefox中，它实际上会在您上次看到它时恢复该页面。所以也有一些浏览器差异，但我认为在直接操作浏览器历史记录时，将URL与单一内容类型相关联可能更安全

导航离开网站

1 个答案: