Дизайн виджетов. Что лучше: IFrames или Javascript? [закрытый]

Я нахожусь на начальных этапах проектирования виджета, и вопрос дизайна пришел к тому, что более выгодно - иметь его в качестве IFrame или использовать другую технологию.

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

спасибо, Алекс!--1-->

9
iframe php widget

2 ответов

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

преимущества iframes:

  • легко включить данные с вашего сервера
  • можно использовать таблицы стилей, не беспокоясь о столкновениях селектора
  • ваш пользователь не должен беспокоиться о проблемах безопасности, связанных с запуском вашего javascript на своей странице
  • вам не нужно отображать html вашего виджета с javascript

преимущества JS только виджет

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

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

12

я встроил несколько виджетов в свой личный веб-сайт. Я вкратце приведу несколько примеров:--6-->

комментарии Facebook

// Facebook comments
<fb:comments xid="12345678" numposts="3" width="380"></fb:comments> 

// Facebook initialization
<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() {
        FB.init({appId: '123456789123456789', status: true, cookie: true, xfbml: true});
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
</script>
  • мне лично не нравится использование пользовательских тегов XML.
  • довольно излишний подход. Возможно, полезно, если вы предоставляете больше функций, чем просто простой виджет.

Twitter

// Twitter tweets
<div id="tweets-container"></div>
<script> 
    new TWTR.Widget({
        profile: true,
        id: 'tweets-container',
        loop: false,
        width: 250,
        height: 200,
        theme: {
            shell: {
                background: 'transparent',
                color: '#3082af'
            },
            tweets: {
                background: 'transparent',
                color: '#444444',
                links: '#1985b5'
            }
        }
    }).render().setProfile('TwitterUsername').start();
</script>
  • чистый и аккуратный Яваскрипт.

значок Google Chatback

// Google Chatback badge
<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlq6ob76db19rdnikg1pbce3ff3ln9076tc8unrn37r3gmje9pf3gvl80num7ta10tv34ou7has2u2th5btn3uoouvpcufnqolc1mj77nmgld5mm3qf3reqkd3jqcvemqlpr8b04pf0qaf7osm10lo6kioji176dpcn&amp;w=200&amp;h=60" allowtransparency="true" width="200" frameborder="0" height="60"></iframe>

Календарь Google

// Google calendar widget
<iframe src="http://www.google.com/calendar/embed?showTitle=0&amp;showCalendars=0&amp;showTz=0&amp;mode=WEEK&amp;wkst=2&amp;hl=en&amp;src=nicohome%40gmail.com&amp;color=%232952A3&amp;ctz=Europe%2FHelsinki" style=" border-width:0 " width="557" height="445" frameborder="0" scrolling="no"></iframe>

Закладки Delicious

// Delicious bookmarks
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/Nicodemuz?title=My%20latest%20bookmarks&icon=s&count=10&bullet=%C2%BB&sort=date&name&showadd"></script>

резюме

  • как мы видим, javascript и iframes широко используются в отрасли.
  • Если вам нужно отобразить содержимое более чем в одном месте, используйте javascript, так как iframe может быть отображен только в одном место.
  • если ваш виджет не требует javascript для работы, то переход с iframe может быть более подходящим, так как тогда ваш виджет будет также работать в браузерах с отключенным javascript.
7