자바 스크립트 배지 또는 위젯을 만들려면 어떻게해야하나요?

Question

링크 목록을 표시하는 자바 스크립트 배지를 만들고 싶습니다. 우리는 우리 도메인에서 자바 스크립트를 호스팅합니다. 다른 사이트에서는 빈 div 태그를 페이지에 넣을 수 있으며 하단에는 div 태그의 내용을 렌더링하는 javascript에 대한 참조가 있습니다. 이런 식으로 어떻게 구현합니까? 그들의 몸 태그를 변경 한 후

<script type="text/javascript" src="http://yourdomain.com/mywidget.js"></script> 

이 있습니다 그들이 당신의 자바 스크립트에 링크가 다음

<div id="mywidget"></div> 

: 당신이 그들의 페이지 하단에있는 사업부를 넣어 가지고 말하는 것처럼

Answer 1

, 또는 귀하의 스크립트를 호출 onload

<script type="text/javascript"> 
    document.body.onload = loadYourWidget(); 
</script> 

Answer 2

처럼 @ 오웬, 왜 그렇게하지 않는 자바 스크립트를 공예품

<script type="text/javascript" src="http://yourdomain.com/mywidget.js"></script> 

는 바로 HTML 소스에서 mywidget의 DIV 후 스크립트 태그를 포함 할 경우, 따라서 자신의 DOM로드에서 그들을 loadYourWidget를 호출 할 필요가() 부정, 그 자체 <div id="mywidget"></div>을 채우는 작업을 수행합니다. 이것은 실제로 모범 사례는 아니지만 작동 할 것이라고 생각합니다. 당신의 mywidget.js 코드

예 :

document.getElementById('mywidget').innerHTML = "<a href=''>LinkOne</a> <a href=''>LinkTwo</a>"; 

Answer 3

나는 SCRIPT 태그에게 ID를 부여하고 그래서 그들은 단지 한 줄을 포함 할 필요가 만드는 DIV + 내용으로 스크립트 태그 자체를 대체 할 것이다 암호. 다음의 라인을 따라 뭔가 : 스크립트에서

<script id="my-script" src="http://example.com/my-script.js"></script> 

, 당신과 같이, 일거에 DIV의 SCRIPT 태그를 교체 할 수 있습니다 :

var scriptTag, myDiv; 
scriptTag = document.getElementById('my-script'); 
myDiv = document.createElement('DIV'); 
myDiv.innerHTML = '<p>Wow, cool!</p>'; 
scriptTag.parentNode.replaceChild(myDiv, scriptTag); 

Answer 4

당신은 필요하지 않습니다 필요을 초기 div는 링크 목록으로 채 웁니다.

스크립트가있는 곳에 document.write을 사용하여 div를 만듭니다. ... 그리고 스크립트에서

<script type="text/javascript" src="http://domain.com/badge.js"></script> 

:

var links = [ 
    '<a href="#">One</a>', 
    '<a href="#">Two</a>', 
    '<a href="#">Three</a>' 
]; 

document.write("<div>" + links.join(", ") + "</div>"); 

또 다른 이점은 페이지가 완전히로드 될 때까지 기다릴 필요가 없다는 것입니다.

Answer 5

다른 검색어를 사용했기 때문에 this answer on Stackexchange을 찾기까지 어느 정도 시간이 걸렸습니다.

How to build a web widget (using jQuery)

그것은 커버 :

• 는 위젯의 코드는하지 실수로 혼란을하지 확인 나는 링크가 이미 여기에 주어진 것보다 더 완전한 응답이 제안 있다고 생각 나머지 페이지는
• 외부 CSS 및 JavaScript 파일을 동적으로로드합니다.
• JSONP를 사용하는 브라우저의 단일 출처 정책을 무시합니다.