HTML5 学習ノート - 歴史 API_html5 チュートリアルのスキル-H5 チュートリアル-php.cn

HTML5 学習ノート - 歴史 API_html5 チュートリアルのスキル

WBOY

リリース： 2016-05-16 15:46:56

オリジナル

1617 人が閲覧しました

1. オープニング分析

それでは早速、今日の話題に移りましょう。今日は主に「History API」とシングルページアプリケーションにおけるその役割について説明し、そのプロトタイプとして実際の例を紹介します。「History API」を見てみましょう:

Web ページの応答速度を向上させるために、ますます多くの開発者がシングルページアプリケーションソリューションを採用し始めています。いわゆるシングルページ構造とは、複数のページを切り替えるときに、現在のページ全体が更新されず、ページ表示データが更新され、それに応じてアドレスバーの URL が変更され、ユーザーがこの URL を共有できるようにすることを意味します。

Chrome や Firefox などのブラウザを使用して「github.com、plus.google.com」などの Web サイトにアクセスすると、ページ間のクリックが ajax を通じて非同期的に要求されることがわかります。

同時にページのURLが変更になりました。また、ブラウザの前後方向を非常によくサポートできます。これほど強力な機能を持っているものは何でしょうか？さて、ここからが今日の主役である、HTML5 で参照される新しい API です:

「history.pushState」と「history.replaceState」は、このインターフェースを介して更新せずにページ URL を変更するために使用されます。まず、「履歴」インターフェースの詳細なメソッドを見てみましょう:

コードをコピー

コードは次のとおりです:

インターフェース履歴 {
readonly 属性、long length;
readonly 属性、任意の状態;
void go(オプションのロングデルタ);
void back();
void forward();
void PushState(任意のデータ、DOMStringタイトル、オプションの DOMString? url = null);
void replaceState(任意のデータ、DOMString タイトル、オプションの DOMString? url = null);
};

(2)、主要な API の説明

ここで注意すべき点が 1 つあります。「window.history.replaceState」は「window.history.pushState」に似ています。違いは、replaceState が window.history に新しい履歴レコードポイントを追加しないことと、その効果が似ていることです。 window.location に.replace(url) を実行しても、履歴レコードポイントに新しいレコードポイントは追加されません。 replaceState() メソッドは、ユーザーのアクションに応じて現在の履歴エントリの状態オブジェクトまたは URL を更新する場合に特に適しています。

(3)、事例を紹介

今日は、単一ページのアプリケーションで通常行うことについて説明します。メニューリストがあり、関連するメニュー項目をクリックして、関連するモジュールを動的にロードします。すべてのメソッドは非同期リクエストに基づいています。軟膏は、アドレスバーが変化しないこと、およびブラウザーでの前後の操作だけでなく、いかなる変更にも反応しないことがわかり、あまりユーザーフレンドリーではないため、この問題を解決するには「履歴」」が登場しますが、どうすればよいでしょうか？慌てずに、まず例のレンダリングを確認してから、以下に示すように段階的に分析してください。

以下は同じ URL を更新してもリクエストが繰り返されない監視データです。

プロセスを整理してみましょう:

初めてページが読み込まれましたが、アクセスした URL は「http://localhost:8888/bbSPA.html」ですが、実際の URL は

です。

「http://localhost:8888/bbSPA.html#shanghai」、「history.replaceState」は初期 URL 切り替え作業を完了し、初期読み込みを行いました

「shanghai.data」のデータを操作するには、左側のメニュー項目をクリックすると、右側のコンテンツが Ajax によってロードされ、それに応じてページの URL が変更されます。たとえば、「Beijing」をクリックします。。

この時点で、アドレスバーの戻るボタンをクリックして上海に戻り、コンテンツを表示します。原理は非常に単純で、「window.onpopstate」を監視することで自由な切り替えが実現されます。

わかりました!実際、これは非常に簡単です。以下は完全なコードです。

(1)、htmlパートコード

コードをコピーしますコードは次のとおりです:

bbSPA测试页面

id="list "
style="float:left;
list-style:none;"
>

< ;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(){
_init() ;
}) ;
var _history = [] ; // 记录ハッシュのアクティブアニメーションデータ容器
function _init(){
var root = $("#list") ;
vardefaultHash = 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{ // 其它认是法後退或者前进
return ;
}
}
else{
return ;
}
},false) ;
} ;
function _showContent(action){
var SamePage = _history[0]["hash "] == "#" action ;
if(samePage){ // 同页面,则不重新加ダウンロード
return ;
}
_loadContent(action ".data").done(function (data){
_renderContent(data["content"]) ;
_addToHistory("#" action,samePage) ;
}).fail(function(){
throw new Error("コンテンツのロードエラー !") ;
}) ;
} ;
function _loadContent(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
function _renderContent(text){
$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
var obj = {
ハッシュ : hash
} ;
if(noState){
_history.shift(obj) ;
window.history.replaceState(obj,"",hash) ;
}
else{
window.history.pushState(obj,"",hash) ;
}
_history.unshift(obj) ;
} ;

（四），最後总结

(1)、History Api の使用方法と具体的な例での使用の目的は、これらの問題を理解することです。

（2）、2 つのコアハート Api の相違点が存在します。

（3）、この例の注意事項は次のとおりです。

测试必要寕来一ウェブサービス务器，

http://host/

的形式去访问能生效，如果你在本地测试到file://这样的方式在浏览器打开，就会以下のような出问题：

复制代码代码如下:

Uncaught SecurityError: URL を持つ履歴状態オブジェクト「file:///C:/xxx/xxx/xxx/xxx.html」は、オリジンが「null」のドキュメントには作成できません。

転送すべきプッシュステートの URL と現在のトップページの URL は同じソースである必要があり、file:// 形式で開かれたトップページにはオリジンがないため、このアクセス許可が発生します。以上が本書のすべての内容です。