Question

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

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

例如，他们使用像jQuery，mooTools或prototypejs这样的库吗？它们如何避免命名空间冲突？

还想知道是否有任何书籍，文章，博客文章都是针对JavaScript的特定用途（而不是寻找关于JavaScript的一般资源）。

提前致意并表示感谢，

埃利奥特

Answer 1

这是我在How to build a web widget (using jQuery)

上找到的一个很棒的教程

Answer 2

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

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

Answer 3

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

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

Answer 4

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。

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

4 个答案: