example - ¿Cómo puedo crear una insignia o widget de JavaScript?

esri javascript developers

Question

Quiero crear una insignia de JavaScript que muestre una lista de enlaces. Alojamos el javascript en nuestro dominio. Otros sitios pueden poner una etiqueta div vacía en su página y en la parte inferior una referencia a nuestro javascript que mostraría el contenido en la etiqueta div. ¿Cómo implementar algo como esto?

Answer 1

Como dijo @Owen, excepto por qué no creaste tu javascript para que

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

hace el trabajo de completar <div id="mywidget"></div> por sí mismo, negando así la necesidad de que invoquen loadYourWidget () desde su carga DOM si incluye la etiqueta script justo después del div de mywidget en html fuente. Esta no es realmente una mejor práctica, pero creo que funcionará.

Ejemplo para tu código mywidget.js:

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

Answer 2

Le daría una identificación a la etiqueta SCRIPT y reemplazaría la etiqueta de script con los contenidos DIV +, de modo que solo tengan que incluir una línea de código. Algo parecido a lo siguiente:

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

En su secuencia de comandos, puede cambiar la etiqueta SCRIPT para su DIV de una sola vez, así:

var scriptTag, myDiv;
scriptTag = document.getElementById(''my-script'');
myDiv = document.createElement(''DIV'');
myDiv.innerHTML = ''<p>Wow, cool!</p>'';
scriptTag.parentNode.replaceChild(myDiv, scriptTag);

Answer 3

No necesitas un div inicial para completar tu lista de enlaces.

Simplemente cree el div usando document.write en el lugar donde se coloca el script.

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

... y en tu guión:

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

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

Otro beneficio es que no tiene que esperar que la página se cargue por completo.

Answer 4

tal como dices, pídeles que pongan un div en la parte inferior de su página:

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

luego haz que se vinculen a tu javascript:

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

luego pídales que modifiquen su etiqueta corporal, o onload para llamar a su script

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

Answer 5

Me tomó algo de tiempo encontrar esta respuesta en Stackexchange porque estaba usando diferentes términos de búsqueda. Creo que el enlace sugirió que hay una respuesta más completa que las ya dadas aquí:

Cómo construir un widget web (usando jQuery)

Cubre:

• asegúrese de que el código del widget no se meta accidentalmente con el resto de la página,
• cargue dinámicamente archivos CSS y JavaScript externos,
• eludir la política de origen único de los navegadores utilizando JSONP.