Avaleht
uus teema   vasta Tarkvara »  Programmeerimine »  HTML5 History API märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
spreiii
HV kasutaja

liitunud: 27.12.2008
sõnum 18.10.2011 13:46:52 HTML5 History API vasta tsitaadiga
Kõigepealt kood siis:
javascript:
  1. $(document).ready(function(){
  2.         var content = $("#content");
  3.         var loading = $("#loading");
  4.         var curPage = window.document.location;
  5.        
  6.         $(window).load(function(){ replacePage(location.pathname); });
  7.  
  8.         function replacePage(url){
  9.                 loading.fadeIn(100);
  10.                 $.get("/rd_framework/public/index.php", "url=" + url, function(data){
  11.                         content.fadeOut(10, function() {
  12.                                 content.html(data).fadeIn(300);
  13.                         });
  14.                         loading.hide();
  15.                 });
  16.         }
  17.        
  18.         $('a').live('click', function(event){   // .live - alternative to .bind(does not work after ajax requests)
  19.                 var data = this.getAttribute("data-url"); // leiame lingist atribuudi
  20.                 if(curPage != this.href){
  21.                         replacePage(data);
  22.                         History.pushState({state:"weblink"}, document.title, data); // salvestame state'i
  23.                 }
  24.                 event.preventDefault();
  25.                 return false;
  26.         });
  27. });
  28.  
  29. (function(window,undefined){
  30.         var History = window.History;
  31.  
  32.         History.Adapter.bind(window,'statechange',function(){
  33.                 var State = History.getState();
  34.                 // Check if its ours
  35.                 if(State.data.state != 'weblink'){
  36.                         window.location = State.url;
  37.                 }
  38.         });     
  39.  
  40. })(window);


Probleem: Kõik välja arvatud back/forward nupud brauseril töötab laitmatult - lehe laadimine content div'i jms. Tegu on äärmiselt häiriva probleemiga ning sooviks selle võimalikult lihtsasti lahendada.
Kommentaarid: 23 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum
Timukas0
HV kasutaja
Timukas0

liitunud: 20.03.2007
sõnum 18.10.2011 17:33:47 vasta tsitaadiga
Kasuta oma brauseri developer toolsi, see kood (vähemalt history osa) peaks* sul erroreid andma, alustades sellest, et history on väikese tähega. See alumine function tundub ka väga vigane.
Teine asi, kui kasutad mingit kolmanda osapoole History apit, aga window.location = State.url peaks igal juhul errorit andma.

* - hetkel pole aega katsetada.
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum
spreiii
HV kasutaja

liitunud: 27.12.2008
sõnum 19.10.2011 14:25:22 vasta tsitaadiga
Kasutan kolmanda osapoole History API-t tõepoolest.
http://plugins.jquery.com/project/history-js
Seda siis selleks, et toetataks ka HTML4 brausereid (fallback to hash meetod)

EDIT:
Sain asja tööle thumbs_up.gif
Kui kedagi huvitab, siis kood on järgmine:
javascript:
  1. var link_click = 0;     // global
  2.  
  3. (function(window,undefined){
  4.         var History = window.History;
  5.                
  6.         // Fire when ready
  7.         $(document).ready(function() {
  8.                 var content = $("#content");
  9.                 var loading = $("#loading");
  10.                
  11.                 var curPage = History.getState().url;
  12.  
  13.                 replacePage(location.pathname);
  14.                
  15.                 function replacePage(url){
  16.                         link_click = 1; // prevent page from reloading
  17.                         loading.fadeIn(100);
  18.                         $.get("/rd_framework/public/index.php", "url=" + url, function(data){
  19.                                 content.fadeOut(10, function() {
  20.                                         content.html(data).fadeIn(300);
  21.                                 });
  22.                                 History.pushState({state: url}, document.title, url);
  23.                                 loading.hide();
  24.                                 link_click = 0; // restore default state
  25.                         });
  26.                 }
  27.                
  28.                 $('a').live('click', function(event){   // .live - alternative to .bind(does not work after ajax requests)
  29.                         var data = this.href;
  30.                         var relativeData = data.replace(History.getRootUrl(),'/');      // replace domain
  31.                         if(curPage != data){
  32.                                 replacePage(relativeData);
  33.                         }
  34.                         event.preventDefault();
  35.                         return false;
  36.                 });
  37.                
  38.                 History.Adapter.bind(window,'statechange',function(){
  39.                         var State = History.getState();
  40.                         url = State.url;
  41.                         relativeUrl = url.replace(History.getRootUrl(),'/');    // replace domain
  42.                         // Check if its ours
  43.                         if(link_click == 0){ replacePage(relativeUrl); }
  44.                 });
  45.        
  46.         });
  47. })(window);
Kommentaarid: 23 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  Programmeerimine »  HTML5 History API
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.