Question

我正在创建一个javascript小部件，所以第三方（网页设计师）可以在他们的网站上发布链接，它将在他们的网站上呈现小部件。目前，我只使用脚本链接标记来执行此操作：

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

然而，如果我的网站负载不足，这会产生减慢第三方网站渲染时间的副作用。因此，我希望第三方网站异步请求来自我的网站的窗口小部件链接，然后在窗口小部件链接完全加载时在其网站上呈现它。谷歌分析javascript片段似乎有一个很好的异步代码，可以做一个很好的异步请求模型，但我想知道我是否可以修改它，以便它将在第三方的网站上呈现内容。

使用下面的示例，我希望http://mysite.com/link/to/widget.js的内容在“message”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小部件，我会很感激任何建议。感谢您阅读本文。乔

Answer 1

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

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

Answer 2

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

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

异步javascript呈现小部件

2 个答案: