Question

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

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

谢谢，亚历

Answer 1

一般情况下，如果您要使用服务器中的动态数据，则应使用iframe，否则不应使用iframe。

iframes的优势：

轻松包含服务器中的数据
可以使用样式表而无需担心选择器碰撞
您的用户无需担心与在其网页上运行您的javascript相关的安全问题
您不必使用javascript

仅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的浏览器。

小工具设计。什么是更好的：IFrames或Javascript？

2 个答案: