小工具设计.什么是更好的:IFrames或Javascript？

Question

我正处于设计小部件的初始阶段,并提出了一个更有利的设计问题 - 将其作为IFrame或使用其他技术.

有没有人在嵌入其他网站之前构建小部件？什么是最好的设计/建筑师？有什么好的做法吗？

谢谢,亚历克斯

Answer 1

通常,如果您要使用服务器中的动态数据,则应使用iframe,否则不应使用iframe.

iframe的优点:

• 易于包含来自服务器的数据
• 可以使用样式表而无需考虑选择器冲突
• 您的用户无需担心与在其页面中运行您的javascript相关的安全问题
• 您不必使用javascript渲染窗口小部件的html

仅JS小部件的优点

• 您可以创建更快速且更自然的界面,不需要第二次整页加载,并且可以轻松地使其适合容器.这意味着您可以避免嵌套滚动.
• 减少负载将放在您的服务器上
• 您的窗口小部件可以与其嵌入的页面的其余部分进行交互
• 您的用户可以更好地控制窗口小部件的功能.

如果您仍然无法确定您应该查看其他类似小部件是如何构建的,还要考虑相同原点原则的含义.

Answer 2

我已将几个小部件嵌入到我的个人网站中.我将简要介绍几个例子:

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

• 干净整洁的JavaScript.

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 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和iframe都在业界大量使用.
• 如果您需要将内容呈现到多个位置,请使用javascript,因为iframe只能呈现在一个位置.
• 如果你的小部件不需要javascript工作,那么使用iframe可能更合适,因为你的小部件也适用于禁用了javascript的浏览器.