Jqueryをベースに、Ajaxが要求したpage_jqueryのブラウザの戻る・進む機能とページ更新機能の問題を解決

必須の jquery.history.js プラグイン
巨人の肩の上で、プラグインに基づいて次の前後の作業が完了します。
私はいくつかのアルバイトをし、誰かがページを完成させるのを手伝っていたときに、ajax リクエストを作成しました。ブラウザの更新、戻る、進むボタンが無効であることがわかりました。そこでグーグルで調べてみました。いくつかの回避策が見つかりました。 jquery.hashchange.js プラグインの 1 つが時々失敗し、ページが複数回リクエストされることがあります。
別のプラグインを使用してみましたが、私の要件を完全に満たしていました。
一般的な考え方は、URL にパラメータを追加することであり、すべての作業はこれらのパラメータに基づいて完了します。

コードをコピー コードは次のとおりです:

// 受信メッセージの最初の出現をインターセプトします。 string 必須の文字列。 fieldName タグと endTag の間の内容
function getQueryString(url,fieldName,tag,endTag){
var urlString = url;//document.location.href;
if(urlString != null){
var typeQu = フィールド名タグ;
var urlEnd = urlString.indexOf(typeQu);
if(urlEnd != -1){
var paramsUrl = urlString.substring(urlEnd typeQu.length); >var isEnd = paramsUrl.indexOf(endTag);
if(isEnd != -1){return paramsUrl.substring(0, isEnd);}
else{return paramsUrl;}
else {return null;}
}
else{return null;}
}
//デフォルトページを設定します
function setDefaultPage(){
$("#contul ul " ).html("");
$("#contul").hide();
$("#top スパン") 。 find("a").removeClass("active");
$("#top span:eq(0)").find("a").addClass("active");
🎜>//最後の文字を検出します
function checkCode(getParme){
if (getParme!=null){
getParme=getParme.toUpperCase();
var codeNum=getParme.charCodeAt(0) )
}
if(codeNum>=65&&codeNum$("#top span").find("a").removeClass("active");
// alert((codeNum-64));
$("#top span:eq(" (codeNum-64) ")").find("a").addClass("active"); /$("#cont").html("");
$("#cont").hide();
$("#contul").find("ul").html( "");
runAjaxGetCode(getParme);
}else{
setDefaultPage();
}
//ajax 操作を実行します
function runAjaxGetCode(getParme){
//$("#cont").fadeOut('fast',function(){
$.ajax({
cache:false,
type:'get',
url:'sxml/searchByWord' getParme '.xml',
beforeSend:function(XMLHttpRequest){
$('

データを読み込んでいます。お待ちください.insertBefore( $("#cont") )
.fadeIn('slow');
},
成功: function(data,textStatus){
$( "#contul").show().find("ul").html("");
$(".quick-alert").fadeOut('slow', function(){
$ (this).remove();
$("item",data).each(function(i, domEle){
$("#contul ul").append("

" getParme ":" $(domEle).children("title").text() " a>

");
if(($(this).index()-6)%6==0){
$("#contul ul").append("< ;div class='clear'>

");
}
});
});
},
error: function(){
alert( 「申し訳ありませんが、データの取得に失敗しました。F5 キーでページを更新して、もう一度お試しください。問題が解決しない場合は、Web サイト管理者に連絡して解決してください。」 ");
}
});
// });
}
//パラメータを取得
function getParmeter(){
getParme=getQueryString(urlParem,' #javascript=tagCode("','','")');
checkCode(getParme)
}
//getParmeter()
//クリックトリガー
"#top span:gt(0)").click(function(){
$(".quick-alert").remove();
}); $.history.init(function(url) {
//load(url == "" ? "1" : url);
if(url.length>0){
getParme=getQueryString( url,'javascript=tagCode("','','")');
if (getParme!=null){
getParme=getParme.toUpperCase();
}
}
else{
setDefaultPage();
}
});
//ページ上のその他の操作
var
// function getHash(){
//var curHash = location.hash;
//alert(curHash);
var urlParem=document.location.href;
var topHtml;
var $_objTop=$("#top")
topHtml=$_objTop.html(); for (var i=65;i {
topHtmlLink ="" String.fromCharCode(i) "";
}
$_objTop.html(topHtml topHtmlLink);



jquery.history.js プラグインのデモ

いくつかのデモはここで入手でき、リポジトリに含まれています
このサイト自体はプラグイン上に構築されています:




コードをコピー


コードは次のとおりです:

(function($){
var origContent = "";
functionloadContent(hash) {
if(hash != "") {
if(origContent == "") {
origContent = $('#content').html();
}
$('#content').load(hash ".html",
function() { prettyPrint() });
} else if(origContent != "") {
$('#content').html(origContent);
}
$ (document).ready(function() {
$.history.init(loadContent);
$('#navigation a').click(function(e) {
var url = $(this ).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url); });
});
})(jQuery);