window.location.hash knowledge summary_basic knowledge

Lokasi ialah objek terbina dalam JavaScript yang mengurus bar alamat Contohnya, location.href menguruskan URL halaman Menggunakan location.href=url, anda boleh mengubah hala halaman ke URL. Location.hash boleh digunakan untuk mendapatkan atau menetapkan nilai teg halaman. Contohnya, location.hash="#admin" http://domain/#admin. Perkara yang sangat bermakna boleh dilakukan menggunakan nilai atribut ini.

aplikasi mudah window.location.hash

1. Maksud #

# mewakili kedudukan dalam halaman web. Watak di sebelah kanan ialah pengecam kedudukan. Contohnya,

　http://www.example.com/index.html#print

mewakili kedudukan cetakan halaman web index.html. Selepas pelayar membaca URL ini, ia secara automatik akan menatal kedudukan cetakan ke kawasan yang boleh dilihat.

Tentukan pengecam untuk lokasi halaman web. Terdapat dua kaedah. Satu ialah menggunakan mata penambat, seperti 199509608094b4e81d651d148e35972c5db79b134e9f6b82c0b36e0489ee08ed dan satu lagi ialah menggunakan atribut id, seperti 0e6856c47f8d911f7b1a7865abfc662c.

2. Permintaan HTTP tidak termasuk #

# digunakan untuk membimbing tindakan penyemak imbas dan tidak berguna sama sekali di bahagian pelayan. Oleh itu, # tidak termasuk dalam permintaan HTTP.

Sebagai contoh, lawati URL berikut,

　http://www.example.com/index.html#print

Permintaan sebenar yang dihantar oleh penyemak imbas adalah seperti ini:

　DAPATKAN /index.html HTTP/1.1

Hos: www.example.com

Seperti yang anda lihat, ia hanya meminta index.html, dan tiada bahagian "#print" sama sekali.

3. Watak selepas #

Sebarang aksara yang muncul selepas # pertama akan ditafsirkan oleh penyemak imbas sebagai pengecam lokasi. Ini bermakna tiada satu pun daripada aksara ini akan dihantar ke pelayan.

Sebagai contoh, niat asal URL berikut adalah untuk menentukan nilai warna:

　http://www.example.com/?color=#fff

Walau bagaimanapun, permintaan sebenar yang dibuat oleh penyemak imbas ialah:

　DAPATKAN /?color= HTTP/1.1

Hos: www.example.com

Seperti yang anda lihat, "#fff" ditinggalkan. Hanya apabila # ditranskodkan ke dalam #, penyemak imbas akan menganggapnya sebagai aksara literal. Dengan kata lain, URL di atas hendaklah ditulis sebagai:

　http://example.com/?color=#fff

4. Tukar # tanpa mencetuskan muat semula halaman web

Tukar sahaja bahagian selepas #, penyemak imbas hanya akan menatal ke kedudukan yang sepadan dan tidak akan memuatkan semula halaman web.

Sebagai contoh, daripada

　http://www.example.com/index.html#location1

ditukar kepada

　http://www.example.com/index.html#location2

Pelayar tidak akan meminta semula index.html daripada pelayan.

5 Menukar # akan menukar sejarah akses penyemak imbas

Setiap kali anda menukar # bahagian, rekod akan ditambahkan pada sejarah akses penyemak imbas Gunakan butang "Kembali" untuk kembali ke kedudukan sebelumnya.

Ini amat berguna untuk aplikasi ajax # nilai yang berbeza boleh digunakan untuk mewakili keadaan akses yang berbeza, dan kemudian pengguna boleh diberikan pautan untuk mengakses keadaan tertentu.

Perlu diingat bahawa peraturan di atas tidak berlaku untuk IE 6 dan IE 7, ia tidak akan meningkatkan sejarah kerana perubahan #.

6 window.location.hash membaca # nilai

Tetingkap property.location.hash boleh dibaca dan boleh ditulis. Apabila membaca, ia boleh digunakan untuk menentukan sama ada status halaman web telah berubah semasa menulis, rekod sejarah akses akan dibuat tanpa memuatkan semula halaman web.

7. acara onhashchange

Ini ialah acara baharu dalam HTML 5. Apabila nilai # berubah, acara ini akan dicetuskan. IE8, Firefox 3.6, Chrome 5 dan Safari 4.0 menyokong acara ini.

Terdapat tiga cara untuk menggunakannya:

　window.onhashchange = func;

　ff8b939e37f4cd951197bd4ad61700f2

window.addEventListener("hashchange", func, false);

Untuk penyemak imbas yang tidak menyokong onhashchange, anda boleh menggunakan setInterval untuk memantau perubahan dalam location.hash.

8. Mekanisme Google merangkak #

Secara lalai, labah-labah web Google mengabaikan # bahagian URL.

Walau bagaimanapun, Google juga menetapkan bahawa jika anda mahu kandungan yang dihasilkan oleh Ajax dibaca oleh enjin penyemakan imbas, anda boleh menggunakan "#!" dalam URL, dan Google akan menukar kandungan yang mengikutinya secara automatik kepada nilai rentetan pertanyaan _escaped_fragment_ .

Sebagai contoh, Google mendapati bahawa URL versi baharu twitter adalah seperti berikut:

　http://twitter.com/#!/nama pengguna

akan merangkak URL lain secara automatik:

　http://twitter.com/?_escaped_fragment_=/nama pengguna

Melalui mekanisme ini, Google boleh mengindeks kandungan Ajax dinamik.

Mari kita lihat beberapa netizen yang menghadapi masalah seperti yang ditunjukkan dalam kod berikut, setiap kali anda mengklik butang pada halaman, nilai dalam bar alamat penyemak imbas dengan cara ini, anda boleh menipu pelayar (tanpa menghantar sebarang maklumat kepada penyemak imbas). Pelayan menghantar permintaan baharu), menjadikan butang "belakang" dan "maju" tersedia.

Masalah semasa ialah nilai penyemak imbas ​​​​telah berubah di bawah ie6 dan ff3, tetapi hanya "ke hadapan" dan "ke belakang" boleh digunakan di bawah ff3 iaitu, kedua-duanya berwarna kelabu dan tidak tersedia Kenapa?

Kod adalah seperti berikut

<html> 
<head> 
<script type="text/javascript"> 
//每次点击都会调用test()，它会改变url的值 
var i=0; 
function test(){   
  window.location.hash=i; 
  i++;   
} 
</script> 
</head> 
<body> 
<input type="submit" value="xxxxxxxxxxxxx" onclick="test()"/> 
</body> 
</html> 

Berikut adalah tentang penggunaan cincang yang digabungkan dengan ajax Setiap kali ajax mendapatkan semula data, penyemak imbas tidak menjana rekod sejarah selepas halaman dikemas kini Ini bermakna butang belakang dan hadapan kehilangan kegunaannya , cincang dan tetingkap boleh digabungkan Gunakan onhashchange Ambil perhatian bahawa ie6 dan 7 tidak menyokong onhashchange, tetapi anda boleh menggunakan setInterval untuk menyemak perubahan cincang dengan kerap.

Pelaksanaan khusus:

<body>
  <div id="div1"></div>
  <input type="button" value="click" onclick="GetT()" /> 
</body>
</html>
<script type="text/javascript" src="js/AjaxHasPool.js">
</script>
<script type="text/javascript">
var ajax = new AjaxHasPool();
var method="get";
var url ="Handler.ashx";
var i = 1;
var obj = new Object();
function GetT()
{
  document.getElementById("div1").innerHTML=i; 
  ajax.Startup(null,url,method,ep);
}
function ep(xmlobj){
  eval("obj['"+i+"']="+i+";");
  location.hash="#"+i;
++i; 
}
window.onhashchange=function(){
var hashStr = location.hash.replace("#","");
if(typeof(eval("obj['"+hashStr+"']"))!="undefined") 
     document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']"); 
}
</script>

1.AjaxHasPool ialah kelas ajax terkapsulnya sendiri, di mana ajax.Startup() akan menghantar permintaan ajax
2. Objek Objek menyimpan rekod sejarah Jika atribut objek ialah nombor, ia mesti dibuat instantiat menggunakan obj["1"], jika tidak, ia akan melanggar konvensyen penamaan.
3. Gunakan window.onhashchange untuk mengesan nilai cincang dan mendapatkan data sejarah.