පිටුව නැවත පූරණය නොකර URL වෙනස් කරන්නේ කෙසේද?

පිටුව නැවත පූරණය නොකර වත්මන් පිටුවෙහි URL වෙනස් කිරීමට මට ක්‍රමයක් තිබේද?

හැකි නම් # හැෂ් වලට පෙර කොටස වෙත පිවිසීමට මම කැමතියි .

මට අවශ්‍ය වන්නේ වසමෙන් පසුව කොටස වෙනස් කිරීම පමණි , එබැවින් මම හරස් වසම් ප්‍රතිපත්ති උල්ලං ting නය කිරීමක් මෙන් නොවේ.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

මෙය දැන් Chrome, Safari, Firefox 4+ සහ Internet Explorer 10pp4 + වලින් කළ හැකිය!

වැඩි විස්තර සඳහා මෙම ප්‍රශ්නයේ පිළිතුර බලන්න: හැෂ් හෝ පිටුව නැවත පූරණය නොකර නව URL සමඟ ලිපින තීරුව යාවත්කාලීන කිරීම

උදාහරණයක්:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

window.onpopstateපසු / ඉදිරියට බොත්තම් සංචලනය හඳුනා ගැනීමට ඔබට භාවිතා කළ හැකිය:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

බ්‍රව්සර් ඉතිහාසය හැසිරවීම පිළිබඳ වඩාත් ගැඹුරින් බැලීමට මෙම MDN ලිපිය බලන්න .

HTML5 විසින් පිළිවෙලින් ඉතිහාස සටහන් එක් කිරීමට හා වෙනස් කිරීමට ඉඩ සලසන ක්‍රම history.pushState()සහ history.replaceState()ක්‍රම හඳුන්වා දෙන ලදි .

window.history.pushState('page2', 'Title', '/page2.php');

මේ ගැන වැඩි විස්තර මෙතැනින් කියවන්න

ඔබට යූආර්එල් වෙනස් කිරීමට අවශ්‍ය නමුත් බ්‍රව්සර් ඉතිහාසයට ප්‍රවේශය එක් කිරීමට අවශ්‍ය නැතිනම් ඔබට HTML5 ආදේශන ස්ටේට් භාවිතා කළ හැකිය :

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

මෙය පසුපස බොත්තම් ක්‍රියාකාරිත්වය 'බිඳ දමනු ඇත'. පින්තූර ගැලරිය වැනි සමහර අවස්ථාවන්හිදී මෙය අවශ්‍ය විය හැකිය (ඔබ බැලූ සෑම රූපයක් හරහාම ආපසු ගමන් කරනවා වෙනුවට පසුපස බොත්තම ගැලරි දර්ශක පිටුවට ආපසු යාමට ඔබට අවශ්‍ය නම්) සෑම රූපයකටම ආවේණික url එකක් ලබා දෙයි.

මෙන්න මගේ විසඳුමයි (newUrl යනු ඔබගේ නව URL ය.

history.pushState({}, null, newUrl);

සටහන: ඔබ HTML5 බ්‍රව්සරයක් සමඟ වැඩ කරන්නේ නම් ඔබ මෙම පිළිතුර නොසලකා හැරිය යුතුය. අනෙක් පිළිතුරු වලින් දැකිය හැකි පරිදි මෙය දැන් කළ හැකිය.

පිටුව නැවත පූරණය නොකර බ්‍රව්සරයේ URL වෙනස් කිරීමට ක්‍රමයක් නොමැත . අවසන් වරට පටවන ලද පිටුව කුමක්ද යන්න URL ය නියෝජනය කරයි. ඔබ එය වෙනස් කළහොත් ( document.location) එවිට එය පිටුව නැවත පූරණය වේ.

එක් පැහැදිලි හේතුවක් නම්, ඔබ www.mysite.comබැංකු පිවිසුම් පිටුවක් මෙන් වෙබ් අඩවියක් ලියයි . එවිට ඔබ පැවසීමට බ්‍රව්සර් URL තීරුව වෙනස් කරයි www.mybank.com. ඔවුන් සැබවින්ම බලන බව පරිශීලකයා මුළුමනින්ම නොදැන සිටියි www.mysite.com.

parent.location.hash = "hello";

නවීන බ්‍රව්සර් සහ HTML5 වල , pushStateකවුළුව මත හැඳින්වෙන ක්‍රමයක් ඇත history. එමඟින් URL එක වෙනස් කර පිටුව පූරණය නොකර ඉතිහාසයට තල්ලු කරනු ඇත.

ඔබට එය මේ ආකාරයෙන් භාවිතා කළ හැකිය, එයට පරාමිති 3 ක්, 1) රාජ්‍ය වස්තුව 2) මාතෘකාව සහ URL යක් ගත වේ:

window.history.pushState({page: "another"}, "another page", "example.html");

මෙය URL වෙනස් කරයි, නමුත් පිටුව නැවත පූරණය නොකරයි. එසේම, පිටුව තිබේදැයි එය පරික්ෂා නොකරයි, එබැවින් ඔබ URL වෙත ප්‍රතික්‍රියා කරන ජාවාස්ක්‍රිප්ට් කේතයක් කරන්නේ නම්, ඔබට ඔවුන් සමඟ මේ ආකාරයෙන් වැඩ කළ හැකිය.

ද ඇත history.replaceState()එය ඒ වෙනුවට අලුත් එකක් නිර්මාණය වත්මන් ඉතිහාසය වෙනස් කරනු ඇත හැර, හරියටම එම දෙයක් කරනවා වන!

එසේම තිබේදැයි පරීක්ෂා කිරීම සඳහා ඔබට ශ්‍රිතයක් නිර්මාණය කළ හැකිය history.pushState, ඉන්පසු අනෙක් ඒවා සමඟ ඉදිරියට යන්න:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

පිටුව නැවත පූරණය නොවන #for සඳහා ඔබට වෙනස් කළ හැකිය <HTML5 browsers. හැෂ් ටැග් අනුව SPA කිරීමට කෝණික භාවිතා කරන්නේ එයයි ...

වෙනස් #කිරීම තරමක් පහසුය, එසේ කිරීම:

window.location.hash = "example";

ඔබට එය මේ ආකාරයෙන් හඳුනාගත හැකිය:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Vivart සහ ge1701 දැනටමත් සඳහන් කර ඇති පරිදි HTML5 replaceState යනු පිළිතුරයි. කෙසේ වෙතත් එය සියලු බ්‍රව්සර් / අනුවාද වල සහය නොදක්වයි. History.js HTML5 තත්වයේ අංගයන් ඔතා HTML4 බ්‍රව්සර් සඳහා අමතර සහය ලබා දෙයි.

HTML5 ට පෙර අපට භාවිතා කළ හැකිය:

parent.location.hash = "hello";

සහ:

window.location.replace("http:www.example.com");

මෙම ක්‍රමය මඟින් ඔබේ පිටුව නැවත පූරණය වනු ඇත, නමුත් HTML5 විසින් history.pushState(page, caption, replace_url)ඔබේ පිටුව නැවත පූරණය නොකළ යුතු බව හඳුන්වා දෙන ලදි .

ඔබ කිරීමට උත්සාහ කරන්නේ පරිශීලකයින්ට පිටු පිටු සලකුණු කිරීමට / බෙදා ගැනීමට ඉඩ දෙන්නේ නම් සහ එය නිවැරදි URL එකක් වීමට ඔබට අවශ්‍ය නොවන්නේ නම් සහ ඔබ වෙනත් කිසිවක් සඳහා හැෂ් නැංගුරම් භාවිතා නොකරන්නේ නම්, ඔබට මෙය දෙකකින් කළ හැකිය කොටස්; ඔබ ඉහත සාකච්ඡා කළ location.hash භාවිතා කර, පසුව මුල් පිටුවෙහි චෙක්පතක් ක්‍රියාත්මක කරන්න, එහි හැෂ් නැංගුරමක් සහිත URL එකක් සෙවීමට සහ පසුව ලැබෙන ප්‍රති .ලය වෙත ඔබව හරවා යවනු ලැබේ.

උදාහරණයක් වශයෙන්:

1) පරිශීලකයා සක්‍රීයයි www.site.com/section/page/4

2) පරිශීලකයා යම් ක්‍රියාමාර්ගයක් ගන්නා අතර එය URL එක www.site.com/#/section/page/6(හැෂ් සමඟ) වෙනස් කරයි. ඔබ 6 වන පිටුව සඳහා නිවැරදි අන්තර්ගතය පිටුවට පටවා ඇති බව පවසන්න, එම නිසා හැෂ් හැරුණු විට පරිශීලකයා එතරම් කලබල නොවනු ඇත.

3) පරිශීලකයා මෙම URL ය වෙනත් කෙනෙකුට යවයි, නැතහොත් එය පිටු සලකුණු කරයි

4) වෙනත් අයෙකු හෝ පසු දිනක එම පරිශීලකයා වෙත යයි www.site.com/#/section/page/6

5) කේතය www.site.com/භාවිතා කරන්නා www.site.com/section/page/6මේ වගේ දෙයක් භාවිතා කරමින් පරිශීලකයා වෙත හරවා යවයි :

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

තේරුමක් ඇති බලාපොරොත්තුව! සමහර අවස්ථාවන්ට එය ප්‍රයෝජනවත් ප්‍රවේශයකි.

පිටුව නැවත පූරණය නොකර URL වෙනස් කිරීමේ කාර්යය පහත දැක්වේ. එය සහය දක්වන්නේ HTML5 සඳහා පමණි.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

මෙම loction ඕනෑම වෙනස්කම් (එක්කෝ window.locationහෝ document.locationඔබ URL එක කෑල්ල වෙනස් නෑ නම්), ඒ අලුත් URL එක මත ඉල්ලීම හේතු වනු ඇත. ඔබ URL වෙනස් කරන්නේ නම්, ඔබ URL එක වෙනස් කරයි.

ඔබ දැනට භාවිතා කරන URL වලට ඔබ අකමැති නම්, Apache හි mod_rewrite වැනි සේවාදායක පාර්ශවීය URL නැවත ලිවීමේ ක්‍රම භාවිතා කරන්න.

ඔබට නැංගුරම් ටැග් එකතු කළ හැකිය. මම මෙය මගේ වෙබ් අඩවියේ භාවිතා කරන අතර එමඟින් ගූගල් විශ්ලේෂණ සමඟ පුද්ගලයින් පිටුවට පිවිසෙන දේ සොයා ගැනීමට මට හැකි වේ.

මම නැංගුරම් ටැගයක් එක් කර පසුව මට නිරීක්ෂණය කිරීමට අවශ්‍ය පිටුවේ කොටස:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

තෝමස් Stjernegaard Jeppesen විසින් උල් පිටතට ලෙස, ඔබ භාවිතා කළ හැකි History.js ඔබගේ Ajax සබැඳි සහ යෙදුම් හරහා පරිශීලක navigates අතර URL එක පරාමිතීන් වෙනස් කිරීමට.

එම පිළිතුරෙන් වසරකට ආසන්න කාලයක් ගත වී ඇති අතර History.js වර්ධනය වී වඩාත් ස්ථාවර හා හරස් බ්‍රව්සරයක් බවට පත්විය. දැන් එය HTML5- අනුකූලතාවයේ මෙන්ම බොහෝ HTML4 පමණක් බ්‍රව්සර්වල ඉතිහාස තත්වයන් කළමනාකරණය කිරීමට භාවිතා කළ හැකිය. මෙම නිරූපණය තුළ ඔබට එය ක්‍රියාත්මක වන ආකාරය පිළිබඳ උදාහරණයක් දැකිය හැකිය (එසේම එහි ක්‍රියාකාරීත්වය සහ සීමාවන් උත්සාහ කිරීමට හැකිවීම.

මෙම පුස්තකාලය භාවිතා කරන්නේ කෙසේද සහ ක්‍රියාත්මක කරන්නේ කෙසේද යන්න පිළිබඳව ඔබට කිසියම් උදව්වක් අවශ්‍ය නම්, නිරූපණ පිටුවේ ප්‍රභව කේතය දෙස බැලීමට මම ඔබට යෝජනා කරමි: එය කිරීම ඉතා පහසු බව ඔබට පෙනෙනු ඇත.

අවසාන වශයෙන්, හැෂ් (සහ හැෂ්බෑන්ග්) භාවිතා කිරීම පිළිබඳ ගැටළු මොනවාද යන්න පිළිබඳ සවිස්තරාත්මක පැහැදිලි කිරීමක් සඳහා, බෙන්ජමින් ලුප්ටන් විසින් මෙම සබැඳිය බලන්න .

history.pushState()HTML 5 ඉතිහාස API වෙතින් භාවිතා කරන්න .

වැඩි විස්තර සඳහා HTML5 ඉතිහාස API වෙත යොමු වන්න .

ඔබේ යෙදුමේ ඕනෑම තැනක සිට ඔබට මෙම සුන්දර හා සරල ශ්‍රිතය භාවිතා කළ හැකිය.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

ඔබට URL සංස්කරණය කිරීම පමණක් නොව, මාතෘකාව සමඟ මාතෘකාව යාවත්කාලීන කළ හැකිය.

හැමෝටම ගොඩක් ප්‍රයෝජනවත්.

මේ සියල්ල ඔබට නැවත පූරණය නොකර සැරිසැරීමට අවශ්‍ය වනු ඇත

# add setting without reload 
parent.location.hash = "setting";

// if url change do somthing 
window.addEventListener('locationchange', function(){
    console.log('url changed!');
})


// remove #setting without reload 

history.back();