Widget design. What is better: IFrames or Javascript? [closed]

Question

I am in the beginning stages of designing a widget and a design question came up for what is more advantageous - to have it as an IFrame or to use another technology.

Has anyone built widgets before to be embedded into other sites? What is the best was to design/architect them? Any particular good practices?

Thanks, Alex

Answer 1

In general, if you are going to be using dynamic data from your server you should use an iframe, if not you shouldn't.

Advantages of iframes:

• Easy to include data from your server
• Can use stylesheets without concern for selector collisions
• Your user's don't have to worry about the security concerns associated with running your javascript in their page
• You don't have to render your widget's html with javascript

Advantages of JS only widget

• You can create snappier and more natural interfaces that don't require a second full page load and can easily be made to fit a container. This means you can avoid nested scrolls.
• Less load will be put on your server
• Your widget can interact with the rest of the page it is embedded in
• Your user has more control over the functionality of the widget.

If you're still having trouble deciding you should look at how other similar widgets are built and also consider the implications of same origin principle.

Answer 2

I have embedded several widgets into my personal website. I will briefly go through a few examples:

Facebook comments

// 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>

• I personally dislike the use of custom XML tags.
• A fairly overkill approach. Perhaps useful if you provide more functionality than just a simple widget.

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>

• Clean and neat javascript.

Google Chatback badge

// 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 Calendar

// 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 Bookmarks

// 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> 

Summary

• As we can see, both javascript and iframes are used heavily in the industry.
• If you need to render content into more than one place, use javascript, as an iframe can only be rendered into a single place.
• If your widget does not require javascript to work, then going with a iframe may be more suitable, as then your widget would also work on browsers with javascript disabled.