위젯 디자인. 더 나은 점은 IFrame 또는 자바 스크립트?

Question

나는 위젯을 디자인하는 초기 단계에 있으며, IFrame으로 사용하거나 다른 기술을 사용하는 것이 더 유리한쪽으로 디자인 문제가 제기되었습니다.

다른 사이트에 임베드되기 전에 위젯을 만든 사람이 있습니까? 가장 좋은 것은 설계/설계하는 것입니다. 특별한 좋은 습관이 있습니까?

감사합니다, 알렉스 일반적으로

Answer 1

, 그렇지 당신이해야하지, 당신은 iframe을 사용해야 서버에서 동적 데이터를 사용하려고합니다. iframe을의

장점 :

• 쉬운
• 가 선택 충돌에 대한 걱정없이 스타일 시트를 사용할 수 서버에서 데이터를 포함하는
• 귀하의 사용자는 실행과 관련된 보안 문제에 대해 걱정할 필요가 없습니다 자신의 페이지에있는 자바 스크립트
• 위젯의 html을 자바 스크립트로 렌더링 할 필요가 없습니다.

JS210

장점은

• 당신은 두 번째 전체 페이지로드를 필요로하지 않으며 쉽게 컨테이너에 맞게 만들 수 있습니다 빠르다는 더 자연스러운 인터페이스를 만들 수 있습니다 위젯. 즉, 중첩 된 스크롤을 피할 수 있습니다.
• 적은 부하는
• 위젯은 사용자가 위젯의 기능을보다 효율적으로 제어 할 수 있습니다
• 에가 내장되어 페이지의 나머지 부분과 상호 작용할 수있는 서버에 넣어지게된다.

다른 유사한 위젯이 어떻게 만들어 졌는지 확인해야하며 동일한 원산지 원칙의 의미를 고려해야합니다.

Answer 2

개인 위젯을 여러 개인 웹 사이트에 삽입했습니다. 나는 간단히 몇 가지 예를 통해 이동합니다

페이스 북은

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

• 깨끗하고 깔끔한 자바 스크립트.

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

우리가 볼 수 있듯이 0

요약

• , 자바 스크립트, iframe을 모두 업계에서 많이 사용된다.
• 콘텐츠를 두 개 이상의 장소에 렌더링해야하는 경우 iframe을 한 ​​곳에서만 렌더링 할 수 있으므로 javascript를 사용하십시오.
• 위젯이 작동하려면 자바 스크립트가 필요하지 않은 경우 위젯이 자바 스크립트를 사용하지 않는 브라우저에서도 작동하므로 iframe을 사용하는 것이 더 적합 할 수 있습니다.