API Sejarah JavaScript membolehkan enjin carian merangkak petua content

API Sejarah JavaScript membolehkan enjin carian merangkak petua content_javascript AJAX

WBOY

Lepaskan： 2016-05-16 15:27:31

asal

1295 orang telah melayarinya

Adakah anda perasan semasa menyemak imbas album foto Facebook bahawa apabila halaman dimuat semula sebahagiannya, alamat dalam bar alamat juga berubah, dan ia bukan dalam kaedah cincang. Ia menggunakan beberapa API baharu sejarah HTML5 Sebagai pembolehubah global tetingkap, sejarah bukanlah sesuatu yang baharu dalam era HTML4. Yang sering kita gunakan ialah history.back() dan history.go().

Saya selalu fikir tidak ada cara untuk melakukannya, sehingga saya melihat penyelesaian Robin Ward, salah seorang pengasas Discourse, dua hari lalu, dan saya tidak dapat menahan rasa kagum.

Discourse ialah program forum yang sangat bergantung pada Ajax, tetapi ia mesti membenarkan Google memasukkan kandungan tersebut. Penyelesaiannya ialah dengan meninggalkan struktur tanda paun dan mengguna pakai API Sejarah.

Apa yang dipanggil History API merujuk kepada menukar URL yang dipaparkan dalam bar alamat penyemak imbas tanpa memuat semula halaman (secara tepatnya, ia mengubah status semasa halaman web). Berikut ialah contoh di mana anda mengklik butang di atas untuk mula memainkan muzik. Kemudian, klik pada pautan di bawah sekali lagi dan lihat apa yang berlaku?

URL dalam bar alamat telah berubah, tetapi main balik muzik tidak terganggu!

Pengenalan terperinci kepada API Sejarah berada di luar skop artikel ini. Ringkasnya di sini, fungsinya adalah untuk menambah rekod pada objek Sejarah pelayar.

Salin kod Kod adalah seperti berikut:

window.history.pushState(nyatakan objek, tajuk, url);　

Baris arahan di atas boleh membuat URL baharu muncul dalam bar alamat. Kaedah pushState objek Sejarah menerima tiga parameter URL baharu ialah parameter ketiga Dua parameter pertama boleh menjadi batal.

window.history.pushState(null, null, newURL

Pada masa ini, semua penyemak imbas utama menyokong kaedah ini: Chrome (26.0), Firefox (20.0), IE (10.0), Safari (5.1), Opera (12.1).

Berikut ialah kaedah Robin Ward.

Pertama, gunakan API Sejarah untuk menggantikan struktur tanda cincang, supaya setiap tanda cincang menjadi URL dengan laluan biasa, supaya enjin carian akan merangkak setiap halaman web.

Contoh.com/1
example.com/2
　example.com/3　

Kemudian, tentukan fungsi JavaScript untuk mengendalikan bahagian Ajax dan merangkak kandungan berdasarkan URL (dengan andaian jQuery digunakan).

　function anchorClick(link) {
 　　　　var linkSplit = link.split('/').pop();
 　　　　$.get('api/' + linkSplit, function(data) {
 　　　　　　$('#content').html(data);
 　　　　});
 　　}

Salin selepas log masuk

Takrif semula acara klik tetikus.

　　$('#container').on('click', 'a', function(e) {
 　　　　window.history.pushState(null, null, $(this).attr('href'));
 　　　　anchorClick($(this).attr('href'));
 　　　　e.preventDefault();
 　　});

Salin selepas log masuk

Juga mengambil kira pengguna yang mengklik butang "ke hadapan/belakang" penyemak imbas. Pada masa ini, peristiwa popstate objek Sejarah akan dicetuskan.

　window.addEventListener('popstate', function(e) {  
 　　　　anchorClick(location.pathname); 
 　　});

Salin selepas log masuk

Selepas mentakrifkan tiga keping kod di atas, anda boleh memaparkan URL laluan biasa dan kandungan AJAX tanpa memuat semula halaman.

Akhir sekali, sediakan bahagian pelayan.

Oleh kerana struktur tanda paun tidak digunakan, setiap URL adalah permintaan yang berbeza. Oleh itu, pelayan dikehendaki mengembalikan halaman web dengan struktur berikut untuk semua permintaan ini untuk mengelakkan ralat 404.

　 <html>
 　　　　<body>
 　　　　　　<section id='container'></section>
 　　　　　　<noscript>
 　　　　　　　　... ...
 　　　　　　</noscript>
 　　　　</body>
 　　</html>

Salin selepas log masuk

Tengok kod di atas, anda akan jumpa noscript tag, ini rahsianya.

Kami meletakkan semua kandungan yang kami mahu enjin carian disertakan dalam teg noskrip. Dalam kes ini, pengguna masih boleh melakukan operasi AJAX tanpa memuat semula halaman, tetapi enjin carian akan memasukkan kandungan utama setiap halaman web!