Sayfay─▒ yeniden y├╝klemeden URLÔÇÖyi nas─▒l de─či┼čtiririm?


Al─▒nan cevaba git


Sayfay─▒ yeniden y├╝klemeden ge├žerli sayfan─▒n URL'sini de─či┼čtirebilmemin bir yolu var m─▒?

M├╝mk├╝nse # hash'tan ├Ânce k─▒sma eri┼čmek istiyorum.

Sadece etki alan─▒ndan sonraki k─▒sm─▒ de─či┼čtirmem gerekiyor , bu y├╝zden etki alanlar─▒ aras─▒ politikalar─▒ ihlal etmem gibi de─čil.

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

2185









Cevap say─▒s─▒n─▒ say: 18






Bu i┼člem art─▒k Chrome, Safari, Firefox 4+ ve Internet Explorer 10pp4 + ile yap─▒labilir!

Daha fazla bilgi i├žin bu sorunun cevab─▒na bak─▒n: Adres ├žubu─čunu karma olmadan yeni URL ile g├╝ncelleme veya sayfay─▒ yeniden y├╝kleme

├ľrnek:

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

Ard─▒ndan window.onpopstate geri / ileri d├╝─čmesi gezinmesini tespit etmek i├žin kullanabilirsiniz :

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

Taray─▒c─▒ ge├žmi┼čini manip├╝le etmeye daha ayr─▒nt─▒l─▒ bir bak─▒┼č i├žin bu MDN makalesine bak─▒n .


1903







HTML5 , s─▒ras─▒yla giri┼čleri eklemenizi ve de─či┼čtirmenizi sa─člayan history.pushState() ve history.replaceState() y├Ântemlerini tan─▒tt─▒ .

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

Buradan daha fazla bilgi edinebilirsiniz


514







URL'yi de─či┼čtirmek istiyorsan─▒z, ancak giri┼či taray─▒c─▒ ge├žmi┼čine eklemek istemiyorsan─▒z, HTML5 replaceState ├Â─česini de kullanabilirsiniz :

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

Bu, geri d├╝─čmesi i┼člevselli─čini 'k─▒racak'. Bu, bir resim galerisi gibi baz─▒ durumlarda (her bir resim i├žin kendi URL'sini verirken, g├Âr├╝nt├╝lemi┼č oldu─čunuz her resim i├žinde geri gitmek yerine geri d├╝─čmesine galeri dizin sayfas─▒na geri d├Ânmesini istedi─činizde) gerekebilir.


116







NOT: Bir HTML5 taray─▒c─▒ ile ├žal─▒┼č─▒yorsan─▒z, bu cevab─▒ yoksaymal─▒s─▒n─▒z. Di─čer cevaplarda da g├Âr├╝ld├╝─č├╝ gibi bu m├╝mk├╝n.

URL Sayfay─▒ yeniden y├╝klemeden taray─▒c─▒da de─či┼čiklik yapman─▒n bir yolu yoktur . URL, son y├╝klenen sayfan─▒n ne oldu─čunu g├Âsterir. De─či┼čtirirseniz ( document.location ) o zaman sayfay─▒ yeniden y├╝kler.

Bunun a├ž─▒k bir nedeni, www.mysite.com banka giri┼č sayfas─▒na benzeyen bir site yazman─▒zd─▒r . Ard─▒ndan s├Âylemek i├žin taray─▒c─▒ url ├žubu─čunu de─či┼čtirin www.mybank.com . Kullan─▒c─▒, ger├žekten bakt─▒klar─▒n─▒n fark─▒nda olmayacakt─▒r www.mysite.com .


103







─░┼čte benim ├ž├Âz├╝m├╝m (newUrl, ge├žerli olanla de─či┼čtirmek istedi─činiz yeni URL'nizdir):

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

88







 parent.location.hash = "hello";
 

81


2009-05-13





HTML5 replaceState, Vivart ve geo1701 taraf─▒ndan daha ├Ânce belirtildi─či gibi cevapt─▒r. Ancak, t├╝m taray─▒c─▒larda / s├╝r├╝mlerde desteklenmez. History.js, HTML5 durum ├Âzelliklerini sarar ve HTML4 taray─▒c─▒lar─▒ i├žin ek destek sa─člar.


25







Modern taray─▒c─▒larda ve HTML5'te , pushState pencerede ad─▒ verilen bir y├Ântem vard─▒r history . Bu, URLÔÇÖyi de─či┼čtirecek ve sayfay─▒ y├╝klemeden ge├žmi┼če itecektir.

Bu ┼čekilde kullanabilirsiniz, 3 parametre alacakt─▒r, 1) durum nesnesi 2) ba┼čl─▒k ve bir URL):

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

Bu, URLÔÇÖyi de─či┼čtirecek ancak sayfay─▒ yeniden y├╝klemeyecektir. Ayr─▒ca, sayfan─▒n var olup olmad─▒─č─▒n─▒ kontrol etmez, bu y├╝zden URLÔÇÖye tepki g├Âsteren baz─▒ JavaScript kodlar─▒ uygularsan─▒z, onlarla bu ┼čekilde ├žal─▒┼čabilirsiniz.

Ayr─▒ca history.replaceState() tam olarak ayn─▒ ┼čeyi yapan var, ancak yeni bir tane olu┼čturmak yerine mevcut tarihi de─či┼čtirecek!

Ayr─▒ca history.pushState , var olup olmad─▒─č─▒n─▒ kontrol etmek i├žin bir fonksiyon olu┼čturabilir , sonra b├Âyle devam eder:

 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');
 

Ayr─▒ca de─či┼čtirebilir # i├žin <HTML5 browsers sayfay─▒ yeniden olmayacakt─▒r hangi. Bu Angular'─▒n SPA'y─▒ hashtag'e g├Âre kullanmas─▒n─▒n yolu ...

De─či┼čmek # olduk├ža kolayd─▒r, ┼č├Âyle yapar:

 window.location.hash = "example";
 

Ve bunu ┼ču ┼čekilde tespit edebilirsiniz:

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

23







HTML5'ten ├Ânce ┼čunlar─▒ kullanabiliriz:

 parent.location.hash = "hello";
 

ve:

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

Bu y├Ântem sayfan─▒z─▒ yeniden y├╝kler, ancak HTML5 history.pushState(page, caption, replace_url) sayfan─▒z─▒ yeniden y├╝klememesi gerekti─čini a├ž─▒klad─▒.


21







Yapmaya ├žal─▒┼čt─▒─č─▒n─▒z ┼čey kullan─▒c─▒lar─▒n sayfalara yer i┼čareti koymas─▒na / payla┼čmas─▒na izin veriyorsa ve tam olarak do─čru URL olmas─▒ gerekmiyorsa ve ba┼čka bir ┼čey i├žin sabitleme ├žapalar─▒ kullanm─▒yorsan─▒z, bunu ikide yapabilirsiniz par├žalar─▒; yukar─▒da tart─▒┼č─▒lan location.hash dosyas─▒n─▒ kullan─▒r ve ana etiketi ├╝zerinde, i├žinde bir ba─člant─▒ ├žapas─▒ olan bir URL aramak i├žin bir kontrol uygular ve sizi bir sonraki sonuca y├Ânlendirirsiniz.

├ľrne─čin:

1) Kullan─▒c─▒ a├ž─▒k www.site.com/section/page/4

2) Kullan─▒c─▒, URLÔÇÖyi www.site.com/#/section/page/6 (karma ile) de─či┼čtiren bir i┼člem yapar . Sayfa 6 i├žin do─čru i├žeri─či sayfaya y├╝kledi─činizi s├Âyleyin, b├Âylece kullan─▒c─▒ ├žok fazla rahats─▒z olmad─▒.

3) Kullan─▒c─▒ bu URLÔÇÖyi bir ba┼čkas─▒na iletir veya yer imlerine ekler

4) Ba┼čka biri veya daha sonraki bir tarihte ayn─▒ kullan─▒c─▒ www.site.com/#/section/page/6

5) ├ťzerindeki kod, b├Âyle bir ┼čey kullanarak www.site.com/ kullan─▒c─▒y─▒ y├Ânlendirir www.site.com/section/page/6 :

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

Umar─▒m bu mant─▒kl─▒! Baz─▒ durumlar i├žin faydal─▒ bir yakla┼č─▒m.


20







Sayfay─▒ yeniden y├╝klemeden URL'yi de─či┼čtirme i┼člevi a┼ča─č─▒dad─▒r. Yaln─▒zca HTML5 i├žin desteklenir.

   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');
 

14







Konumun herhangi bir ┼čekilde de─či┼čtirilmesi (veya window.location veya document.location ), yaln─▒zca URL par├žas─▒n─▒ de─či┼čtirmiyorsan─▒z, s├Âz konusu yeni URLÔÇÖde bir talebe neden olur. URL'yi de─či┼čtirirseniz, URL'yi de─či┼čtirirsiniz.

Kullanmakta oldu─čunuz URLÔÇÖleri be─čenmiyorsan─▒z, Apache'nin mod_rewrite gibi sunucu taraf─▒ URL yazma tekniklerini kullan─▒n .


12







Ba─člant─▒ etiketleri ekleyebilirsiniz. Bunu, sitemde http://www.piano-chords.net/ adresinde kullan─▒yorum, b├Âylece Google Analytics ile sayfada ne ziyaret ettiklerini izleyebiliyorum.

Sadece bir ba─člant─▒ etiketi ve ard─▒ndan sayfan─▒n izlemek istedi─čim k─▒sm─▒n─▒ ekliyorum:

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

12


2009-12-13





Thomas Stjernegaard Jeppesen'in belirtti─či gibi , kullan─▒c─▒ Ajax ba─člant─▒lar─▒n─▒z ve uygulamalar─▒n─▒z aras─▒nda gezinirken URL parametrelerini de─či┼čtirmek i├žin History.js yaz─▒l─▒m─▒n─▒ kullanabilirsiniz .

Bu cevaptan bu yana neredeyse bir y─▒l ge├žti ve History.js b├╝y├╝d├╝ ve daha kararl─▒ ve taray─▒c─▒lar aras─▒ bir hale geldi. Art─▒k, HTML5 uyumlu ve bir├žok HTML4 taray─▒c─▒da ge├žmi┼č durumlar─▒n─▒ y├Ânetmek i├žin kullan─▒labilir. Bu demoda , nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ g├Âsteren bir ├Ârnek g├Ârebilirsiniz (i┼člevsellik ve s─▒n─▒rlar─▒n─▒ da deneyebilirsiniz.

Bu kitapl─▒─č─▒n nas─▒l kullan─▒laca─č─▒ ve uygulanaca─č─▒ konusunda yard─▒ma ihtiyac─▒n─▒z olursa, demo sayfas─▒n─▒n kaynak koduna bir g├Âz atman─▒z─▒ ├Âneririm: yapman─▒n ├žok kolay oldu─čunu g├Âreceksiniz.

Son olarak, karma (ve hashbangs) kullan─▒m─▒yla ilgili sorunlar─▒n neler olabilece─čine dair kapsaml─▒ bir a├ž─▒klama i├žin, bu ba─člant─▒ya Benjamin Lupton taraf─▒ndan bak─▒n.


8







history.pushState() HTML 5 Ge├žmi┼či API'sinden kullan─▒n .

Daha fazla ayr─▒nt─▒ i├žin HTML5 Ge├žmi┼či APIÔÇÖs─▒na bak─▒n.


7







kullan─▒n:

     let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");
 

Sayfay─▒ yeniden y├╝klemeden taray─▒c─▒n─▒n URLÔÇÖsini G├╝ncelle blog yaz─▒s─▒nda g├Ârebilirsiniz .


-4







Kullan window.history.pushState("object or string", "Title", "/new-url") , ancak yine de sunucuya yeni bir URL iste─či g├Ânderir.


-6







K├Ât├╝ ama├žl─▒ bir ┼čey yapmaya ├žal─▒┼čmad─▒─č─▒n─▒z─▒ varsayarsak, kendi URLÔÇÖlerinize yapmak istedi─činiz herhangi bir ┼čey htaccess ile g├Âsterilebilir .


-12



─░lgili yay─▒nlar


Oturumu kapat─▒p tekrar a├žmadan .bashrc dosyas─▒n─▒ nas─▒l yeniden y├╝klerim?

Ge├žerli sayfan─▒n URL'sini C# [duplicate] i├žinde alma

Sayfay─▒ yeniden y├╝klemek, AngularJS HTML5 kipinde yanl─▒┼č GET iste─či veriyor

JavaScriptÔÇÖte herhangi bir parametre olmadan URLÔÇÖye nas─▒l ula┼č─▒l─▒r?

AngularJS UI Router - durumu yeniden y├╝klemeden url'yi de─či┼čtir

URL'yi yazd─▒rma sayfas─▒ndan nas─▒l kald─▒r─▒r─▒m?

Sayfay─▒ yeniden y├╝klemeden bir sorgu dizesini de─či┼čtirme

Sayfay─▒ yeniden y├╝klemeden css'i yeniden y├╝klemenin kolay bir yolu var m─▒?

Sayfay─▒ yeniden y├╝klerken neden onay kutusu kontrol ediliyor?

URL'yi veya sorgu dizgilerini, sayfay─▒ yeniden y├╝klemeden javascript / jQuery kullanarak nas─▒l g├╝ncelleriz?

Etiketle ilgili di─čer sorular [javascript]


Sadece iki komisyon aras─▒nda de─či┼čen dosya isimleri nas─▒l listelenir?

JNI payla┼č─▒lan K├╝t├╝phanesi (JDK) y├╝klenemedi

.Css () i┼čleviyle eklenen bir stili nas─▒l kald─▒rabilirim?

Nesne dilimleme nedir?

C de boolean de─čerleri kullanma

Gradle kullanarak bir s├╝r├╝m imzalanm─▒┼č bir apk dosyas─▒ nas─▒l olu┼čturulur?

Scala: TypeTag nedir ve nas─▒l kullan─▒r─▒m?

Kullan─▒c─▒n─▒n IE kullan─▒p kullanmad─▒─č─▒n─▒ kontrol etme

Metnin 1'den fazla sat─▒r almas─▒n─▒ nas─▒l ├Ânleyebilirim?

TSQL datetime alan─▒ndan YYYY-AA-GG format─▒nda tarih nas─▒l al─▒n─▒r?