ここでの初心者の質問で申し訳ありませんが、おそらく簡単ですが、javascriptについて重要な何かが欠けています..
index.php、food_and_health.php、enlightenment.php、about_us.php の 4 つの HTML ページを含む ajax Web サイトがあります。インデックスではなく、3 つの ajax 関数があります。
そして、前後に使用するために popstate 関数を追加する必要があることを理解しています。現在、チュートリアルを検討しています。ご覧のとおり、コンソールログしかありません。
「foo が定義されていません」というコンソール メッセージが表示されたので、グローバル変数にしようとしましたが、それが問題なのかどうかよくわかりませんでした。
「foo」のIDを持つアンカーまたはHTMLには何もありませんが、js.fileでfooから「text」、および「cssmenu」に変更して、id = 'を追加しようとしましたhtml のアンカー タグの 1 つに foo' を追加しましたが、メッセージは同じです。
だから、それは私のajax関数内のローカル変数だと思います。実際、ページは前後を除いて機能し、ajax-page/ 状態に直接移動しようとすると機能します。これは、popstate 関数にデータを設定する必要があるため、pushstate-function のように、this.url のようなものがそこでも機能すると考えています。ない。）
しかし、popstate 関数を追加するにはどうすればよいでしょうか。ページごとに指定する必要がありますか、または、プッシュステート関数で行われるように this.url を取得し、プッシュステートに保存されるため、その状態を使用することができますか?
どうにかして、ajaxfuntionでもpopstateをリンクする必要があると思います..
2番目の質問、あなたはそれほど重要ではありません。コンソール ログに jQuery が表示されるのはなぜですか? それは「google-apis」が原因で、私のフォント (タンジェリン) のリンクですか? 私は jQuery を使用していないので、インデックス ページが jQuery を使用していることに驚きましたが、それが問題だと思います。私のコンソールには、jquery.1.8.2.min.js と、collectorjQuery.js があります。これらは「googleapis」からのものですか? :)
jsfiddle も追加します。これは私の food_and_health.php ページ、および私の css と js を示しています。(css はほとんど無視します。'ok' を探すために追加しただけです) :
http://jsfiddle.net/y0o39897/4/
また、cssmenu はフィドルでは開きませんが、少なくとも chrome と firefox では開きます。
これが私のjsで、少し苦労しています!
function Food(url) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('text').innerHTML = xmlhttp.responseText;
history.pushState({}, 'foo', url);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
foo.addEventListener('click', function (e) {
e.preventDefault();
Food(this.href);
return false;
}, true);
window.addEventListener("popstate", function(e) {
console.log(e);
});
私はこれについて多くのページを読みましたが、理解できる限りでは; pushstate は任意の状態 (私の場合は this.url)、クリックされた URL/アンカーを取り、その状態を保存します。popstate は、その状態を使用して、その html ページ内の ajax ページ間を前後にナビゲートします。たとえば、page2/ajaxfile.php から page1/someotherAjaxpage.php に戻りたい場合は、replacestate が必要です。これは正しいです？
長い質問と 2 つの質問で申し訳ありませんが、私は初心者なので、これについてできるだけ明確にし、完全に理解したいと考えています。そのため、jQuery を使用しないようにしています。
ajax-popstate-and javascript (jQuery ではない) を使用したチュートリアルを見つけるのに苦労しています。これについて助けてくれてありがとう:)