Виджеты - это небольшие веб-приложения, которые можно легко добавить в любой веб-сайт.
стр. Их иногда называют гаджетами и широко используются в выращивании
количество веб-страниц, блогов, социальных сайтов, персонализированных домашних страниц, таких как
как iGoogle, мой Yahoo, netvibes и т. д. В этом блоге я использую несколько
виджеты, такие как счетчик RSS справа, который отображает, сколько
пользователи подписаны на этот блог (не волнуйтесь, он будет расти, это
новый блог ;-)). Виджеты отличные в том смысле, что они маленькие
повторно используемая часть функциональности, которую могут использовать даже непрограммисты
обогатить свой сайт.
Я написал несколько таких виджетов за время, оба «сырые» виджеты
которые могут быть встроены в любой сайт, а также гаджеты iGoogle, которые
более структурированные виджеты worpress *, typepad и blogger, так что я счастлив
поделиться своим опытом.
Как автор виджета, для виджетов, которые работают на стороне клиента (просто
встраиваемый HTML-код) у вас есть выбор написания виджета
внутри iframe или просто встроить страницу и сделать ее частью dom
страницы хостинга. Остальная часть поста обсуждает плюсы и минусы
обоих методов.
Как это технически сделано? Как использовать iframe или как реализовать
встроенный виджет?
Реализация фреймов несколько проще. Следующий пример
отображает простой виджет iframe: http://my -great-widget.com / widgwt 'width = "100" height = "100"
frameborder = '0'>
frameborder = ’0 ′ используется, чтобы убедиться, что у ifrmae нет границы
так что это выглядит более естественно на странице.
http://my -great-widget.com / widget отвечает за обслуживание виджета
содержимое в виде полной HTML-страницы.
Встроенные гаджеты могут выглядеть следующим образом:
function createMyWidgetHtml () {return "Hello world of widgets"; }
document.getElementById ('myWidget'). innerHTML = createMyWidgetHtml ();
Как видите, функция createMyWidgetHtml () отвечает за
создание фактического содержимого виджета и не обязательно должно
поговорите с сервером, чтобы сделать это. В примере iframe должен быть
сервер. В встроенном примере не обязательно должен быть сервер,
хотя при необходимости можно получить данные с сервера, который
на самом деле это очень распространенный случай, виджеты обычно вызывают на стороне сервера
код. Используя встроенный метод, код на стороне сервера вызывается с помощью
JavaScript по требованию.
Итак, подведем итог: в случае iframe мы просто размещаем HTML-код iframe.
код и указать источник iframe на место, где
на самом деле обслуживает содержимое виджета. В встроенном случае мы
создать контент локально, используя JavaScript. Вы можете, конечно, объединить
использование iframe с javascript, а также использование встроенного метода
с серверными вызовами, вы не ограничены этим, но пути
начать дифференциально.
Так в чем же дело? Какая разница? Есть несколько
важные различия, поэтому здесь начинается интересная часть
почта.
Security. Виджеты iFrame более безопасны.
Какие риски создают гаджеты и кто на самом деле подвергается риску?
Пользователь сайта и репутация сайта находятся под угрозой.
Со встроенными гаджетами браузер считает, что источник гаджета
Кодовый код приходит с хостинг сайта. Предположим, вы просматриваете
ваше любимое почтовое приложение http://my -wonderful-email.com и это
почтовое приложение установило виджет, который отображает часы из
http://great -clock-widgets.com / . Если эти виджеты реализованы как
встроенный виджет браузер считает, что код виджета возник в
my-wonderful-email.com, а не на great-clock-widgets.com, и поэтому
пусть код виджета в итоге получитдоступ к куки, принадлежащих
my-wonderful-email.com и злой автор виджета украдет у вас
Эл. адрес. Важно понимать, что браузеры не заботятся о том, где
файл javascript размещен; до тех пор, пока код работает на том же
фрейм, браузер рассматривает весь код как источник
домен. Таким образом, вы, как пользователь, получаете травму, теряя контроль над своей электронной почтой.
аккаунт и мой-чудесный адрес электронной почты пострадают, потеряв свою репутацию.
Если бы те же часы были реализованы внутри iframe и
источник iframe отличается от источника страницы (который является
общий случай, например источником страницы является my-wonderful-email.com, а
источник гаджета - great-clock-widgets.com), тогда браузер не будет
разрешить виджетам часов доступ к странице куки, а также не разрешит
доступ к любой другой части документа хостинга, включая хост
Пейдж Дом. Это намного безопаснее. На самом деле, личный дом
такие страницы, как iGoogle, даже не позволяют встроенные гаджеты, только в iframe
гаджеты разрешены. (встроенные гаджеты разрешены только в редких случаях,
только после тщательной проверки командой iGoogle, чтобы убедиться,
они не злые)
Подводя итог, можно сказать, что виджеты iframe более безопасны. Тем не менее, они также
способ более ограничен в функциональности. Далее мы обсудим, что вы теряете в
функциональность.
Внешний вид Во взгляде и ощущениях встроенные гаджеты в бою (обычно **)
выиграть. Самое приятное в них то, что они могут выглядеть как
часть страницы. Они могут наследовать стили CSS со страницы, в том числе
шрифты, цвета, размер текста и т. д. Если фреймы, OTHO должны определить их CSS из
основания, так что им довольно трудно смешаться в
стр.
Но что еще более важно, - то, что iframes должен объявить, что их
размер будет. При добавлении iframe на страницу вы должны включить
свойство width и height, и если вы этого не сделаете, браузер будет использовать
некоторые настройки по умолчанию. Теперь, если ваш виджет является виджетом часов, это
достаточно легко, потому что вы точно знаете, какой размер вы хотите, но в
во многих случаях вы не знаете заранее, сколько места занимает ваш виджет
собирается взять. Если, например, вы создаете виджет, который отображает
какой-то список, и вы не знаете, как долго этот список будет
быть или насколько широким будет каждый элемент. Обычно в HTML это не
большое дело, потому что HTML является декларативным языком, поэтому все, что вам нужно
сделать, это сказать браузеру, что вы хотите отобразить и браузер
найдет для него разумную компоновку, однако с помощью iframe
это не так; с ifrmaes браузеры требуют, чтобы вы сказали это точно
каков размер iframe, и он сам не поймет. это
реальная проблема для авторов виджетов, которые хотят использовать iframes - если вы
потребуется слишком много места, на странице будут пустоты, и если вы
слишком мало указывать, что на странице будут полосы прокрутки, не дай бог.
Смотри и чувствуй себя мудро, действующий выигрывает. Но обратите внимание, что это действительно зависит от
ваше приложение виджета. Если все, что вы хотите сделать, это часы, вы можете получить
вместе с iframe.
На стороне сервера и на стороне клиента IFrmaes требует, чтобы вы указали URL src так
при реализации виджета с использованием iframe у вас должна быть сторона сервера
код. Это может быть как ограничением, так и головной болью для некоторых (владение
сервер, доменное имя и т. д., работа с нагрузкой, оплата сетевых счетов и т. д.)
но для других это на самом деле точка в пользу iframes б / с это
давайте полностью напишем ваши виджеты в серверных технологиях,
так что вы можете написать много кода и фактически почти все, используя
ваша любимая технология на стороне сервера, будь то asp.net, django,
ror, jsp, стояки, perl или другие динозавры. При реализации
встроенный гаджет, вы будете все больше и больше практиковать свой
javascript ниндзя.
Что такое алгоритм решениям тогда? Авторы виджетов: если виджет может
быть реализован как iframe, предпочитайте iframe просто для сохранения
безопасность и доверие пользователей. Если виджет требует встраивания (и
среда позволяет это, например, не iGoogle и друзья) используйте inline, но дерзайте
не эксплуатировать доверие пользователей!
Установщики виджетов: при установке виджета в своем блоге вы не видите
лента «безопасная для пользователей» на виджетах. Как вы можете сказать, если
виджет безопасен или нет? Есть две альтернативы, которые я могу предложить: 1)
доверяйте продавцу 2) читайте код. Либо вы доверяете виджету
провайдер и установить его в любом случае, или вы не торопитесь, чтобы прочитать его код
и сами определите, заслуживает ли он доверия или нет. Реальность
что большинство владельцев сайтов не удосужились прочитать код или даже не знают
о риске, которому они подвергают своих пользователей, и поэтому поставщики виджетов
слепо доверяют. Во многих случаях это не проблема, так как блоги
обычно не хранят личную информацию о своих читателях. Я подозреваю
все начнет меняться, как только появятся несколько громких эксплойтов
(и я надеюсь, что он никогда не дойдет до этого).
Пользователи: пользователя хранят в темноте. Так же, как нет «безопасного для
пользователи »ленты на виджеты владельцы сайтов устанавливают,« безопасных для
использовать »сайты и в основном пользователи находятся в неведении и понятия не имеют,
даже если у них есть технические навыки, независимо от того, сайт они
Использует содержит виджеты, являются ли виджеты встроенными или нет, и
являются ли они вредоносными. Хотя теоретически обученный разработчик может
проверить код заранее, прежде чем запустить его в своем браузере и потерять
ее адрес электронной почты для хакера, однако это не практично, и там
не следует ожидать, что массовые пользователи сделают это. ИМО это
неудачное состояние, и я только надеюсь, что злоумышленники не найдут выход
воспользоваться этим и обречь прекрасную культуру открытых виджетов
в Интернете.
Счастливые люди виджетов!
- Некоторые платформы блогов имеют несколько иную структуру для виджетов, и иногда они могут иметь как виджеты, так и плагины, которые могут
коррелируют по своему функционалу, но по вопросу обсуждения
здесь я буду использовать термин виджет, чтобы обсудить «сырой» тип, который
состоит из JavaScript-кода на стороне клиента
** Хотя в большинстве случаев вы хотите, чтобы виджеты наследовали стили от страницы хостинга, чтобы они выглядели в соответствии с этим, иногда вы
на самом деле не хочу, чтобы виджет наследовал стили от страницы, поэтому в
В этом случае iFrames позволяет запустить CSS с нуля.