AJAXページload/history.pushStateがウェブサイトからナビゲートした後正しく動作しない

私は、ユーザーがリンクをクリックしたときにXMLHttpRequestsを使用してウェブページの一部をリクエストするウェブサイトを持っています。AJAXページload/history.pushStateがウェブサイトからナビゲートした後正しく動作しない

関連するコード：リンクをクリックしたときに、

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>

すべてが意図したとおりに動作します（内のページの読み込み、戻る/進むボタンナビゲーションサイト）、除く...私はをクリックすると外部リンク（クリックハンドラが添付されていないため、クロスオリジンであるため）、ブラウザの「戻る」ボタンを押すと、XHRの応答となるものが挨拶されます。単に内容は<html> 、<head>、または<body>というタグで、CSSまたはJavaScriptのいずれも意味しません。

この場合、ブラウザにフルページをロードさせるにはどうすればよいですか？

出典

2016-10-18 Hatchet

同じURLを使用して2種類のコンテンツを取得していますか？

私はまったく同じ問題を抱えていました。私は同じURLと異なるリクエストヘッダーを使用して、HTMLアプリケーションページまたはJSONデータのいずれかを返していました。 history.pushStateの呼び出しとナビゲーションを終了すると、JSONレスポンスがブラウザに表示されます（ブラウザキャッシュがURLに関連付けた最後の応答だったため）。

ブラウザはURLとその応答のみを記録しているようです。 XHRリクエストヘッダーを使用して実際に望むコンテンツのタイプを指定することは、ブラウザーが追跡しているものではありません。だからあなたが離れて移動し、すべてのブラウザを返すときは、URL（とキャッシュされた応答）です。

JSONデータを実際に取得したURLをブラウザの履歴を変更するために使用した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を単一のコンテンツタイプに関連付ける方が安全かもしれません。

出典

2016-11-26 10:36:07

ありがとうございます！ – Hatchet

AJAXページload/history.pushStateがウェブサイトからナビゲートした後正しく動作しない

答えて

関連する問題