動作するHTML5 History APIのライブラリ
このプロジェクトはもともと、古いHTML4ブラウザでHTML5 History APIのサポートを追加するために考案されました。 ライブラリの最初のバージョンはこれらのニーズに正確に向けられていましたが、経過時間とこのライブラリを使用している尊敬されている開発者の希望を考慮して、Historyインターフェイスの仕様に記載されている機能を追加/修正するいくつかの中間ステップを実行するレベルまで成長しました。
今日、私の意見では、完全に終了したライブラリを安全に呼び出すことができます。 もちろん、ライブラリの作業にエラーが発生する可能性があると思います。さまざまな条件とブラウザでライブラリをテストしましたが、ご存じのとおり、すべてをキャッチすることはできませんが、何かを見逃しています。 それでは、ライブラリの機能と微妙な点について説明しましょう。
使用します。
ライブラリの使用は非常に簡単で、Historyインターフェースの公式仕様に可能な限り準拠しようとします。
私は小さな例を挙げます：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="history.js"></script> <script type="text/javascript"> window.onload = function() { // DIV function appendText( text ) { var div = document.createElement( "div" ); div.innerHTML = text; document.body.appendChild( div ); } // function handlerAnchors() { // var state = { title: this.getAttribute( "title" ), url: this.getAttribute( "href", 2 ) // 6-7 } // history.pushState( state, state.title, state.url ); // .. // ... appendText( '<b> :</b> ' + '<span style="color: green;">' + state.url + '</span>' ); // return false; } // var anchors = document.getElementsByTagName( 'a' ); // for( var i = 0; i < anchors.length; i++ ) { anchors[ i ].onclick = handlerAnchors; } // popstate // back/forward window.onpopstate = function( e ) { // appendText( '<b> :</b> ' + '<span style="color: green;">' + history.location + '</span>' + '<br/><b>state:</b> <span style="color: green;">' + JSON.stringify( history.state ) + '</span><br/><br/>' ); // .. // ... } } </script> </head> <body> <h1> , back/forward</h1> <a href="/mylink.html" title=" My Link">My Link</a> <a href="/otherlink.html" title=" Other Link">Other Link</a> </body> </html>
ご覧のとおり、このライブラリを使用するのに複雑なことはありません。上記の例から、Historyインターフェースの仕様で説明されているメソッドの使用に実質的に違いはないことに気付いたでしょう。
history.location
オブジェクトから
popstate
イベントが
popstate
ときに現在のリンクを取得するという点で、わずかな違いが1つだけあります。
どのように機能しますか？
HTML5ブラウザでは、履歴を操作するときにバグ/エラーを修正する役割のみを実行します。 また、リンクは通常の見栄えがよく、ハッシュフォールバックを使用しません。
もちろん、HTML4ブラウザーでは、このようなブラウザーには他のオプションがないため、ハッシュフォールバックが使用されます。 ただし、JavaScriptコード内の開発者にとっては、リンクは元々考えられていたように見えるため、これは何らかの病気ではありません。 また、ハッシュリンクを書き留めたり、検索エンジンのルールに従う必要がないので、通常どおりサイトのインデックスを作成できます。 結局、リンクは通常の形式になります。つまり、検索ロボットは目的のリンクを静かにクリックします。
ライブラリ機能。
ライブラリを使用する場合、ライブラリにはわずかな微妙さがあります。 既に
window.location
ように、ライブラリには独自の
history.location
オブジェクトがあり、よく知られている
window.location
オブジェクトと違いはありません。 つまり、一言で言えば、これは
window.location
オブジェクトへの参照です。ただし、HTML4ブラウザーでは、元のオブジェクトからのゲッター/セッターをインターセプトし、必要な変更を加えて結果を返します。
history.location
方法は何にも制限されません
history.location
また、割り当て、受信、プロパティへのアクセスなどを行うこともできます。
たとえば、次のようになります。
history.location = "http://yandex.ru/"; // . history.location.hash = "#newhash"; // hash . // , // Location
ライブラリの次の微妙な点は、ニーズに合わせてカスタマイズすることです。 ライブラリには設定するオブジェクトはありませんが、
script
HTML要素を介してライブラリを接続するときにGETパラメーターからオブジェクトを取得し
script
。つまり、スクリプトがサイトに接続されるとリンクを読み取ります。
次のようになります。
<script type="text/javascript" src="history.js?type=/&redirect=true&basepath=/pathtosite/"></script>
ライブラリをサイトに接続することにより、そのサイトから必要なアクションを事前に指定できます。 ライブラリには3つのパラメーターしかありません。次に、それらのアクションと必要性について説明します。
パラメーター： タイプ
これは特別な役割を果たしません。HTML4ブラウザーでリンクを装飾する必要があります。 このパラメーターでは、＃（ハッシュ）記号の後に追加される行/文字を絶対に指定できるため、単に目的の文字/テキストでリンクを装飾します。 たとえば、このパラメーターをテキスト「HelloWorld /」に設定すると、リンクにはこのサブストリングが含まれます。 リンクhttp://somesite.com/folder/page.htmlをクリックして、 http ： //somesite.com/#HelloWorld/folder/page.htmlという形式のリンクを取得します。 このパラメーターを試すことができます。 デフォルトでは、このパラメーターにはライブラリーにサブストリング「/」（スラッシュ）があります。
パラメーター： basepath
このパラメーターによると、ライブラリーは重要なパラメーターの1つであり、
history.location
オブジェクトへのリンクを形成します。 サイトのルートがどこにあるかを示します。通常、サイトはドメインのルートに直接ありますが、メインドメインとは異なるフォルダーにサイトを配置する必要がある場合があります。 このため、ルートの外部にあるサイトがHTML4ブラウザーで完全に機能するように、このパラメーターが追加されました。
パラメーター： リダイレクト
このパラメーターは、HTML4ブラウザーからHTML5ブラウザーにコピーされたリンクをたどるときにサイトをリダイレクトする役割を果たします。 フォームのリンクに従ってユーザーをリダイレクトするだけです： http : //somesite.com/#/folder/page.htmlをフォームhttp://somesite.com/folder/page.htmlのリンクにリダイレクトし、ユーザーがブラウザーからリンクをクリックした場合HTML5からHTML4ブラウザー。 このパラメーターはユーザーのリダイレクト先を決定するのはこのパラメーターであるため、このパラメーターはbasepathパラメーターと密接に関連していることを覚えておくことが重要です。
おわりに
結論として、時々、私たちがどのブラウザーにいるのか、HTML4ブラウザーまたはHTML5ブラウザーで見つける必要があることを付け加えたいと思います。 これらの目的のために、emulationプロパティを
window.history
オブジェクトに追加して、エミュレーションが行われているかどうかを示します。 このプロパティがtrueの場合、HTML4ブラウザーでハッシュリンクを操作します。それ以外の場合はそうです。
また、HTML5ブラウザでは、ライブラリが履歴インターフェースのバグ/欠陥とそれに関連するすべてを修正することも追加します。 たとえば、Safariでは状態オブジェクトをHistoryインターフェースに追加し、SafariおよびChromeブラウザーでは初期状態を削除します （ドキュメントが最初にロードされ
popstate
ときに
popstate
イベントが発生します）。
ライブラリは仕様に記載されていないことは行わず、公式文書でのみ動作することを覚えておくことが重要です。 ライブラリは、いくつかのメソッド/プロパティをオーバーロードし、それに関連付けられているメソッド/プロパティへのアクセスをすぐにインターセプトするため、最初にページ自体に含める必要があります。 したがって、他のライブラリ/スクリプトの前に接続する価値があります。
ライブラリは絶対にあらゆるフレームワークで動作し、独自の目的のためにそれらを使用しません。
ライブラリはブラウザでテストされています：
IE 6+
Firefox 3以降
Opera 11+
Opera Mobile 11+
Chrome 17+
Safari 5以降
他のブラウザまたはバージョンをチェックインする機会があり、簡単に購読を解除できる場合は、非常に感謝しています。
すべての要望、質問、バグレポートなど githubに示されているメールを送信するか、githubのIssuesセクションに書き込みます。
GitHubでこのライブラリをダウンロードして見ることができます： https : //github.com/devote/HTML5-History-API
ライブラリのパフォーマンスは、残念ながら未完成のWebサイトhttp://history.spb-piksel.ru/でも見ることができます。 サイト自体は完成していませんが、ライブラリのパフォーマンスを見ることができます。
UPD（2012年12月9日）： 重要！ IE9でのライブラリの動作不能について頻繁に書き始めました。 問題は、IE9が不機嫌なブラウザであり、すべてのささいなことで障害を見つけるという事実によるものです。 判明したように、GitHubから取得したスクリプトを使用する多くの開発者は、IE9がスクリプトを接続するときにアプリケーション/ javascriptヘッダーを受信することを期待しますが、GitHubはテキスト/プレーンヘッダーを返すため、動作不能の問題に直面します。 したがって、スクリプトをGitHubに直接接続することはお勧めしません。 ホストにスクリプトをダウンロードして使用します。