Управление журналом веб-обозревателя с помощью клиентского сценария

  • Статья

Обновлен: Ноябрь 2007

Разработчик страницы имеет возможность управлять записями журнала веб-обозревателя и обеспечивать логическую навигацию путем использования серверных элементов управления ScriptManager и ScriptManagerProxy. Управлять журналом веб-обозревателя также можно посредством клиентского сценария. Поддержка журнала в клиенте включается посредством элемента управления ScriptManager. При этом создаются клиентские объекты, которые можно использовать для управления журналом веб-обозревателя.

Точка предыдущего состояния представляет собой точку логической навигации в веб-приложении, которая может быть представлена посредством сведений о состоянии. Сведения о состоянии могут использоваться для восстановления одного из предыдущих состояний веб-приложения либо непосредственно по данным состояния, либо посредством идентификатора сведений о состоянии, хранимых в другом месте.

Точки предыдущих состояний хранятся в стеке журнала веб-обозревателя только в виде URL-адресов. Предыдущим состоянием манипулируют как данными в строке запроса или как фрагментом URL-адреса, помеченным символом "#". В связи с ограничениями на размер URL-адресов создаваемые сведения о состоянии должны быть минимального размера.

В следующем примере показан URL-адрес, содержащий достаточное количество данных о точке предыдущего состояния для идентификации состояния. По этим данным приложение сможет воссоздать страницу в том состоянии.

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

Когда пользователь нажимает в обозревателе кнопку Назад, обозреватель переходит к ранее просмотренным URL-адресам, в числе которых будут и URL-адреса, содержащие предыдущие состояния. Клиентский код на веб-странице обнаруживает, что URL-адрес содержит данные о предыдущих состояниях, и вызывает событие Sys.Application.navigate клиента. Можно обработать это событие для возврата приложения в состояние, сведения о котором содержатся в значениях переданных событию параметров.

Cc488538.alert_note(ru-ru,VS.90).gifПримечание.

Для работы с примерами кода в этом разделе необходимо располагать Visual Studio 2008 с пакетом обновления 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>

См. также

Другие ресурсы

Управление журналом веб-обозревателя