小部件设计。哪个更好：IFrame 还是 Javascript？ [关闭]

Question

我正处于设计小部件的初始阶段，并且提出了一个设计问题，即将其作为 IFrame 还是使用其他技术更有利。

之前有没有人构建过小部件以嵌入到其他网站中？最好的设计/架构是什么？有什么特别好的做法吗？

谢谢， 亚历克斯

Answer 1

一般来说，如果您要使用来自服务器的动态数据，则应使用 iframe，否则不应使用。

iframe 的优点：

• 轻松包含来自您的服务器的数据
• 可以使用样式表而不用担心选择器冲突
• 您的用户不必担心与在他们的页面中运行 JavaScript 相关的安全问题
• 您不必使用 javascript 呈现小部件的 html

仅 JS 小部件的优点

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

如果您仍然难以决定，您应该看看其他类似的小部件是如何构建的，并考虑同源原则的含义。

Answer 2

我在我的个人网站中嵌入了几个小部件。我将简要介绍几个示例：

Facebook cmets

// 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 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 的浏览器上工作。