UserVoice 等托管服务如何将其内容嵌入其他网站？答案

【问题标题】：How do hosted services like UserVoice embed their content on other web sites?UserVoice 等托管服务如何将其内容嵌入其他网站？
【发布时间】：2010-11-28 13:38:12
【问题描述】：

UserVoice 等托管服务如何将其内容嵌入其他网站？

我看到它是通过在您自己的页面上包含来自服务提供商的 JavaScript 文件，但是，我感兴趣的是创建此类服务的构建块。

例如，他们是否使用像 jQuery、mooTools 或prototypejs 这样的库，以及他们如何避免命名空间冲突？

还想知道是否有任何书籍、文章、博客文章讨论了 JavaScript 的这种特定用途（不是在寻找有关 JavaScript 的一般资源）。

提前致以问候和感谢，

艾略特

【问题讨论】：

许多也使用 iframe 技术

标签： widget javascript javascript-framework

【解决方案1】：

通常，您所描述的内容称为“Javascript 小部件”（UserVoice 恰好出现在页面的一侧）。

有一个关于creating Javascript Widgets 的好教程，您可以查看。

【讨论】：

【解决方案2】：

这种可嵌入服务的基本结构是：

如果服务不要求将脚本包含在页面底部，则挂钩正文 onload 事件，而无需踩到任何现有处理程序的脚趾（通过拦截现有处理程序函数，这可能在转而链接到其他函数）。
将新的 HTML 元素注入到文档中。 HTML 代码很可能作为字符串文字内联到脚本中，因为在单个注入元素上设置 innerHTML 比使用一系列函数调用直接 DOM 操作更容易和更快。
整个脚本应该存在于一个闭包中以避免名称冲突。
可以使用也可以不使用 JS 框架；包含框架时需要谨慎，因为它可能与现有的不同框架或同一框架的不同版本发生冲突。

【讨论】：

【解决方案3】：

EDT：通常您会让您的客户/客户/朋友在他们的页面中包含一个脚本，然后通过该脚本您可以执行以下操作：

在纯 JS 中，您可以通过

从远程位置（或不那么远程）动态加载脚本

   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'your/remote/scripts/path.js';
   document.getElementsByTagName('body')[0].appendChild(script);

// $.getScript('your/remote/scripts/path.js');在 jquery 中，但您会确定 jQuery 已加载到远程站点上

然后您加载的脚本可以执行不同的操作，例如创建这样的元素

var body = document.getElementsByTagName('body')[0]; var aDiv = document.createElement('script'); /* 在这里你可以修改你的 div 属性并查看 */ body.appendChild(aDiv); // $('').appendTo('body');对于 jQuery

如需深入了解 JavaScript，您可以阅读 Javascript: The Good Parts 或 Definitive Guide To Javascript。

【讨论】：

【解决方案4】：

这是我在How to build a web widget (using jQuery)找到的一个很棒的教程

【讨论】：