blocks|key|92374|text|这是我在How+to+build+a+web+widget+(using+jQuery)上找到的一个很棒的教程|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|92375|entityMap|0|LINK|mutability|MUTABLE|url|http://alexmarandon.com/articles/web_widget_jquery/^0|4|14|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Here is a great tutorial I found on <a href="http://alexmarandon.com/articles/web_widget_jquery/" rel="nofollow">How to build a web widget (using jQuery)</a>

blocks|key|92257|text|通常，您所描述的内容被称为"Javascript+Widget“(UserVoice恰好出现在页面的一侧)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|92258|有一个关于creating+Javascript+Widgets的很好的教程，你可以去看看。|offset|length|92259|entityMap|0|LINK|mutability|MUTABLE|url|http://www.neeraj.name/blog/articles/846-how-to-create-a-dynamic-javascript-widget^0|0|5|R|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Generally, what you are describing is called a "Javascript Widget" (UserVoice's just happens to show up on the side of the page). 

There is a good tutorial about <a href="http://www.neeraj.name/blog/articles/846-how-to-create-a-dynamic-javascript-widget" rel="nofollow noreferrer">creating Javascript Widgets</a> that you can check out.

blocks|key|1497375|text|这种可嵌入服务的基本结构是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1497376|HTML如果服务不要求将脚本包含在页面底部，则挂钩body+onload事件，而不涉及任何现有处理程序的脚趾(通过拦截现有处理程序函数，该函数可以链接到文档中的其他functions).|1497377|Inject新|unordered-list-item|1497378|元素。|ordered-list-item|1497379|整个脚本应该放在一个闭包中，以避免名称冲突。|1497380|可以使用JS框架，也可以不使用JS框架；在包含框架时需要注意，因为它可能与预先存在的不同框架或同一框架的不同版本发生冲突。|1497381|1497382|1497383|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|V|8|@]|9|@]|A|$]]|$1|L|3|M|5|I|7|W|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

The basic structure of such an embeddable service would be:

<ol>
<li>If the service doesn't mandate that the script is to be included at the bottom of the page, hook the body onload event, without stepping on the toes of any existing handlers (by intercepting the existing handler function, which could in turn be chained to other functions).</li>
<li>Inject new HTML elements into the document. The HTML code would most likely be inlined into the script as string literals as setting innerHTML on a single injected element would be easier and faster than direct DOM manipulation using a flurry of function calls.</li>
<li>The entire script should live inside a closure to avoid name clashes.</li>
<li>A JS framework may or may not be used; caution is required when including a framework since it could clash with a pre-existing, different framework, or a different version of the same framework.</li>
</ol>

blocks|key|1497437|text|EDT:通常，您会让您的客户/客户/朋友在他们的页面中包含一个脚本，然后通过该脚本，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1497438|在纯JS中，您可以通过以下方式动态地从远程位置(或不是那么远程)加载脚本|1497439|+++var+script+=+document.createElement('script');
+++script.type+=+'text/javascript';
+++script.src+=+'your/remote/scripts/path.js';
+++document.getElementsByTagName('body')[0].appendChild(script);|code-block|syntax|javascript|1497440|//+$.getScript('your/+remote+/scripts/path.js')；在jquery中，但您将确保jQuery已加载到远程站点|1497441|然后，您加载的脚本可以执行不同的操作，比如像这样创建元素|1497442|var+body+=+document.getElementsByTagName('body')；var+aDiv+=+document.createElement('script')；/*在这里您可以修改您的div属性并查看*/+body.appendChild(aDiv)；//+$('').appendTo('body')；对于jQuery|1497443|要更深入地了解JavaScript，可以阅读例如Javascript:+The+Good+Parts或Definitive+Guide+To+Javascript。|offset|length|1497444|entityMap|0|LINK|mutability|MUTABLE|url|http://oreilly.com/catalog/9780596517748/|1|http://oreilly.com/catalog/9780596000486^0|0|0|0|0|0|0|O|Q|0|1F|U|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$Q|19|R|1A|1|1B]|$Q|1C|R|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

EDT: Generally you'll make your client/customer/friend include a script in their page, then via that script you can do following:

In pure JS you can load scripts from remote location (or not so remote) dynamically via 

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

// $.getScript('your/remote/scripts/path.js'); in jquery but you'll be sure jQuery loaded on remote site

Then script you loaded can perform different actions like creating elements like this

var body = document.getElementsByTagName('body')[0];
var aDiv = document.createElement('script');
/* here you can modify your divs properties and look */
body.appendChild(aDiv);
// $('').appendTo('body'); for jQuery

For deeper look into JavaScript you can read for example <a href="http://oreilly.com/catalog/9780596517748/" rel="nofollow noreferrer">Javascript: The Good Parts</a> or <a href="http://oreilly.com/catalog/9780596000486" rel="nofollow noreferrer">Definitive Guide To Javascript</a>.

How do hosted services like UserVoice embed their content on other web sites?

I see that it is via including a JavaScript file from the service provider on your own page, however, what I'm interested in are the building blocks for creating a service like that.

For example, do they use a library like jQuery, mooTools, or prototypejs and how do they avoid namespace clashes?

Also wondered if there were any books, articles, blog posts that go over this specific use of JavaScript (not looking for general resources on JavaScript).

Regards and thanks in advance,

Eliot

How do hosted services like UserVoice embed their content on other web sites?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

像UserVoice这样的托管服务如何将其内容嵌入到其他网站上？我看到它是通过在您自己的页面上包含来自服务提供商的JavaScript文件来实现的，然而，我感兴趣的是创建这样一个服务的构建块。例如，它们是否使用像jQuery、mooTools或prototypejs这样的库，以及它们如何避免名称空间冲突？我还想知道是否有任何书籍、文章或博客文章介绍了JavaScript的这一特定用法(不是在Jav

问像UserVoice这样的托管服务如何将其内容嵌入到其他网站上？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问像UserVoice这样的托管服务如何将其内容嵌入到其他网站上？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问像UserVoice这样的托管服务如何将其内容嵌入到其他网站上？
EN