クライアント スクリプトを使用したブラウザ履歴の管理
更新 : 2007 年 11 月
ページ作成者は、ScriptManager サーバー コントロールおよび ScriptManagerProxy サーバー コントロールを使用して、ブラウザ履歴のエントリを管理し、論理的なナビゲーションを提供できます。また、クライアント スクリプトを使用してブラウザ履歴を管理することもできます。ScriptManager コントロールを使用して、クライアントの履歴サポートを有効にできます。これによって、ブラウザ履歴の管理に使用できるクライアント オブジェクトが生成されます。
履歴ポイントは、Web アプリケーション内の論理的なナビゲーション ポイントであり、状態情報によって表すことができます。状態情報を使用して、Web アプリケーションを前の状態に戻すことができます。状態データは、直接操作するか、他の場所に保存されている状態情報を示す識別子をとおして操作できます。
履歴ポイントは、ブラウザの履歴スタックに URL 形式でのみ保存されます。履歴の状態は、クエリ文字列内のデータとして、または "#" 文字でマークされた URL フラグメント値として管理されます。URL にはサイズの制限があるため、状態情報はできる限り短く作成する必要があります。
状態を示すのに十分な長さの履歴ポイント データを含む URL を次の例に示します。この情報を基にアプリケーションではページをこの状態で再作成できます。
http://MySamples/Ajax/Default.aspx#state=2
ブラウザの [戻る] ボタンをクリックすると、前に表示されていた URL に表示が移動します。この URL に履歴ポイントの状態を示す URL が含まれます。Web ページ内のクライアント コードでは、URL に履歴状態データが含まれることが検出され、Sys.Application.navigate イベントが生成されます。イベントを処理して、イベントに渡されたパラメータ値に含まれる状態情報が示す状態にアプリケーションをリセットできます。
.gif "メモ") メモ : |
|---|
このトピックのサンプル コードを操作するには、Visual Studio 2008 Service Pack 1 以降のリリースが必要です。 |
ブラウザ履歴の管理を有効にする
履歴の管理を使用するには、ScriptManager サーバー コントロールを使用して、この機能を有効にする必要があります。既定では、履歴サポートは無効になっています。履歴を有効にする場合、この機能はブラウザによって異なる方法で実装されます。Internet Explorer の場合、iframe 要素がクライアントにレンダリングされます。これにより、サーバーへの要求が追加されることがあります。したがって、このモデルはオプトイン方式です。
ScriptManager コントロールを使用して、履歴を宣言によって有効にする例を次に示します。
<asp:ScriptManager runat="server" ID="ScriptManager1"
EnableHistory="true" />
ブラウザ履歴ポイントを作成する
ブラウザ履歴ポイントを作成するには、Sys.Application.addHistoryPoint メソッドを呼び出します。このメソッドを使用して、履歴のエントリ、タイトル、および必要な状態を定義できます。後で履歴ナビゲーション イベントが発生したときに、状態データを使用してページの状態を再作成できます。
履歴ポイントを追加した場合、つまりページに移動したときにその URL に履歴状態が含まれる場合、Sys.Application.navigate イベントが発生します。これによって、履歴状態が変更されたことを通知するイベントがクライアントに提供されます。navigate イベントを処理して、状態データを基にオブジェクトの再作成などの操作を実行できます。
履歴ポイントをクライアント コードで管理する方法を次の例に示します。
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Microsoft ASP.NET 3.5 Extensions</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
function page_init() {
Sys.Application.add_navigate(onStateChanged);
var cb1 = $get('clientButton1');
var cb2 = $get('clientButton2');
var cb3 = $get('clientButton3');
$addHandler(cb1, "click", clientClick);
cb1.dispose = function() { $clearHandlers(cb1); }
$addHandler(cb2, "click", clientClick);
cb2.dispose = function() { $clearHandlers(cb2); }
$addHandler(cb3, "click", clientClick);
cb3.dispose = function() { $clearHandlers(cb3); }
}
function onStateChanged(sender, e) {
// When the page is navigated, this event is raised.
var val = parseInt(e.get_state().s || '0');
Sys.Debug.trace("Navigated to state " + val);
$get("div2").innerHTML = val;
}
function clientClick(e) {
// Set a history point in client script.
var val = parseInt(e.target.value);
Sys.Application.addHistoryPoint({s: val}, "Click Button:" + val);
Sys.Debug.trace("History point added: " + val);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="false" EnableHistory="true" />
<script type="text/javascript">
Sys.Application.add_init(page_init);
</script>
<h2>
Microsoft ASP.NET 3.5 Extensions: Managing Browser History with Client Script</h2>
<p />
<div id="Div1" class="new">
<p>
This sample shows:</p>
<ol>
<li>The <code>Sys.Application</code> object and the <code>navigate</code> event and <code>addHistoryPoint</code> method.</li>
<li>The <code>addHistoryPoint</code> method demonstrates addition of titles.</li>
</ol>
</div>
<p>
</p>
<h2>Example 1: Managing browser history in client script</h2>
<p>This example includes three buttons. The handler for each button's <code>click</code> event sets
navigation history points using the <code>Sys.Application</code> object. The script used here, makes use of the
<code>Sys.Debug</code> class to dump trace information to the TEXTAREA at the bottom of the page.
</p>
<p>When you click the buttons, and history points are added, you will be able to see the list of history entries and their titles in the
"Recent Pages" drop-down in Internet Explorer, for example.
</P>
<p>To see history in action, perform the following steps:</p>
<ol>
<li>Press <b>1</b>. See the trace output.</li>
<li>Press <b>3</b>. See the trace output.</li>
<li>Press <b>2</b>. See the trace output.</li>
<li>Press the browser's Back button. Notice that the page is refreshed with previous data and
that trace information shows this.</li>
</ol>
<div id="div2" class="box">0</div><p></p>
<input type="button" id="clientButton1" value="1" />
<input type="button" id="clientButton2" value="2" />
<input type="button" id="clientButton3" value="3" />
<br /><br />
<textarea id="TraceConsole" cols="40" rows="5"></textarea>
</div>
</form>
</body>
</html>