Nawigacja URL w witrynie opartej na AJAX?

Chciałbym stworzyć stronę internetową z nawigacją w pełni ajaxową, ale oznacza to, że użytkownicy nie mogą udostępniać, tworzyć zakładki lub przechodzić bezpośrednio do pewnych treści.Nawigacja URL w witrynie opartej na AJAX?

Zauważyłem, że kilka stron internetowych (Gmail, Thesixtyone, Youtube) używa znaczników hash do tworzenia niestandardowych adresów URL dla różnych konfiguracji strony. Jak nazywa się ta technika i jak mogę ją wdrożyć?

Źródło

2010-04-06 Atomix

To się nazywa Ajax precyzyjne linki w przypadku ktokolwiek zastanawia – Atomix

Thanks @Atomix, szukałem nazwy – Jacques

Loon na adres JQuery. http://www.asual.com/jquery/address/

Dokładnie to, o czym mówisz. Ponieważ jednak zapytałeś, co oznacza # w niestandardowych adresach URL, zakładam, że jesteś całkiem nowy. Adres JQuery będzie początkowo wyglądał na onieśmielający, ale jest naprawdę łatwy. Powinieneś także użyć JQuery do obsługi wszystkich ajaxów.

# jest znacznikiem zakotwiczenia. jeśli zrobisz to <a name="list">This is an anchor tag</a>, a następnie dodasz #list do adresu URL, strona przeskoczy do tagu, gdzie name = list.

Źródło

2010-04-06 17:34:34 Kai

Znaleziono wspomnianą wtyczkę bardzo przydatny. – diggersworld

Użyłem metody hash bang dla w pełni ajaxowej aplikacji z SEO. Z mojego doświadczenia wynika, że jest to bardzo niezawodne podejście zarówno do przeglądarki internetowej, jak i przeglądarek smartfonów.

Oto moje podejście. Dla uproszczenia kodu użyję kodu Jquery/Zepto:

Gdy potrzebujesz wczytać inną stronę ajax, zmień hash adresu URL używając javascript.

window.location.hash = '#!page1';

Wtedy wydarzenie zmiana hash będzie ogień z javascript

$(window).on('hashchange',loadPage);

obchodzić to wydarzenie z funkcją loadPage

var loadPage = function(e){ 
    pageId = window.location.hash; 

    _gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push 

    if(pageId == '#!page1'){ 
     $.get('ajax/page1.php', function(response) { 
      $('#main').html(response); 
     }); 
    }else if(pageId == '#!page2'){ 
     $.get('ajax/page2.php', function(response) { 
      $('#main').html(response); 
     }); 
    } 
}

W ten sposób można załadować stronę, wpisując adres URL i przez także za pomocą linku.

Teraz część SEO. Google i inna ważna wyszukiwarka opracowała sposób indeksowania witryny ajaxowej. Jeśli użyjesz #! w twoim adresie URL google zastąpi #! część z "? _escaped_fragment_" i poprosi o treść. na przykład

www.yoursite.com/#!page1 zostaną zamienione na www.yoursite.com/?_escaped_fragment_=page1

Wszystko, co musisz zrobić, to złapać że _escaped_fragment_ jako parametr GET. Jeśli używasz php kod będzie jak

if (isset($_GET['_escaped_fragment_'])) {   
    $fragment = $_GET['_escaped_fragment_']; 

    if($fragment == 'page1') 
     echo include 'ajax/page1.php'; // or use readfile method 
    else if($fragment == 'page2') 
     echo include 'ajax/page2.php'; // or use readfile method 
}

Można również ustawić tytuł strony HTML i opis każdej strony indywidualnie przez łapanie _escaped_fragment_

Na odrębnej notatce, można udostępnić url w mediach społecznościowych za pomocą #! także. Zostanie on przeanalizowany jako zwykły link za pomocą _escaped_fragment_

Mam nadzieję, że to podejście pomoże ci rozwiązać wszystkie problemy.

Źródło

2012-09-19 10:56:07 Hasanavi

Jeśli masz zawartość div, gdzie aktualizujesz ajax, tutaj jest przykład użycia biblioteki adresowej jquery http://www.asual.com/jquery/address/.

<body>    
    <div id="content"> 
     Your ajax content... 
    </div> 
</body>

Dołącz bibliotekę adres jQuery a następnie

$(document).ready(function() { 

     $('a').address(); 

     $.address.externalChange(function (e) { 
      if (e.value != '/') { 
       $('#content').load(e.value); 
      } 
     }); 
});

Jeśli chcesz wykluczyć pewne href nawigacji historii

$('a[href!="#"]').address();

Źródło

2014-07-17 13:40:17 Freewi

Nawigacja URL w witrynie opartej na AJAX?

Odpowiedz

Powiązane problemy