Частичный Рендеринг Страницы С Использованием Скрытого Iframe

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

Разработчики, желающие добавить такое поведение на свои веб-страницы, часто сталкиваются с трудным решением. Все эти действия можно реализовать с помощью очень простого решения: обновления всей страницы в ответ на взаимодействие с пользователем. Однако это решение простое, но не всегда желательное. Полное обновление страницы может быть медленным, создавая у пользователя впечатление, что приложение не отвечает. Другой вариант — реализовать такие действия с помощью JavaScript (или других технологий написания сценариев на стороне клиента). Это приводит к сокращению времени отклика за счет более сложного и менее переносимого кода. JavaScript может быть хорошим выбором для простых действий, таких как обновление изображения. Однако для более сложных действий, таких как прокрутка данных в таблице, написание собственного кода JavaScript может оказаться очень сложной задачей.

В этом документе представлено решение, позволяющее избежать недостатков полного обновления страницы и пользовательских решений JavaScript. В этом документе функция частичного рендеринга страницы обеспечивает возможность повторного рендеринга ограниченной части страницы. Как и в случае с полной отрисовкой страницы, частичная отрисовка страницы отправляет запрос обратно приложению на среднем уровне для получения нового содержимого. Однако если для обновления страницы используется частичная отрисовка, обратно в браузер отправляется только измененное содержимое. В этом документе предлагается решение с использованием скрытого Iframe и простого JavaScript для объединения нового содержимого обратно на веб-страницу. Конечным результатом является то, что страница обновляется без специального кода JavaScript и без потери контекста, которая обычно происходит при полном обновлении страницы.

Введение:

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

Щелчок по ссылке или выбор элемента из списка можно использовать для прокрутки на новую страницу данных в таблице. Нажатие кнопки в таблице может добавить в таблицу новую строку.

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

Частичный рендеринг страницы можно реализовать очень простым решением, используя скрытый Iframe и минимальный JavaScript. Любая часть страницы может быть частично отображена с помощью тегов div или table в HTML.

Элементы страницы, которые могут измениться во время PPR:

Повторная визуализация данных: те же поля перерисовываются, но их данные обновляются. Примеры включают кнопку действия «Обновить данные» или пересчет итоговых значений в таблице.

Повторная визуализация зависимых полей: поля можно добавлять, удалять или изменять последовательность, а данные можно обновлять. Примеры включают список выбора страны, в котором могут отображаться разные поля адреса, а также переключение между простым и расширенным поиском.

Скрыть/показать содержимое: поля и данные переключаются между видимыми и невидимыми.

Элементы страницы, которые не изменяются во время PPR:

Некоторые элементы страницы всегда связаны со страницей, независимо от содержимого, отображаемого на странице.

Как правило, элементы над заголовком страницы (кроме окон сообщений) остаются постоянными и не меняют положение, тогда как элементы в нижнем колонтитуле постоянны, но могут перемещаться вверх или вниз по странице, чтобы приспособиться к изменениям в содержимом страницы. Следующие элементы никогда не изменяются при запуске PPR:

Брендинг

Глобальные кнопки

Вкладки, горизонтальная навигация, подвкладки.

Элементы локатора: «Хлебные крошки», «Поезд», «Следующий/назад» локатор.

Быстрые ссылки

Заголовки страниц (заголовок первого уровня).

Нижний колонтитул страницы

Разделительные линии между вкладками и заголовком страницы.

В большинстве случаев следующие элементы также не изменятся, за исключением перемещения вверх или вниз по странице для размещения измененных элементов. Тем не менее, в определенных случаях действия на странице могут потребовать их перерисовки:

Боковая навигация, если она не содержит элемента управления «Скрыть/Показать».

Подвкладки

Контекстная информация

Кнопки действий/навигации на уровне страницы.

Текст инструкции на уровне страницы.

Штампы страниц на уровне страницы.

Обозначение ключей на уровне страницы.

Во всех вышеперечисленных сценариях это решение можно использовать для достижения хорошей производительности и взаимодействия с пользователем веб-страниц.

Контексты, в которых не следует использовать PPR:

Если PPR реализован правильно, это значительно повышает производительность приложения. Если повышение производительности с помощью PPR невозможно, его не следует реализовывать, чтобы избежать ненужного раздувания кода. PPR нельзя использовать при переходе на другую страницу (с другим заголовком).

Решение для частичного рендеринга страниц:

Решение, предоставляемое для частичного рендеринга страниц с использованием простого скрытого iframe и JavaScript, его можно использовать как обобщенное решение для всех сценариев частичного рендеринга страниц. Ниже приведен основной HTML-код (таблица 1.1), который будет иметь две кнопки: одна для отображения простой таблицы, которая будет сгенерирована сервером, а другая — для удаления таблицы.

html]

голова]

title] Основной документ [/title]

язык сценария="JavaScript"]

функция showTable() {

hiframe.location="./table.htm";

функция RemoveTable() {

document.getElementById("tableId").innerHTML="";

скрипт]

голова]

тело]

iframe id="hiframe" style="visibility:hidden;display:none"][/iframe]

стол]

тр]

td]Таблица::[/td]

тд][/тд]

тр]

td colspan="2"][div id="tableId"][/div][/td]

тр]

td][input type="button" value="Показать таблицу"

onclick="showTable()"][/td]

td][input type="button" value="Удалить таблицу"

onclick="removeTable()"][/td]

тр]

стол]

тело]

html]

Таблица 1.1

iframe id="hiframe" style="visibility:hidden;display:none"][/iframe]

Этот тег iframe используется в качестве цели для запроса частичного рендеринга страницы. Тег [input type="button" value="Show Table" onclick="showTable()"] дает пользователю действие по получению содержимого таблицы с сервера. В этом примере решения предоставляется HTML-код для отображения таблицы, который должен быть сгенерирован сервером.

Тег [input type="button" value="Remove Table" onclick="removeTable()"] позволяет пользователю удалить таблицу из пользовательского интерфейса.

JavaScript

функция showTable() {

hiframe.location="./table.htm";

Используется для получения содержимого с сервера, строка hiframe.location="./table.htm"; отправляет запрос GET на сервер, и в качестве ответа iframe получает HTML. Если требование настаивает на отправке запроса POST для ответа на частичный рендеринг страницы, этого можно добиться, установив целевой атрибут элемента формы html в качестве имени скрытого iframe.

Код запроса на публикацию выглядит так: [form Method="post" action="/myaction" target="hiframe"]

Частичный ответ сервера рендеринга страниц:

В Таблице 1.2 показан пример ответа сервера для частичного рендеринга страницы. Этот ответ содержит код JavaScript для передачи HTML из скрытого iframe на главную страницу.

html]

голова]

язык сценария="JavaScript"]

функция iframeLoad() {

родитель.документ.getElementById("tableId").innerHTML =

document.getElementById("tableId").innerHTML;

скрипт]

голова]

body onload="iframeLoad()"]

div id="tableId"]

стол]

тр]

тд]1[/тд]

td]Один[/td]

тр]

тд]2[/тд]

td]Два[/td]

тр]

стол]

дел]

тело]

html]

Таблица 1.2

Тег [div id="tableId"] содержит содержимое, которое необходимо передать из скрытого

iframe на главную страницу.

стол]

тр]

тд]1[/тд]

td]Один[/td]

тр]

тд]2[/тд]

td]Два[/td]

тр]

стол]

Это содержимое, которое показывает таблицу пользователю.

Код [body onload="iframeLoad()"] используется для запуска действия.

для передачи контента.

функция iframeLoad() {

родитель.документ.getElementById("tableId").innerHTML =

document.getElementById("tableId").innerHTML;

Эта функция JavaScript выполняет передачу данных из скрытого iframe на главную страницу. Parent.document.getElementById("tableId").innerHTML Эта часть относится к идентификатору HTML тега div на главной странице, а эта часть document.getElementById("tableId").innerHTML относится к HTML частичного ответа страницы.

Заключение:

Улучшите взаимодействие с пользователем с помощью более насыщенных веб-страниц, которые лучше реагируют на действия пользователя и ведут себя как традиционные клиентские приложения. Уменьшите полное обновление страницы и избегайте мерцания страницы. Частичный рендеринг страницы с помощью iframe — очень простое решение.

Частичный рендеринг произвел революцию в способах обновления веб-страниц, устранив необходимость полного обновления страницы и обеспечив более удобный пользовательский интерфейс. Обновляя только те области страницы, которые изменились, разработчики могут создавать динамические веб-приложения, которые кажутся быстрыми и отзывчивыми. Хотя существуют различные подходы к реализации частичного рендеринга страниц, одно из эффективных решений предполагает использование скрытого iframe в сочетании с простым JavaScript.

Когда разработчики хотят добавить на свои веб-страницы функции частичного рендеринга, они часто сталкиваются с дилеммой. Один из вариантов — обновить всю страницу в ответ на действия пользователя, что является простым, но не всегда желательным решением. Этот подход может быть медленным, создавая у пользователей впечатление, что приложение не отвечает. С другой стороны, реализация частичного рендеринга страниц с использованием JavaScript или других технологий сценариев на стороне клиента может привести к сокращению времени отклика, но код становится более сложным и менее переносимым. Написание собственного кода JavaScript может оказаться сложной задачей, особенно для более сложных действий, таких как прокрутка данных в таблице.

В этой статье представлено решение, которое устраняет недостатки полного обновления страниц и пользовательских решений JavaScript. Он представляет частичный рендеринг страницы с использованием скрытого iframe и простого JavaScript для объединения обновленного содержимого обратно на веб-страницу. При таком подходе обратно в браузер отправляется только измененное содержимое, что позволяет избежать потери контекста, которая обычно происходит при полном обновлении страницы.

Концепция частичного рендеринга страницы заключается в повторной визуализации ограниченной части страницы путем отправки запроса приложению на среднем уровне для получения нового содержимого. Однако вместо обновления всей страницы обратно отправляется только измененное содержимое. Вот как работает решение с использованием скрытого iframe и JavaScript:

Основная HTML-страница содержит скрытый элемент iframe:

HTML Копировать

 function iframeLoad() {

parent.document.getElementById("tableId").innerHTML = document.getElementById("tableId").innerHTML;
}

Взаимодействия пользователя, такие как нажатие кнопки, запускают функции JavaScript для инициирования запроса частичного рендеринга страницы:

javascript Копировать

iframeLoad()

Когда <div id="tableId"> <table> <tr> <td>1</td> <td>One</td> </tr> <tr> <td>2</td> <td>Two</td> </tr> </table> </div> function is called, the hidden iframe's location is set to the URL of the server-generated table content. This sends a GET request to the server to retrieve the new contents.
Сервер отвечает HTML-страницей, содержащей код JavaScript для передачи HTML из скрытого iframe на главную страницу. Передаваемый контент обычно заключен в определенный элемент HTML, например <div> with a unique ID. Here's an example of the server response:

HTML Копировать

showTable()

Функция JavaScript function showTable() { hiframe.location = "./table.htm"; } function removeTable() { document.getElementById("tableId").innerHTML = ""; } is executed when the server response is loaded in the hidden iframe's body. This function retrieves the HTML content from the hidden iframe and merges it into the main page:

javascript Копировать

<iframe id="hiframe" style="visibility:hidden;display:none"></iframe>

Следуя этому подходу, разработчики могут добиться частичного рендеринга страниц без необходимости использования обширного пользовательского кода JavaScript. Скрытый iframe выступает в качестве цели для запроса частичного рендеринга страницы, а полученный контент легко объединяется с главной страницей с помощью JavaScript.

Частичная отрисовка страницы с использованием скрытого iframe дает несколько преимуществ. Это повышает производительность приложений за счет сокращения полностраничных обновлений и устранения мерцания страниц. Это также повышает удобство работы пользователя за счет создания веб-страниц, которые более отзывчивы и ведут себя как традиционные клиентские приложения. Кроме того, это решение относительно просто реализовать, что делает его доступным для разработчиков с разным уровнем знаний.

В заключение, частичная отрисовка страницы с использованием скрытого iframe и простого JavaScript является эффективным решением для создания динамических веб-страниц с улучшенным взаимодействием с пользователем. Обновляя только измененное содержимое страницы, разработчики могут избежать недостатков полного обновления страницы и сложных реализаций JavaScript. Этот подход обеспечивает баланс между производительностью и простотой, в результате чего веб-приложения становятся быстрыми и удобными для пользователя.

Последнее изменение: 2024-12-19 05:12:58

Вместе с данным постом часто просматривают: