小工具設計。有什麼更好的：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？

回答

相關問題