API Sejarah HTML5 melaksanakan kemahiran tutorial jump_html5 tanpa muat semula-Tutorial H5-php.cn

API Sejarah HTML5 melaksanakan kemahiran tutorial jump_html5 tanpa muat semula

WBOY

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

asal

2292 orang telah melayarinya

Pernah ketika saya melayari Internet, saya mendapati bahawa kesan animasi log masuk dan pendaftaran adalah sangat cantik, tetapi apa yang mengejutkan saya ialah halaman itu boleh melompat tanpa menyegarkan (ia telah disemak, anda boleh klik di sini untuk melihat kesan ini : GitHub atau FM), saya menyemak pengetahuan bahagian hadapan yang telah saya pelajari, dan nampaknya tiada teknologi yang boleh mencapai ini Jadi saya mencari di Baidu dan mendapati bahawa ini pada asalnya dicapai dengan menggunakan API Sejarah dalam HTML5, tetapi ia tidak pernah digunakan. Sehingga blog itu disemak barulah teknologi ini digunakan.
Dalam HTML5,
1 Menambahkan keupayaan untuk menambah item dalam sejarah penyemak imbas.
2. Paparkan dan tukar URL dalam bar alamat penyemak imbas tanpa memuat semula halaman.
3. Menambahkan acara yang dicetuskan apabila pengguna mengklik butang belakang penyemak imbas.
Melalui tiga perkara di atas, anda boleh menukar URL secara dinamik dalam bar alamat penyemak imbas dan memaparkan kandungan halaman secara dinamik tanpa memuat semula halaman.
Contohnya: Apabila kandungan halaman A dan halaman B berbeza, sebelum HTML5, jika anda beralih dari halaman A ke halaman B, anda perlu beralih dari halaman A ke halaman B dalam penyemak imbas, atau dengan kata lain, jika anda perlukan Jika anda ingin menggunakan fungsi butang belakang, anda boleh menambah #XXXX pada alamat URL untuk mencapai fungsi belakang. Jadi sekarang dalam HTML5, anda boleh melaksanakan pemprosesan berikut melalui API Sejarah:
1 Minta data B dalam halaman dengan menghantar permintaan AJAX pada halaman A.
2. Muatkan maklumat yang sepadan ke lokasi yang sepadan melalui JS di halaman A.
3. Gunakan API Sejarah untuk bertukar daripada alamat URL halaman A ke alamat URL halaman B dalam bar alamat penyemak imbas tanpa memuat semula halaman.
API Sejarah dalam HTML4
Atribut
1.panjang Bilangan item sejarah. Sejarah yang JavaScript boleh uruskan adalah terhad kepada julat yang boleh dicapai menggunakan kekunci "ke hadapan" dan "kembali" penyemak imbas. Atribut ini mengembalikan jumlah alamat yang terkandung di bawah butang "ke hadapan" dan "ke belakang".
Kaedah
1.back() Back, yang bersamaan dengan menekan kekunci "Kembali".
2.forward() forward, yang bersamaan dengan menekan kekunci "forward".
3.go() Penggunaan: history.go(x); Jika x < 0, kembali ke alamat x, jika x > 0, pergi ke hadapan alamat x, dan jika x == 0, muat semula halaman web yang kini dibuka. history.go(0) bersamaan dengan location.reload().
API Sejarah dalam HTML5
1 history.pushState(data, tajuk [, url]): Tambahkan rekod pada bahagian atas timbunan sejarah berada dalam Apabila peristiwa onpopstate dicetuskan, ia diluluskan sebagai parameter tajuk adalah tajuk halaman, dan semua penyemak imbas semasa akan mengabaikan parameter ini adalah alamat halaman, pilihan, dan lalai adalah alamat halaman semasa.
2. history.replaceState(data, title [, url]): Tukar rekod sejarah semasa, parameter adalah sama seperti di atas.
3. history.state: digunakan untuk menyimpan data kaedah di atas Pelayar yang berbeza mempunyai kebenaran baca dan tulis yang berbeza.
4. Acara popstate: Peristiwa ini dicetuskan apabila pengguna mengklik butang belakang atau ke hadapan penyemak imbas. Dalam fungsi pemprosesan peristiwa, baca nilai atribut keadaan objek peristiwa yang mencetuskan peristiwa Nilai atribut ini ialah nilai parameter pertama yang digunakan semasa melaksanakan kaedah pushState, yang menyimpan nilai yang disimpan serentak apabila menambah rekod pada sejarah penyemak imbas. objek.
Setakat ini, penyemak imbas IE10, firefox4 dan ke atas, Chrome8 dan ke atas, Safari5, Opera11 dan ke atas menyokong API Sejarah dalam HTML5.
HTML:

Salin kod

Kodnya adalah seperti berikut:

Dokumen Baharu

ul,li{list-style:none;}
.container{width:px;border:px solid #ccc;overflow:hidden;}
.container ul{float:left;width:px ;}
.bekas li{width:px;height:px;line-height:px;overflow:hidden;}
.container li a{text-decoration:none;}
.container li. semasa a{color:red;}
.semua kandungan{width:px;float:left;overflow:hidden;}

测试

测试

测试

JS:

复制代码

如丁:代码

/**
* Sejarah HTML dan ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind ().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");jika(ajax == undefined) {
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
}; }
ajax = $.ajax({
taip:'POST',
url: url,
dataType:'json',
success: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i ) {
html = '

' data[i].umur '

'
'

' data[i].nama '

'
'

' jantina '

';
}
$('.content').html(html);
}
var state = {
url: url,
tajuk: document.title,
html: $('.content').html()
};
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
} else if(event && event.state){
dokumen .title = event.state.title;
$('.content').html(event.state.html); ('.content').html(currentState.html
}
});
});