19

В голове есть несколько вариантов:

1) Есть контейнер, в который используя jquery всё грузится:

<script src="http://example.com/weather/script.js" type="text/javascript"></script>
<div id="example-weather-container"></div>

2) Используем iframe:

<iframe id="wbd-weather-widget" src="https://webdevkin.ru/examples/weather/widget/widget.html" frameborder="0" scrolling="no" width="280" height="122">
                Ваш браузер не поддерживает плавающие фреймы!
</iframe>

В чем отличие этих подходов? И какой из них лучше для виджета?

4
  • Зависит от Вашей архитектуры. Первый - построение "на месте", второй - подгрузка отдельной страницы со всеми вытекающими.
    – user207618
    16 ноя 2017 в 5:01
  • На данный момент ничего ещё нет. Данный вопрос как раз и задан, чтобы определиться с архитектурой. Мне нужны плюсы и минусы каждого пункта.
    – Anon8
    16 ноя 2017 в 7:21
  • 1
    iframe - прошлый век, Вы никак не сможете вмешиваться в его содержимое, а с помощью js подгрузки, можно отлавливать события, изменять содержимое и редактировать стили
    – aliokero
    18 ноя 2017 в 10:22
  • @aliokero, а что подробно не распишите? мне нужны плюсы и минусы.
    – Anon8
    18 ноя 2017 в 10:55

4 ответа 4

5
+50

Главная проблема iframe в том, что не все современные смартфоны правильно отображают его содержимое. Также при загрузке страницы, блоки могут быть размещены хаотично через наличие на странице iframe. В результате внешний вид сайта может быть испорчен. Посколько использование смартфонов и планшетов увеличивается, этого достаточно, чтобы отказатся от фрейма Стоит еще упомянуть проблему, которая иногда возникает в пользователей браузера IE 11, когда iframe не работает. И хотя большинство браузеров имеет неплохую поддержку фреймов, этих поблем у вас не будет при использовании джаваскрипта. Хотя иногда блокировщики рекламы могут заблокировать содержимое, но это бывает очень-очень редко

3

Начнем с того что фреймы - это прошлый век и на фреймы не делают ставку современные разработчики. Если адрес сайта, где хранится ваш виджет упадет - фрейм упадет и ничего не будет. Плюс как сказал автор выше - не все браузеры и тем более мобильные правильно его отображают. Тем более это лишний запрос на сторонний ресурс.
В другом случае вы сразу подтягиваете код виджета <script src='ваш URL'></script> и в вашем div'е вы можете в крайнем случае стилизовать css ваш виджет, т.е. даже если виджет генериться полностью JS'кой, то доступ к его элементам в своем css-файле вы получите без проблем. Так же такой подход очень удобен для того, чтобы в дальнейшем интегрировать с вашим виджетом другие виджеты или скрипты. Плюс вы напрямую работаете в DOM'ом. Вариант со скриптом и дивом намного валидней и привлекательней выглядит. Даже вы сможете в своем js файле создать API вашего виджета и использовать на всей странице.
IFrame делает изоляцию и обратиться к странице в нем вы не сможете. Тем более вам в комментариях уже сказали - iframe грузит всю страницу, соответственно лишний запрос, лишнее время загрузки.

2

Мне кажется исходя из того, что в iframe не возможно вмешаться уже наводит на мысль что это не удобно и не практично. Для корректировки придется постоянно лезть на хост где лежит виджет.

Но с другой стороны этот минус может стать, плюсом если вам нужно защитить свой код от изменений.

2

Ответьте себе, для начала, на такие вопросы:
-Чего именно вы хотите добиться от виджета погоды?
-Какой в нём должен быть контент?
-Откуда вы будете тянуть данные?

Врят ли вы будете хранить данные у себя на сервере. И если я прав - то ваш выбор - js. Вам ведь в любом случае нужно писать функционал получения, парса и расстановки данных. Если то, что вы будете подгружать в iframe - ваша разработка, то, как я уже сказал, пишите всё у себя. Из плюсов - так будет быстрее отрабатывать, проще реагировать на действия над виджетом, менять там цвета и применять прочие плюшки, которые сложно сделать средствами css и вёрстки.

Явных плюсов в использовании iframe я не вижу, это скажем "для ленивых", или когда нет возможности писать js или серверный код для получения данных. Т.е. оперируете исключительно вёрсткой. В таком случае это даже не лучше, а просто единственный возможный вариант.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.