history API を使用しようとしているリンクがあります。これは、シングルページ アプリケーションのインデックス ページにあります。
<div id="main">
<div id="logoutlinkdiv">
<a href = "logout.php" id="logoutlinka">Log out</a>
</div>
</div>
リンクをクリックすると、インデックス ページの div にテンプレートが読み込まれ#main、URL が変更されますxxx/logout.php。スワップを担当するJavaScriptは次のとおりです。
function supports_history_api() {
return !!(window.history && history.pushState);
}
function swapPage(href) {
var req = new XMLHttpRequest();
req.open("GET",
"templates/" + // ALL MY TEMPLATES ARE IN THIS DIRECTORY
href.split("/").pop(),
false);
req.send(null);
if (req.status == 200) {
document.getElementById("main").innerHTML = req.responseText;
return true;
}
return false;
}
function addClicker(link) {
link.addEventListener("click", function(e) {
e.preventDefault();
if (swapPage(link.href)) {
history.pushState(null, null, link.href);
}
}, true);
}
function setupHistoryClicks() {
addClicker(document.getElementById("logoutlinka"));
}
$(document).ready(function() {
window.onload = function() {
if (!supports_history_api()) { return; }
setupHistoryClicks();
window.setTimeout(function() {
window.addEventListener("popstate", function(e) {
swapPage(location.pathname);
}, false);
}, 1);
}
});
#mainすべてがうまくいきますが、戻るボタンをクリックすると、テンプレート ディレクトリがdivに読み込まれます。これは、 が にlocation.pathname評価され/~Eamon/、href.split("/").pop()- の後は単なる空の文字列になるために発生します。したがって、関数で指定されているディレクトリであるため、templates ディレクトリが読み込まれswapPageます。
明らかに、戻るボタンをクリックしたときにプログラムに実行させたいのは、今起こったことを逆にすることだけです。#mainこの場合、リンクがクリックされる前に div にあったものに戻すことを意味します。前に持っていたものを「保存」して、戻るボタンをクリックしてロードするにはどうすればよいですか? ディレクトリ構造を変更するのと同じくらい簡単なことかもしれませんが、アプリケーションを SPA にしたいのです。
この件について私が読んだこと：