Nota kajian HTML5 - Kemahiran tutorial API_html5 Sejarah-Tutorial H5-php.cn

Nota kajian HTML5 - Kemahiran tutorial API_html5 Sejarah

WBOY

Lepaskan： 2016-05-16 15:46:56

asal

1617 orang telah melayarinya

1. Analisis Pembukaan

Baiklah, tanpa berlengah lagi, mari kita pergi terus ke topik hari ini Mari kita lihat “API Sejarah”:

Untuk meningkatkan kelajuan tindak balas halaman Web, semakin ramai pembangun mula menggunakan penyelesaian aplikasi satu halaman. Struktur halaman tunggal yang dipanggil bermakna apabila bertukar antara berbilang halaman, keseluruhan halaman semasa tidak dimuat semula, data paparan halaman dikemas kini dan URL dalam bar alamat ditukar sewajarnya supaya pengguna boleh berkongsi URL ini.

Jika anda menggunakan penyemak imbas seperti Chrome atau Firefox untuk mengakses tapak web seperti "github.com, plus.google.com", anda akan mendapati bahawa klik antara halaman diminta secara tidak segerak melalui ajax,

Pada masa yang sama, URL halaman telah berubah. Dan ia boleh menyokong pelayar ke hadapan dan ke belakang dengan baik. Apakah yang mempunyai fungsi yang begitu kuat? Nah, ini membawa kita kepada protagonis hari ini, API baharu yang dirujuk dalam HTML5:

"history.pushState" dan "history.replaceState" digunakan untuk menukar URL halaman tanpa memuat semula melalui antara muka ini. Mari kita lihat dahulu kaedah terperinci antara muka "sejarah":

Salin kod

Kod tersebut adalah seperti berikut:

Sejarah antara muka {
panjang panjang atribut baca sahaja;
atribut baca sahaja mana-mana keadaan;
void go(delta panjang pilihan);
void back();
void forward();
void pushState(sebarang data, DOMString tajuk, DOMString pilihan? url = null);
void replaceState(mana-mana data, tajuk DOMString, DOMString pilihan? url = null);
};

(2), perihalan API utama

Satu perkara yang perlu diperhatikan di sini: "window.history.replaceState" adalah serupa dengan "window.history.pushState". Perbezaannya ialah replaceState tidak akan menambah titik rekod sejarah baharu dalam window.history, dan kesannya adalah serupa ke window.location .replace(url) tidak akan menambah titik rekod baharu pada titik rekod sejarah. Kaedah replaceState() amat sesuai apabila anda ingin mengemas kini objek keadaan atau URL entri sejarah semasa sebagai tindak balas kepada beberapa tindakan pengguna.

(3), perkenalkan contoh

Hari ini, mari kita bercakap tentang perkara yang biasa kita lakukan dalam aplikasi satu halaman. Terdapat senarai menu, klik pada item menu yang berkaitan dan kemudian memuatkan modul yang berkaitan secara dinamik salap adalah bahawa kita akan mendapati bahawa bar alamat tidak akan Tidak akan ada tindak balas kepada sebarang perubahan, serta operasi ke hadapan dan ke belakang dalam penyemak imbas, yang tidak begitu mesra pengguna, jadi untuk menyelesaikan masalah ini "Sejarah " berlaku, jadi bagaimana untuk melakukannya? Jangan tergesa-gesa, mula-mula lihat pemaparan dalam contoh, dan kemudian analisis langkah demi langkah, seperti yang ditunjukkan di bawah:

Berikut ialah data pemantauan Tindakan memuat semula URL yang sama tidak akan menyebabkan permintaan berulang.

Mari kita selesaikan prosesnya:

Halaman dimuatkan buat kali pertama Walaupun URL yang kami lawati ialah "http://localhost:8888/bbSPA.html", URL sebenar sememangnya:

"http://localhost:8888/bbSPA.html#shanghai", "history.replaceState" menyelesaikan kerja penukaran url awal dan melakukan pemuatan awal

Untuk bekerja dengan data "shanghai.data", klik mana-mana item menu di sebelah kiri, kandungan di sebelah kanan akan dimuatkan oleh Ajax, dan URL halaman akan berubah dengan sewajarnya, contohnya, klik pada Beijing .

Pada ketika ini, kami mengklik butang kembali pada bar alamat untuk kembali ke Shanghai dan memaparkan kandungannya. Prinsipnya sangat mudah, iaitu, dengan memantau "window.onpopstate", pensuisan percuma dicapai.

Baiklah! Sebenarnya, ia sangat mudah Anda boleh mencubanya sendiri. Berikut ialah kod lengkap:

　(1), kod bahagian html　

Salin kod

Kod tersebut adalah seperti berikut:

bbSPA测试页面

北京

上海

深圳

广州

< ;a href="#tianjin">天津

id="content-main"
style= "margin-left:50px;
float:left;
width:220px;
border:1px solid #ccc;
height:120px;
color:#ff3300;"
>

（2），Js部分代码

复制代码

代码如下:

$(function(){}) ;
var _history = [] ; // 记录hash的活动数据容器
function _init(){
var root = $("#list") ;
var defaultHash = root.find("li a").eq(1) .attr("href") ;
var currentHash = window.location.hash ;
_addToHistory(defaultHash,true) ;
if(currentHash && currentHash != defaultHash){
_showContent((currentHash .split("#")[1])) ;
}
else{
_showContent((defaultHash.split("#")[1])) ;
}
$ ("#list").on("click","a",function(e){
var action = ($(this).attr("href").split("#")[1] ) ;
_showContent(action) ;
e.preventDefault() ;
}) ;
window.addEventListener("popstate",function(e){
if(e.state && e.state.hash){
var hash = e.state.hash ;
if(_history[1] && hash === _history[1].hash){//存在历史记录，证明是后退事件
_showContent(hash.split("#")[1].toLowerCase()) ;
}else{ // 其它认为是非法后退或者前进
;🎜> else{
return ;
}
},false) ;
} ;
function _showContent(action){
var samePage = _history[0]["hash "] == "#" tindakan ;
if(samePage){ // 同页面,则不重新加载
return ;
}
_loadContent(action ".data").done(function (data){
_renderContent(data["content"]) ;
_addToHistory("#" action,samePage) ;
}).fail(function(){
throw new Error(" muatkan ralat kandungan !") ;
}) ;
} ;
fungsi _loadContent(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
fungsi _renderContent(teks){
$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
var obj = {
cincang : cincang
} ;
if(noState){
_history.shift(obj) ;
window.history.replaceState(obj,"",hash) ;
}
lain{
window.history.pushState(obj,"",hash) ;
}
_history.unshift(obj) ;
} ;

　

（四），最后总结

　　（1），理解History Api的使用方式以及具体实例中使用的目的是为了解决　　（2），两个核心Api的不同之处在哪。

　　（3），测试本例子的注意事项如下。

web这样的方式在浏览器打开，就会出现如下的问题：

复制代码

代码如下:

Keadaan tidak ditangkap Ralat Keselamatan dengan URL 'file:///C:/xxx/xxx/xxx/xxx.html' tidak boleh dibuat dalam dokumen dengan asal 'null'.

　　因为你要pushState的url与当前页面的url必须是同源的，而fail://形式打开的页面是一的页面是一的页面是仡的页面是仡的有一仡，有一仡的有一误。

以上就是本文的全部内容了，希望大家能够喜欢。