使用客户端脚本管理浏览器历史记录

  • 项目

更新：2007 年 11 月

作为页面开发人员，您可以使用 ScriptManager 和 ScriptManagerProxy 这两个服务器控件来管理浏览器历史记录项和提供逻辑导航。还可以通过客户端脚本管理浏览器历史记录。可以通过 ScriptManager 控件在客户端中启用历史记录支持。这会生成可用来管理浏览器历史记录的客户端对象。

历史时间点是 Web 应用程序中的逻辑导航点，可以通过状态信息来表示。状态信息可用于将 Web 应用程序还原到以前的状态，此操作既可以直接用状态数据来实现，也可以通过一个存储在其他地方的状态信息标识符来实现。

历史时间点仅以 URL 的形式存储在浏览器的历史记录堆栈中。历史记录状态以查询字符串中的数据的形式来管理，或者以带有“#”字符标记的 URL 片段值的形式来管理。由于 URL 的大小限制，必须创建尽可能小的状态信息。

下面的示例演示一个包含足够标识状态的历史时间点数据的 URL。由此，应用程序可以在该状态下重新创建页面。

http://MySamples/Ajax/Default.aspx#state=2

用户单击浏览器的**“后退”**按钮之后，浏览器将转到以前查看过的 URL（包括含有历史时间点状态的 URL）。网页中的客户端代码会检测到 URL 包含历史记录状态数据，引发客户端的 Sys.Application.navigate 事件。可以处理该事件以重置应用程序，使该应用程序的状态信息包含在传递给事件的参数值中。

Cc488538.alert_note(zh-cn,VS.90).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>

请参见

其他资源

管理浏览器历史记录