JSONP по сравнению с IFrame?
Скоро я должен буду создать виджет, который некоторые наши клиенты могут встроить в их собственные сайты.
Для соответствования требованиям завтрашнего дня моего виджета, код для встраивания был бы чем-то вроде этого:
<script type="text/javascript" src="path/to/remote/file.js"></script>
<div id="my_widget"></div>
Каковы достоинства и недостатки iframes по сравнению с JSONP?
Есть ли какие-либо общие основанные на SEO проблемы с iframes?
3 ответа
Прежде всего, iframe и jsonp не являются взаимоисключающими: один - средство рендеринга, другой - средство коммуникации.
Ваш выбор скорее между включением в документ (то есть созданием виджета в DOM хоста) и включением в ифрейм (то есть созданием нового, отдельного DOM для виджета).
Преимуществом iframe является "песочница": нет столкновения между вашим виджетом и javascript и css хоста. Это означает, что вы можете безопасно:
- использовать/определять любую библиотеку javascript, какую захотите
- использовать простой html-код вместе с простыми правилами css (что является очевидным бонусом для обслуживания)
Что касается недостатков:
- iframe имеет большой вес и может серьезно замедлить рендеринг страницы хоста
- iframe также будет потреблять гораздо больше памяти и ресурсов, что может быть проблемой, если страница хоста нацелена на мобильные устройства
Итак, если есть основания полагать, что люди, использующие ваш виджет, будут готовы "адаптировать" свои страницы под него, идите по пути in-document. Если нет, используйте iframe, но понимайте ограничения.
Что касается SEO, то пока вы динамически создаете виджет (неважно, в документе или в iframe), поисковые системы его не увидят. Не знаю, этого ли вы хотите, но это то, что вы получите ;)
.Вот несколько слайдов из презентации Алекса Секстона о междоменном сценарии
http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier
К сожалению, это только слайды, поэтому отсутствуют сопровождающие пояснения, но они могут быть полезны
Если вы выполняете вызовы API и получаете только данные, JSONP повысит производительность. Если вы рендерите объекты, вы должны использовать фреймы. Если вы хотите запретить хост-сайту доступ к данным вашего виджета, используйте iframe. Но если ваши данные являются общедоступными, то JSONP упростит реализацию (поскольку фреймы будут означать, что вам нужно иметь дело с изменением размера). С другой стороны, iframe обеспечивают хорошую песочницу CSS, поэтому вы не столкнетесь с CSS главной страницы.