我想创建一个显示链接列表的javascript徽章。我们在我们的域名上托管javascript。其他网站可以在他们的页面上放置一个空的div标签,在底部可以引用我们的javascript来呈现div标签中的内容。你是如何实现这样的?
答案 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绕过浏览器的单一来源政策。