异步 javascript 渲染小部件答案

【问题标题】：Asyncronus javascript rendering widgets异步 javascript 渲染小部件
【发布时间】：2010-06-16 21:56:49
【问题描述】：

我正在创建一个 javascript 小部件，以便第三方（网页设计师）可以在他们的网站上发布一个链接，它会在他们的网站上呈现该小部件。目前，我只用一个脚本链接标签来做这个：

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

但是，如果我的网站处于负载状态，这会降低第三方网站的页面呈现时间。因此，我希望第三方网站从我的网站异步请求小部件链接，然后在小部件链接完全加载时将其呈现在他们的网站上。 Google Analytics javascript sn-p 似乎有一些很好的异步代码，可以执行很好的异步请求来建模，但我想知道我是否可以修改它，以便它在第三方网站上呈现内容。

使用下面的示例，我希望http://mysite.com/link/to/widget.js 的内容在“消息”id 字段中呈现一些内容。

<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>

我不知道我正在尝试做的事情是否构成跨站点脚本（在这个概念上仍然有点模糊），但我想知道我正在尝试做的事情是否可行。或者，如果有人有任何其他有效创建 javascript 小部件的方法，我将不胜感激。感谢您阅读本文。乔

【问题讨论】：

标签： javascript asynchronous

【解决方案1】：

比较所有不同方法的好文章：-

http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

【讨论】：

【解决方案2】：

很抱歉，跨域 xhr 被所有浏览器阻止。 google analytics google.load() 函数实际上将脚本标签添加到 head 元素，而不是使用 xhr。而“async”属性是 HTML5 的一部分，仅在 Firefox 3.6 中实现。

您可以使用事件侦听器在加载文档时动态加载脚本，并将小部件添加到预定元素（即带有 id）。

【讨论】：

感谢您澄清 digitalFresh。我将研究事件侦听器方法。