Как я могу создать значок или виджет JavaScript?

Question

Я хочу создать значок javascript, который отображает список ссылок. Мы размещаем JavaScript в нашем домене. Другие сайты могут разместить пустой тег div на своей странице и внизу ссылку на наш javascript, который будет отображать содержимое в теге div. Как вы реализуете что-то подобное?

Answer 1

Я бы присвоил тэгу SCRIPT идентификатор и заменил сам тэг сценария содержимым DIV +, сделав так, чтобы они включали только одну строку кода. Что-то вроде следующего:

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

В вашем скрипте вы можете поменять тег SCRIPT для вашего DIV одним махом, вот так:

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

Answer 2

Вам не нужен начальный div, чтобы заполнить ваш список ссылок.

Просто создайте div, используя document.write в том месте, где находится скрипт.

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

Как вы говорите, пусть они поместят div в нижней части своей страницы:

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

тогда сделайте так, чтобы они связались с вашим javascript:

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

затем попросите их изменить тег body или onload для вызова вашего скрипта

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

Answer 4

Мне потребовалось некоторое время, чтобы найти этот ответ в Stackexchange , потому что я использовал разные условия поиска. Я полагаю, что ссылка предполагает, что есть более полный ответ, чем приведенные здесь:

Как создать веб-виджет (используя jQuery)

Это охватывает:

• гарантирует, что код виджета случайно не испортит остальную часть страницы,
• динамически загружать внешние файлы CSS и JavaScript,
• обход политики единого источника браузеров с использованием JSONP.

Answer 5

Как сказал @Owen, но почему бы не создать свой javascript, чтобы

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

выполняет заполнение <div id="mywidget"></div> самостоятельно, что исключает необходимость для них вызывать loadYourWidget () из своей загрузки DOM, если вы включаете тег script сразу после div mywidget в исходный код html. Это на самом деле не лучшая практика, но я думаю, что это сработает.

Пример для вашего кода mywidget.js:

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