茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    HTML5 History API 實(shí)現(xiàn)無刷新跳轉(zhuǎn)
    來源:易賢網(wǎng) 閱讀:1580 次 日期:2016-07-09 09:59:41
    溫馨提示:易賢網(wǎng)小編為您整理了“HTML5 History API 實(shí)現(xiàn)無刷新跳轉(zhuǎn)”,方便廣大網(wǎng)友查閱!

    有一次在上**網(wǎng)的時(shí)候,發(fā)現(xiàn)登陸、注冊動畫效果非常華麗,但讓我感到震驚的是頁面竟能夠?qū)崿F(xiàn)無刷新跳轉(zhuǎn)(已改版,觀看此效果可以猛擊此處:GitHub或閱FM),回顧了所學(xué)的前端知識,似乎沒有任何技術(shù)可以實(shí)現(xiàn)這一點(diǎn),于是百度了一下,才發(fā)現(xiàn)這原來是使用HTML5中History API實(shí)現(xiàn)的效果,但奈何一直未曾派上用場。直到博客改版時(shí),才將這一技術(shù)應(yīng)用起來。

    在HTML5中,

    1. 新增了通過JS在瀏覽器歷史記錄中添加項(xiàng)目的功能。

    2. 在不刷新頁面的前提下顯示改變?yōu)g覽器地址欄中的URL。

    3. 添加了當(dāng)用戶單擊瀏覽器的后退按鈕時(shí)觸發(fā)的事件。

    通過以上三點(diǎn),可以實(shí)現(xiàn)在不刷新頁面的前提下動態(tài)改變?yōu)g覽器地址欄中的URL,動態(tài)顯示頁面內(nèi)容。

    比如: 當(dāng)頁面A和頁面B內(nèi)容不一樣的時(shí)候,在HTML5之前,如果從頁面A切換到頁面B時(shí),需要在瀏覽器下從頁面A切換到頁面B,或者說,如果需要有后退按鈕功 能的話,可以在URL地址加#XXXX 可以實(shí)現(xiàn)后退功能。那么現(xiàn)在在HTML5中,可以通過History API實(shí)現(xiàn)如下處理即可:

    1. 在A頁面 通過發(fā)AJAX請求 請求頁面中的B數(shù)據(jù)。

    2. 在頁面A中通過JS裝載相應(yīng)的信息到相應(yīng)的位置來。

    3. 通過History API在不刷新頁面的情況下在瀏覽器的地址欄中從頁面A的URL地址切換到頁面B的URL地址。

    HTML4中的History API

    屬性

    1.length 歷史的項(xiàng)數(shù)。javascript 所能管到的歷史被限制在用瀏覽器的“前進(jìn)”“后退”鍵可以去到的范圍。本屬性返回的是“前進(jìn)”和“后退”兩個(gè)按鍵之下包含的地址數(shù)的和。

    方法

    1.back() 后退,跟按下“后退”鍵是等效的。

    2.forward() 前進(jìn),跟按下“前進(jìn)”鍵是等效的。

    3.go() 用法:history.go(x);在歷史的范圍內(nèi)去到指定的一個(gè)地址。如果 x < 0,則后退 x 個(gè)地址,如果 x > 0,則前進(jìn) x 個(gè)地址,如果 x == 0,則刷新現(xiàn)在打開的網(wǎng)頁。history.go(0) 跟 location.reload() 是等效的。

    HTML5中的History API

    1. history.pushState(data, title [, url]):往歷史記錄堆棧頂部添加一條記錄;data會在onpopstate事件觸發(fā)時(shí)作為參數(shù)傳遞過去;title為頁面標(biāo)題,當(dāng)前所有瀏覽器都會 忽略此參數(shù);url為頁面地址,可選,缺省為當(dāng)前頁地址。

    2. history.replaceState(data, title [, url]) :更改當(dāng)前的歷史記錄,參數(shù)同上。

    3. history.state:用于存儲以上方法的data數(shù)據(jù),不同瀏覽器的讀寫權(quán)限不一樣。

    4. popstate事件:當(dāng)用戶單擊瀏覽器的后退或者前進(jìn)按鈕時(shí)觸發(fā)該事件。在事件處理函數(shù)中讀取觸發(fā)事件的事件對象的state屬性值,該屬性值即為執(zhí)行pushState方法時(shí)所使用的第一個(gè)參數(shù)值,其中保存了在向?yàn)g覽器歷史記錄中添加記錄同步保存的對象。

    到目前為止,IE10,firefox4以上的版本,Chrome8以上的版本,Safari5,Opera11以上的版本瀏覽器支持HTML5中的History API。

    HTML:

    代碼如下:

    <!DOCTYPE HTML>

    <html>

    <head>

    <title> New Document </title>

    <style>

    ul,li{list-style:none;}

    .container{width:px;border:px solid #ccc;overflow:hidden;}

    .container ul{float:left;width:px;}

    .container li{width:px;height:px;line-height:px;overflow:hidden;}

    .container li a{text-decoration:none;}

    .container li.current a{color:red;}

    .all-content{width:px;float:left;overflow:hidden;}

    </style>

    <script src="jquery-...min.js"></script>

    <script src="index.js"></script>

    </head>

    <body>

    <div class="container">

    <ul class="list">

    <li>

    <a href="http://localhost/html/index.php">測試</a>

    </li>

    <li>

    <a href="http://localhost/html/index.php">測試</a>

    </li>

    <li>

    <a href="http://localhost/html/index.php">測試</a>

    </li>

    </ul>

    <div class="all-content">

    <ul class="content">

    <li></li>

    <li></li>

    <li></li>

    </ul>

    </div>

    </div>

    </body>

    </html> </p> <p>

    JS:

    代碼如下:

    /**

    * HTML history and 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");

    if(ajax == undefined) {

    currentState = {

    url: document.location.href,

    title: document.title,

    html: $('.content').html()

    };

    }

    ajax = $.ajax({

    type:'POST',

    url: url,

    dataType:'json',

    success: function(data){

    var html = '';

    if(data.length > ) {

    for(var i = , ilist = data.length; i < ilist; i++) {

    html += '<li>' +data[i].age+ '</li>' +

    '<li>' +data[i].name+ '</li>' +

    '<li>' +data[i].sex+ '</li>';

    }

    $('.content').html(html);

    }

    var state = {

    url: url,

    title: document.title,

    html: $('.content').html()

    };

    history.pushState(state,null,url);

    }

    });

    });

    window.addEventListener('popstate',function(event){

    if(ajax == null){

    return;

    }else if(event && event.state){

    document.title = event.state.title;

    $('.content').html(event.state.html);

    }else{

    document.title = currentState.title;

    $('.content').html(currentState.html);

    }

    });

    });

    更多信息請查看網(wǎng)頁制作
    易賢網(wǎng)手機(jī)網(wǎng)站地址:HTML5 History API 實(shí)現(xiàn)無刷新跳轉(zhuǎn)
    由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

    2026國考·省考課程試聽報(bào)名

    • 報(bào)班類型
    • 姓名
    • 手機(jī)號
    • 驗(yàn)證碼
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點(diǎn) | 投訴建議
    工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
    云南網(wǎng)警備案專用圖標(biāo)
    聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
    云南網(wǎng)警報(bào)警專用圖標(biāo)