ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 履歴 API の概要
IHtml5 History API の概要
History はグローバル変数です。つまり、Window.history
プロパティとメソッドは次のとおりです:
Length: レコードの数歴史的なスタック。
back(): 前のページに戻ります。
forward(): 次のページに進みます。
go([デルタ]): デルタは数値です。0 または空の場合は、このページを更新します。正の場合は、[デルタ] ページに進み、負の場合は、 δページに戻ります。
HTML5 では、次の 2 つのメソッドが追加されています:pushState(data, title, [,url]): 履歴スタックの先頭にレコードを挿入します。 data はオブジェクトまたは null で、ウィンドウの Popstate イベント (window.onpopstate) の state パラメーターとして渡されます。
title はページのタイトルです。現在、すべてのブラウザはこのパラメータを無視します。
urlはページのURLで、書かれていない場合は現在のページです。
replaceState(data, title, [,url])
: 現在のページの履歴を変更します。この変更により、URL にはアクセスできなくなります。 replaceState() の URL パラメーターは、現在のページのプロトコル (HTTP、HTTPS など) およびドメイン名とまったく同じである必要があります (異なるサブドメインの使用は機能しません)
現在、Safari 5.0 以降、Chrome のみ8.0 以降、Firefox 4.0 以降、iOS 4.2.1 以降をサポートします。古いブラウザとの互換性を維持したい場合は、History.js を試すことができます。これにより、いくつかのバグも修正されます。
pushState と replaceState の使用: <?php
$photo = isset($_GET['id'])? $_GET['id'] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
function go(c){
document.title = 'test' + c; //更改title
window.history.pushState({'title':'test'+c, 'photo':c}, 'test'+c, 'test.php?id='+c); // 插入前一页历史记录
window.history.replaceState({'title':'test'+c, 'photo':c},'test'+c, 'test.php?id='+c); // 更改当前历史记录
document.getElementById("photo").src = c + '.jpg';
}
window.onpopstate = function(obj){
if(obj.state!=null){
document.title = obj.state.title; // 后退时更新title
document.getElementById("photo").src = obj.state.photo + '.jpg';
}
}
</script>
</head>
<body>
<p>
<a href="javascript:void(0)" onclick="go(1)">page 1</a>
<a href="javascript:void(0)" onclick="go(2)">page 2</a>
<a href="javascript:void(0)" onclick="go(3)">page 3</a>
<a href="javascript:void(0)" onclick="go(4)">page 4</a>
</p>
<p><img src="<?=$photo ?>.jpg" id="photo"></p>
</body>
</html>
window.onpopstate = function(event){
alert(event.state);
}
この記事は、HTML5 履歴 API の導入に関するものであり、関連するコンテンツについては、php 中国語 Web サイトを参照してください。
バブリング、二分法挿入、クイックソートアルゴリズムの紹介
ブレークポイントレジュームをサポートするPHPファイルダウンロードクラスの説明
PHPタグ属性クラスを介してHTMLをフィルタリングする方法
以上がHTML5 履歴 API の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。