-
Pada bulan September tahun lalu, Twitter memperbarui versinya. Perubahan signifikan adalah simbol "#!" telah ditambahkan ke URL. Misalnya, URL beranda pengguna sebelum revisi
http://twitter.com/nama pengguna
Setelah direvisi, jadilah
http://twitter.com/#!/nama pengguna
Ini adalah pertama kalinya "#" digunakan pada URL penting dalam skala besar oleh situs web arus utama. Hal ini menunjukkan bahwa peran tanda pagar mulai dikenali kembali. Artikel ini didasarkan pada artikel HttpWatch untuk memilah semua poin pengetahuan penting terkait dengan tanda pagar.
1. Arti dari #
#Mewakili posisi di halaman web. Karakter di sebelah kanan adalah pengidentifikasi posisi. Misalnya,
http://www.example.com/index.html#PRint
Ini mewakili posisi cetak halaman web index.html. Setelah browser membaca URL ini, maka secara otomatis akan menggulir posisi pencetakan ke area yang terlihat. Ada dua cara untuk menentukan pengidentifikasi untuk lokasi halaman web. Salah satunya adalah dengan menggunakan titik jangkar, seperti <a name="print"></a>, dan yang lainnya adalah dengan menggunakan atribut id, seperti <div id="print" >.
2. Permintaan HTTP tidak termasuk #
# digunakan untuk memandu tindakan browser dan sama sekali tidak berguna di sisi server. Oleh karena itu, # tidak disertakan dalam permintaan HTTP.
Misalnya, kunjungi URL berikut,
http://www.example.com/index.html#print
Permintaan sebenarnya yang dibuat oleh browser adalah ini:
DAPATKAN /index.html HTTP/1.1
Tuan rumah: www.example.com
Seperti yang Anda lihat, hanya index.html yang diminta, dan tidak ada bagian "#print" sama sekali.
3. Karakter setelah #
Karakter apa pun yang muncul setelah # pertama akan ditafsirkan oleh browser sebagai pengenal posisi. Artinya, tidak satu pun dari karakter ini yang akan dikirim ke server.
Misalnya, URL berikut dimaksudkan untuk menentukan nilai warna:
http://www.example.com/?color=#fff
Namun, permintaan sebenarnya yang dibuat oleh browser adalah:
DAPATKAN /?warna= HTTP/1.1
Tuan rumah: www.example.com
Seperti yang Anda lihat, "#fff" dihilangkan. Hanya jika # ditranskode menjadi %23, browser akan memperlakukannya sebagai karakter literal. Artinya, URL di atas harus ditulis sebagai:
http://example.com/?color=%23fff
4. Ubah #Jangan memicu pemuatan ulang halaman web
Ubah saja bagian setelah #, browser hanya akan menggulir ke posisi yang sesuai dan tidak akan memuat ulang halaman web.
Misalnya dari
http://www.example.com/index.html#location1
Ubah ke
http://www.example.com/index.html#location2
Browser tidak akan meminta ulang index.html dari server.
5. Mengubah # akan mengubah riwayat akses browser
Setiap kali Anda mengubah bagian setelah #, catatan akan ditambahkan ke riwayat akses browser. Gunakan tombol "Kembali" untuk kembali ke posisi sebelumnya. Ini sangat berguna untuk aplikasi Ajax, di mana nilai # yang berbeda dapat digunakan untuk mewakili status akses yang berbeda, dan kemudian pengguna dapat diberikan tautan untuk mengakses status tertentu. Perlu dicatat bahwa aturan di atas tidak berlaku untuk IE 6 dan IE 7, aturan tersebut tidak akan menambah riwayat karena perubahan #.
6. window.location.hash membaca # nilai
Properti window.location.hash dapat dibaca dan ditulis. Saat membaca, ini dapat digunakan untuk menentukan apakah status halaman web telah berubah; saat menulis, catatan riwayat akses akan dibuat tanpa memuat ulang halaman web.
7. acara perubahan hash
Ini adalah event baru di HTML 5. Event ini akan dipicu ketika nilai # berubah. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ mendukung acara ini.
Ada tiga cara untuk menggunakannya:
window.onhashchange = fungsi;
<tubuh onhashchange="func();">
window.addEventListener("hashchange", fungsi, false);
Untuk browser yang tidak mendukung onhashchange, Anda dapat menggunakan setInterval untuk memantau perubahan di location.hash.
8. Mekanisme perayapan Google #
Secara default, laba-laba web Google mengabaikan # bagian URL.
Namun, Google juga menetapkan bahwa jika Anda ingin konten yang dihasilkan oleh Ajax dibaca oleh mesin penjelajahan, Anda dapat menggunakan "#!" di URL, dan Google akan secara otomatis mengonversi konten berikutnya menjadi nilai string kueri _escaped_fragment_ .
Misalnya, Google menemukan bahwa URL versi Twitter baru adalah sebagai berikut:
http://twitter.com/#!/nama pengguna
URL lain akan dirayapi secara otomatis:
http://twitter.com/?_escaped_fragment_=/nama pengguna
Melalui mekanisme ini, Google dapat mengindeks konten dinamis Ajax.
Sumber artikel: buku harian online Ruan Yifeng