Способ интеграции сайта в сайт
Владельцы патента RU 2517252:
Общество с ограниченной ответственностью "БАБЛГЭБ" (RU)
Изобретение относится к способу интеграции одного сайта в другой сайт. Технический результат заключается в расширении функциональных возможностей и оптимизации одновременной работы на двух сайтах за счет исключения перезагрузок и обновления страниц сайтов. В способе на сайт-реципиент встраивают JavaScript код, обеспечивающий сохранение функциональности сайта-реципиента, с помощью которого определяют в каком фрейме открыт сайт-реципиент, если сайт-реципиент открыт во внешнем фрейме, то содержимое этого сайта с помощью JavaScript кода очищают и открывают в IFrame сайт-донор, которому в параметрах передают адрес сайта-реципиента, затем на встроенном сайте-доноре определяют по переданным параметрам адрес сайта-реципиента и открывают его в созданном IFrame, если сайт-реципиент открыт во внутреннем фрейме, то отслеживают изменения адреса внутри IFrame, а с помощью JavaScript-кода меняют содержимое адресной строки, при этом оба сайта загружают с одного доменного имени сайта-реципиента. 7 ил.
Изобретение относится к области управления доступом и работоспособностью сайтов в сети Интернет. В частности, к способу встройки одного сайта (донора) в другой сайт (реципиент) через рекурсивное вложение с отключением перезагрузки сайта-донора при сохранении функциональности сайта-реципиента, даже при переходе между ссылками сайта-реципиента.
Метод работы с сайтами интернета заключается в одновременной загрузке нескольких web-страниц с разных сайтов в браузере и характеризуется либо открытием в разных окнах браузера нужных web-страниц сайтов, либо открытием в одном окне браузера, но с сохранением только внешних ссылок на другие web-страницы сайтов, при переходе на которые предыдущий сайт закрывается.
Один из наиболее близких способов подразумевает открытие в одном окне браузера нескольких окон меньшего размера, в которых загружают нужные web-страницы сайтов. Это выполняется открытием в одном окне браузера нескольких окон меньшего размера, в которые загружают нужные web-страницы сайтов, причем каждую из web-страниц сайта загружают с захватом в заданной области экрана. Заданная область экрана на web-странице для пользователя изначально выбирается. Заходя на web-страницу выбранного им сайта, выделяется прямоугольная область экрана web-страницы, у которой определяют координаты отступа от верха или низа и левого края или правого края web-страницы. Также определяют размеры области выделения по ширине и высоте, после чего загрузка выбранной web-страницы сайта производится с отображением данной страницы в границах полей области выделения с использованием ранее определенных параметров отступа и размеров области выделения (заявка RU 2009101668/08).
Недостатки данного способа выражены в неполноценности, ограниченности предоставленных данных, передаваемых через встраиваемые окна, также окна являются всего лишь ссылками на страницы, при переходе на которые открывается или новое окно, или происходит переход на другую страницу с несохранением предыдущей.
Техническим результатом изобретения является обеспечение пользователя возможностью одновременной работы на двух сайтах без перезагрузок и обновления их страниц. Добавление функциональности сайта-реципиента происходит за счет интеграции сайта-донора на ту же web-страницу, где находится сайт-реципиент, при этом пользователь управляет двумя сайтами одновременно.
В изобретении предложен способ встройки одного сайта-донора в другой сайт-реципиент. Это возможно при встраивании JavaScript кода на сайт-реципиент, обеспечивающий при этом сохранение функциональности сайта-реципиента, с помощью которого определяют, в каком фрейме открыт сайт-реципиент. Если сайт-реципиент открыт во внешнем фрейме, т.е. Iframe с адресом сайта-донора, то содержимое этого сайта с помощью JavaScript кода очищается, и открывают во внешнем фрейме сайт-донор, открываемый во внешнем фрейме сайт-донор создает внутри этого фрейма еще один внутренний фрейм. Сайту-донору в параметрах передают адрес сайта-реципиента. На встроенном сайте-доноре определяется по переданным параметрам адрес сайта-реципиента, и открывают его в созданном внутреннем фрейме. При этом получается, что если сайт-реципиент открыт во внутреннем фрейме, т.е. Iframe с адресом страницы сайта-реципиента, то отслеживается изменение адреса внутри IFrame, а с помощью JavaScript-кода меняется содержимое адресной строки, и оба сайта загружаются с одного доменного имени сайта-реципиента.
Заявляемое изобретение поясняется следующими фигурами:
Фиг.1 - Страница сайта-реципиента
Фиг.2 - Страница сайта-реципиента, содержащая фреймы из сайтов-доноров
Фиг.3 - Страница сайта-реципиента, готовая к интеграции с сайтом-донором
Фиг.4 - Страница сайта-реципиента после загрузки внедренного JavaScript-кода
Фиг.5 - Страница сайта-реципиента сразу после того, как внедренный JavaScript-код очистил ее и создал Внешний фрейм
Фиг.6 - Страница сайта-реципиента после интеграции с сайтом-донором
Фиг.7 - Перемещения пользователя по страницам сайта-реципиента: обновление адресной строки браузера
Для встройки на страницу сайта-реципиента сайта-донора применяется скриптовый язык JavaScript и производятся следующие действия:
1. На страницу сайта-реципиента подгружается с сайта-донора файл embedded.js, содержащий код JavaScript, который автоматически запускается на странице сайта-реципиента.
2. При вызове любой из страниц сайта-реципиента внедренный JavaScript-код выполняет следующие действия:
- очищает страницу,
- инициализирует механизм обновления адресной строки,
- открывает на пустой странице внешний фрейм с адресом сайта-донора.
3. Открываемый во внешнем фрейме сайт-донор выполняет следующие действия:
- создает внутри внешнего фрейма еще один внутренний фрейм с адресом страницы сайта-реципиента,
- загружает оставшуюся часть страницы сайта-донора, состоящую из визуальных элементов и кода, обеспечивающего дополнительную функциональность страницы-реципиента.
4. Таким образом, во внутреннем фрейме, находящемся внутри внешнего фрейма сайта-донора, открывается страница сайта-реципиента. Адрес страницы сайта-реципиента передается во внутренний фрейм из внешнего фрейма, а во внешний фрейм, в свою очередь, из встроенного в сайт-реципиент JavaScript-кода, который использует текущий URL страницы.
5. Пример PHP-кода создания внутреннего фрейма: <iframe src="<?php echo urldecode($_REQUEST['site']); ?>?embedded=true" frameborder="0" style="border-width: 0px; width: 100%; height: 100%; "></iframe>
6. Так как каждая страница сайта-реципиента содержит внедренный в нее JavaScript-код, то каждый запрос страницы сайта-реципиента вызывает исполнение этого кода. Определив, что страница сайта-реципиента вызвана во "внутреннем фрейме, JavaScript-код выполнит обновление адресной строки браузера.
Обновление адресной строки браузера - важная составляющая заявленного способа интеграции сайта в сайт с сохранением полной функциональности сайта-реципиента. Механизм обновления задействуется каждый раз при открытии страницы сайта-реципиента внутри фрейма.
Механизм обновления адресной строки браузера использует возможность стандарта DOM Level 2 устанавливать слушатель или обработчик, который в зависимости от получаемых значений параметров выполняет определенную работу. Предпочтительно использовать обработчик, устанавливаемый на самом верхнем уровне страницы сайта-реципиента. Данный обработчик принимает новые значения URL от каждой вновь загружаемой во внутреннем фрейме страницы сайта-реципиента и устанавливает адресную строку браузера в полученное значение.
7. Теперь, при перемещениях пользователя по страницам сайта-реципиента, открытого во внутреннем фрейме, JavaScript-код этой страницы передает сообщение странице сайта-реципиента, открытой на верхнем уровне, о новом URL, и Javascript-код этой страницы устанавливает адресную строку браузера в новое значение.
8. Как результат интеграции сайта-донора в сайт-реципиент мы видим в окне браузера сайт-реципиент в том же виде, как и до интеграции:
- не изменяется верстка сайта-реципиента, внешний вид сайта не претерпевает никаких изменений;
- сохранена полностью функциональность сайта-реципиента;
- в адресной строке отображается текущая страница сайта-реципиента;
- сохранена возможность перемещения между страницами сайта-реципиента с сохранением истории переходов, формированием закладок и т.п.
Другим результатом интеграции сайта-донора в сайт-реципиент является добавленная функциональность, которую принес с собой сайт-донор.
Данные механизмы позволяют пользователю идентифицировать сайт-реципиент и в любой момент времени видеть адрес конкретной открытой страницы (URL), что позволяет делать закладки и отслеживать историю переходов по этому сайту.
В результате произведенных действий пользователи получают техническое решение - сайт-донор, который функционирует без перезагрузок страницы и сайт-реципиент, который может перезагружать страницы по мере того, как пользователь переходит по ссылкам внутри этого сайта без каких-либо ограничений. Фактически это первое удачное решение проблемы симбиоза двух полноценных сайтов. Сайт-донор может оставлять поверх сайта-реципиента любые элементы, которые при переходе по ссылкам сайта-реципиента будут сохранять свое положение и режим работы.
Сайт-донор может отображать на странице свои управляющие элементы - такие как статус-бар внизу экрана под фреймом сайта-реципиента, или окно чата системы онлайн-консультанта, частично перекрывающее содержимое сайта-реципиента. В этом случае мы будет видеть одновременно и сайт-реципиент, ограниченный размерами фрейма (в том числе и распахнутого на все окно браузера), и элементы сайта-донора, располагаемые рядом с фреймом или перекрывающие (частично или полностью) фрейм сайта-реципиента.
Обычно при осуществлении HTTP-запроса возвращается веб-страница, размещенная на каком-либо домене. В окне браузера можно увидеть содержимое этой страницы, а в адресной строке браузера - адрес этой страницы (см. фиг.1).
В случае, когда требуется присутствие в окне браузера двух и более доменов, используется HTML-тег iframe, позволяющий, например, внутри страницы сайта-реципиента (домена a.com на фиг.1) открывать страницу сайта-донора (домена b.com, см. фиг.2) в области, ограниченной размерами данного фрейма. На фиг.2 показан вариант размещения на странице сайта-реципиента фреймов сразу двух сайтов-доноров (доменов: b.com и c.com).
В этом случае при перемещениях пользователя по ссылкам, даже по страницам того же домена a.com, содержимое окна браузера полностью перегружается, очищая все содержимое предыдущего окна браузера, в том числе и все фреймы предыдущей открытой страницы.
Указанный способ интеграции сайта в сайт может использоваться в ситуации, когда требуется постоянное присутствие какого-то сервиса, связанного с данным сайтом, который не перезагружался бы при переходе пользователя между страницами сайта и обеспечивал пользователя некоторым дополнительным набором функциональности.
Примером использования способа интеграции сайта в сайт могут служить:
1. Сервис «Онлайн-консультант» для сайта. Пользователь с помощью данного сервиса получает консультацию у менеджера сайта через чат или видео-чат, при этом может спокойно переключаться между страницами сайта, не прерывая диалога и не перезагружая окно онлайн-консультанта;
2. Просмотр медиа на сайте. Пользователь может смотреть видео или фотоальбом на сайте, параллельно перемещаясь по страницам сайта без перезагрузки окна плеера;
3. Общение пользователей сайта. Сайт-реципиент может подключить сервис, расположенный на сайте-доноре, который позволяет пользователям сайта общаться между собой (текстовый чат, видео-чат). При этом просмотр пользователем сайта и общение его с другими пользователями - это разные функции сайта, которые никак не влияют друг на друга, хотя и располагаются в одном окне браузера, обеспечивая пользователя суммарной функциональностью.
Приведем пример использования способа:
Существует сайт-реципиент, расположенный на домене a.com, который продает товары (см. фиг.1).
Принято решение дополнить сайт сервисом онлайн-консультанта, который предоставляет сайт-донор (домен b.com). Для включения данного сервиса необходимо вставить на страницы сайта-реципиента строку JavaScript-кода (см. фиг.3).
Теперь, при вызове любой страницы сайта-реципиента внедренный JavaScript-код загрузит с сайта сервиса JavaScript-файл (см. фиг.4), который очистит текущую страницу, установит обработчик для последующего обновления адресной строки браузера и создаст внешний фрейм с адресом сервиса онлайн-консультанта (см. фиг.5).
Сервис онлайн-консультанта, открывшийся во внешнем фрейме, создает внутренний фрейм с адресом страницы сайта, который был получен в качестве GET-параметра адресации внешнего фрейма
Теперь, после интеграции сайта с сайтом сервиса онлайн-консультанта, в окне браузера мы увидим сайт (открывшийся в Внутренний фрейм) и полосу сервиса онлайн-консультанта, на которой находятся управляющие элементы, позволяющие начать чат с консультантом сайта (см. фиг.6)
При перемещениях пользователя по страницам сайта (которые фактически происходят в Внутренний фрейм) срабатывает система обновления адресной строки браузера, которая передает текущий адрес нашего сайта, открытого в Внутренний фрейм, странице нашего сайта, находящейся на верхнем уровне, и устанавливает адресную строку в текущее значение (см. фиг.7).
Если пользователь сайта решил воспользоваться, например, услугой онлайн-консультанта и начал видео-чат с менеджером сайта, ничто не мешает ему смотреть разные товары на разных страницах сайта-реципиента, не прекращая общение с менеджером
Точно так же, если сервис онлайн-консультанта предлагает посмотреть промо-ролик товара, то, открывшись в правом нижнем углу окна браузера, этот ролик будет играть независимо от того, переходит пользователь с одной страницы сайта на другую, или нет. При этом пользователь имеет возможность переходить по ссылкам сайта-реципиента, которые полностью перегружают все элементы сайта, но элементы сайта-донора остаются нетронутыми и работают без обновления страницы. Также в истории браузера остаются записи о переходах по сайту-реципиенту, а пользователь видит в адресной строке браузера только ту ссылку, которая отражает текущее положение пользователя на сайте-реципиенте. При этом сайт-донор никак не отражается в адресной строке браузера сайта-реципиента, а кнопки назад и вперед, не оказывая никакого влияния на работу сайта-донора, но напрямую воздействуя на сайт-реципиент.
Визуальное отображение элементов сайта-донора может быть различным. Сайт-донор может никак визуально не проявляться в окне браузера. В этом случае мы будем видеть только сайт-реципиент, размещенный в распахнутом на все окно браузера фрейме, и не догадываться до определенного момента о том, что на странице присутствует сервис, предоставляемый сайтом-донором.
Способ встройки одного сайта (донора) в другой (реципиент), характеризующийся тем, что на сайт-реципиент встраивают JavaScript код, обеспечивающий сохранение функциональности сайта-реципиента, с помощью которого определяют в каком фрейме открыт сайт-реципиент, если сайт-реципиент открыт во внешнем фрейме, то содержимое этого сайта с помощью JavaScript кода очищают и открывают в IFrame сайт-донор, которому в параметрах передают адрес сайта-реципиента, затем на встроенном сайте-доноре определяют по переданным параметрам адрес сайта-реципиента и открывают его в созданном IFrame, если сайт-реципиент открыт во внутреннем фрейме, то отслеживают изменения адреса внутри IFrame, а с помощью JavaScript-кода меняют содержимое адресной строки, при этом оба сайта загружают с одного доменного имени сайта-реципиента.
