2010-06-16 6 views
1

Je crée un widget javascript afin que les tiers (web designers) puissent poster un lien sur leur site web et qu'il affiche le widget sur leur site. À l'heure actuelle, je fais cela avec juste une balise de lien de script:Asyncronus javascript render widgets

<div class="some_random_div_in_html_body"> 
<script type='text/javascript' src='http://remotehost.com/link/to/widget.js'></script> 
</div> 

Cependant, cela a l'effet secondaire de ralentir le site Web d'une partie thrid les temps de rendu de la page si mon site est sous une charge. Par conséquent, je voudrais que le site Web tiers demande le lien de mon site de manière asynchrone, puis le restitue sur leur site lorsque le lien du widget se charge complètement. L'extrait javascript de Google Analytics semble avoir un bon code asynchrone qui fait une belle demande asynchrone pour modéliser, mais je me demande si je peux le modifier pour qu'il affiche du contenu sur le site de la tierce partie. En utilisant l'exemple ci-dessous, je souhaite que le contenu de http://mysite.com/link/to/widget.js affiche quelque chose dans le champ "message".

<HTML> 
<HEAD><TITLE>Third Party Site</TITLE><STYLE>#message { background-color: #eee; } </STYLE></HEAD> 
<BODY> 
<div id="message">asdf</div> 
<script type="text/javascript"> 
    (function() { 
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = 'http://mysite.com/link/to/widget.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s); 
})(); 
</script> 
</BODY> 
</HTML> 

Je ne sais pas si ce que je suis en train de faire constitue Cross Site Scripting (encore un peu vague sur ce concept), mais me demande si ce que je suis en train de faire est possible. Ou si quelqu'un a d'autres approches pour créer des widgets javascript efficacement, j'apprécierais tout conseil. Merci d'avoir lu ceci. Joe

Répondre

1

Désolé de dire que le crossdomain xhr est bloqué par tous les navigateurs. La fonction google.load() google analytics ajoute en fait des balises de script à l'élément head, n'utilise pas xhr. Et l'attribut "async" fait partie de HTML5 et n'est implémenté que dans Firefox 3.6.

Vous pouvez utiliser un écouteur d'événement pour charger dynamiquement le script lorsque le document est chargé et ajouter le widget à un élément prédéterminé (par exemple avec un ID).

+0

Merci de préciser que digitalFresh. Je vais regarder dans l'approche de l'écouteur d'événements. –