Ситуация:

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

Задача:

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

Решение:

С самого начала нужно было выбрать в каком формате показывать пользователю будущую страницу. Изначально предполагалось, что это будет растровое изображение. Появился вопрос — как переконвертировать html-страницу в jpg или png. Для этих задач есть готовые скрипты, но верстка под них затруднительна и не будет обеспечено повторное использование кода html-шаблона. Нами было принято другое решение — во всплывающем окне разместить блок «iframe» со ссылкой на временную html-страницу.

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

  1. После заполнения пользователем всех обязательных полей формы, на сервер отправлялся ajax-запрос с данными пользователя.
  2. Создавался временный html-файл со случайным именем.
  3. На основании полученных данных производился рендеринг html-шаблона в ранее созданный файл. Таким образом появлялся статический html-файл страницы пользователя.
  4. В качестве ответа на ajax-запрос отправлялось имя временного файла.
  5. На основании этого имени формировалась ссылка и указывалась в качестве атрибута «src» тега «iframe».
  6. Перед перезагрузкой или закрытием страницы регистрации (js-событие «unload») отправлялся ajax-запрос с указанием удалить временный файл.

В результате пользователь мог увидеть свою будущую страницу именно такой какой она будет.