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

I want to create a javascript badge that displays a list of links. We host the javascript on our domain. Other sites can put an empty div tag on their page and at the bottom a reference to our javascript that would render the content in the div tag. How do you implement something like this?

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

5 个解决方案

#1

I would give the SCRIPT tag an ID and replace the script tag itself with the DIV + contents, making it so they only have to include one line of code. Something along the lines of the following:

我会给SCRIPT标签一个ID,并用DIV +内容替换脚本标签本身,这样它们只需要包含一行代码。以下内容:

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

In your script, you can swap out the SCRIPT tag for your DIV in one fell swoop, like so:

在您的脚本中,您可以一次性替换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);

#2

just as you say, have them put a div at the bottom of their page:

正如你所说,让他们在他们的页面底部放置一个div:

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

then have them link to your javascript:

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

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

then have them alter their body tag, or onload to call your script

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

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

#3

You do not necessary need an initial div to fill with you link list.

您没有必要使用初始div来填充链接列表。

Simply create the div using document.write at the place where the script is placed.

只需在放置脚本的位置使用document.write创建div。

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

... and in your script:

......并在你的脚本中:

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

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

Another benefit is that you do not have to wait for the page to be fully loaded.

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

#4

Like @Owen said, except why not craft your javascript so that

就像@Owen说的那样,除了为什么不制作你的javascript这样

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

does the work of populating <div id="mywidget"></div> on its own, thus negating the need for them to call loadYourWidget() from their DOM load if you include the script tag right after the mywidget div in the html source. This isn't really a best practice, but I think it'll work.

自己填充

的工作,如果在html中的mywidget div之后包含脚本标记,则无需从DOM加载调用loadYourWidget()资源。这不是一个真正的最佳实践,但我认为它会起作用。

Example for your mywidget.js code:

mywidget.js代码示例:

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

#5

It took me some time to find this answer on Stackexchange because I was using different search terms. I believe that the link suggested there is a more complete answer than the ones already given here:

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

How to build a web widget (using jQuery)

如何构建Web小部件(使用jQuery)

It covers:

ensure the widget’s code doesn’t accidentally mess up with the rest of the page,

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

dynamically load external CSS and JavaScript files,

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

bypass browsers’ single-origin policy using JSONP.

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

#1