Jquery를 기반으로 Ajax에서 요청한 page_jquery의 브라우저 뒤로 및 앞으로 기능 및 페이지 새로 고침 기능 문제를 해결합니다.

필수 jquery.history.js 플러그인
거인의 어깨 위에서 플러그인을 기반으로 다음 전진 및 후진 작업이 완료됩니다!
몇 가지 아르바이트를 하다가 누군가 페이지 완성을 도우다가 Ajax 요청을 했습니다. 브라우저의 새로고침, 뒤로, 앞으로 버튼이 유효하지 않은 것으로 나타났습니다. 그래서 구글링해봤습니다. 몇 가지 해결 방법을 찾았습니다. jquery.hashchange.js 플러그인 중 하나가 실패하는 경우가 있으며 페이지가 여러 번 요청되는 경우도 있습니다.
다른 플러그인을 사용해 보았는데 내 요구 사항이 완벽하게 충족되었습니다.
일반적인 아이디어는 URL에 매개변수를 추가하는 것이며, 모든 작업은 이러한 매개변수를 기반으로 완료됩니다.

코드 복사 코드는 다음과 같습니다.

//들어오는 항목에서 첫 번째 항목을 차단합니다. 문자열 필수 문자열입니다. fieldName 태그와 endTag 사이의 내용
function getQueryString(url,fieldName,tag,endTag){
var urlString = url;//document.location.href;
if(urlString != null){
var typeQu = fieldName 태그;
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();
$("#cont").show()
$("#top 스팬") find("a").removeClass("active");
$("#topspan:eq(0)").find("a").addClass("active")
} 🎜>//마지막 문자 감지
function checkCode(getParme){
if (getParme!=null){
getParme=getParme.toUpperCase()
var codeNum=getParme.charCodeAt(0 )
}
if(codeNum>=65&&codeNum<=91){
$("#topspan").find("a").removeClass("active")// Alert((codeNum-64));
$("#topspan: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){
$('

데이터가 로드 중입니다. 잠시 기다려 주세요< /div> ;')
.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("

< a href='" $(domEle).children("link").text() "'>" getParme ":" $(domEle).children("title").text() " ");
if(($(this).index()-6)%6==0){
$("#contul ul").append("< ;div class='clear'>

");
}
});
});
},
error: function(){
경고( "죄송합니다. 데이터 수집에 실패했습니다. F5 키를 눌러 페이지를 새로 고친 후 다시 시도하세요. 문제가 계속되면 웹사이트 관리자에게 문의하여 해결하세요. ");
}
});
// });
}
//매개변수 가져오기
function getParmeter(){
getParme=getQueryString(urlParem,' #javascript=tagCode("','','")');
checkCode(getParme)
}
//getParmeter()
//트리거 클릭
$( "#top 스팬: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()
checkCode(getParme); 🎜>}
}
else{
setDefaultPage();
}
})
//페이지의 기타 작업
var getParme; function getHash(){
//var curHash = location.hash;
//alert(curHash)
//}
var urlParem=document.location.href;
var topHtml;
var topHtmlLink="";
var $_objTop;
$_objTop=$("#top")
topHtml=$_objTop.html(); for (var i=65;i <91;i )
{
topHtmlLink ="" String.fromCharCode(i) "";
}
$_objTop.html(topHtml topHtmlLink);



jquery.history.js 플러그인 데모

여기에서 일부 데모를 사용할 수 있으며 저장소에 포함되어 있습니다.
이 사이트 자체는 플러그인을 기반으로 구축되었습니다.

코드 복사

코드는 다음과 같습니다.

(function($){
var origContent = "";
function loadContent(hash) {
if(hash != "") {
if(origContent == "") {
origContent = $('#content').html();
}
$('#content').load(hash ".html",
function() { beautifulPrint() });
} 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)
return false; });
})
})(jQuery);