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

时间:2008-10-29 20:46:44

标签: javascript

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

5 个答案:

答案 0 :(得分:5)

我会给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);

答案 1 :(得分:1)

就像你说的那样,让他们在他们的页面底部放置一个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>

答案 2 :(得分:1)

您无需使用初始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>");

另一个好处是您不必等待页面完全加载。

答案 3 :(得分:0)

喜欢@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>";

答案 4 :(得分:0)

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

How to build a web widget (using jQuery)

它包括:

  
      
  • 确保小部件的代码不会意外地弄乱页面的其余部分,
  •   
  • 动态加载外部CSS和JavaScript文件,
  •   
  • 使用JSONP绕过浏览器的单一来源政策。
  •