Question

我想创建一个显示链接列表的javascript徽章。我们在我们的域名上托管javascript。其他网站可以在他们的页面上放置一个空的div标签，在底部可以引用我们的javascript来呈现div标签中的内容。你是如何实现这样的？

Answer 1

我会给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 2

就像你说的那样，让他们在他们的页面底部放置一个div：

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

然后将它们链接到您的javascript：

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

然后让他们改变他们的身体标签，或者onload来调用你的剧本

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

Answer 3

您无需使用初始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 4

喜欢@Owen说，除了为什么不制作你的javascript以便

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

完成填充<div id="mywidget"></div>的工作，因此如果在html源代码中的mywidget div之后包含脚本标记，则无需从DOM加载调用loadYourWidget（）。这不是一个真正的最佳实践，但我认为它会起作用。

mywidget.js代码示例：

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

Answer 5

我花了一些时间才找到this answer on Stackexchange，因为我使用了不同的搜索字词。我相信链接表明有一个比这里已经给出的答案更完整的答案：

How to build a web widget (using jQuery)

它包括：

确保小部件的代码不会意外地弄乱页面的其余部分，

动态加载外部CSS和JavaScript文件，

使用JSONP绕过浏览器的单一来源政策。

如何创建JavaScript徽章或小部件？

5 个答案: