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

我正处于设计窗口小部件的初始阶段，并且出现了一个更有利的设计问题 - 将其作为IFrame或使用其他技术。小工具设计。有什么更好的：IFrames或Javascript？

有没有人构建过之前要嵌入到其他网站的小部件？什么是最好的设计/建筑师呢？任何特别的良好做法？

谢谢，亚历克斯

来源

2011-03-19 Genadinik

问题太模糊（阅读：不是一个真正的问题）。 iframe元素和ECMAScript/JavaScript在很大程度上不存在重叠的目的。 – 2011-03-19 03:20:38

问题是 - 什么是一些实现小部件的最佳实践方法？ – Genadinik 2011-03-19 03:23:12

这不是模糊的，作者非常清楚目的（一个可嵌入的部件）。这是最差的StackOverflow。 – 2014-07-10 10:56:37

在一般情况下，如果你打算使用动态数据从你的服务器，你应该使用iframe，如果不是你不应该。

优势的I帧：

容易从你的服务器包括数据
可以使用样式表而无需选择碰撞关注
你的用户不必担心与运行有关的安全问题您的JavaScript在他们的页面
您不必使用javascript呈现widget的HTML

JS的210个

优势只有小部件

您可以创建不需要第二个完整的页面加载并可以很容易地做适合的容器迅捷，更自然的接口。这意味着你可以避免嵌套滚动。
减负荷将您的服务器上放
你的小部件可以在
你的用户在Widget的功能，更多的控制与它被嵌入网页的互动。

如果您仍然无法决定如何构建其他类似的小部件，并且还要考虑同源原则的含义。

来源

2011-03-19 03:37:23 tilleryj

谢谢 - 这很有帮助！ – Genadinik 2011-03-19 03:39:54

我在我的个人网站中嵌入了几个小部件。我将简要经过几个例子：

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>

干净整洁的JavaScript。

谷歌网页即时聊天标志

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

来源

2011-03-19 03:52:22 Nicodemuz

这是一个非常好的和有益的答案！谢谢！ :) – Genadinik 2011-03-19 06:22:48

@Nicodemuz嘿有没有一种方法来显示像谷歌日历iframe中的Facebook日历？ – 2014-04-29 11:39:58

许多小部件要求您添加JS代码，但是会为实际UI创建一个iframe。 – miracle2k 2017-10-08 09:46:15

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

回答

相关问题