How can I create a javascript icon or widget?

Question

I want to create a javascript icon that displays a list of links. We host javascript in our domain. Other sites can put an empty div tag on their page, and at the bottom there is a link to our javascript, which will display the content in the div tag. How do you implement something like this?

Answer 1

I would give the SCRIPT tag an identifier and replace the SCRIPT tag itself with the contents of DIV +, so it should only include one line of code. Something like the following:

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

In your script, you can change the SCRIPT tag for your DIV in one fell swoop, for example:

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

as you say, let them put a div at the bottom of the page:

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

then you have a link to your javascript:

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

, script

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

Answer 3

div .

div, document.write script.

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

... 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> , loadYourWidget() DOM, script div mywidget html. , , .

mywidget.js:

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

Answer 5

It took me a while to find this answer on Stackexchange , because I used different search terms. I believe that the link offered a more complete answer than those already given here:

How to create a web widget (using jQuery)

It covers:

• make sure the widget code is not accidentally confused with the rest of the page,
• dynamically load external CSS and JavaScript files,
• single-origin policy browser bypass using JSONP.