如何制作像Disqus或者这样的javascript [英] How to make a javascript like Disqus or IntenseDebate

问题描述

我想创建一个可以显示在任何网页上的应用，就像Disqus或者Disqus在文章中展示的那样。网页。

I want to make an app that can display on any webpage, just like how Disqus or IntenseDebate render on articles & web pages.

它将显示一个小型电子商务商店。

我不知道如何开始。
这些小部件是否有任何示例代码，框架或设计模式？

I'm not sure how to get started. Is there any sample code, framework, or design pattern for these "widgets"?

例如，我想展示产品。
我应该首先创建列出所有这些内容的Web服务或RSS吗？
或者这些Ajax脚本中的一个可以简单地消化XHTML网页并显示它吗？

For example, I'd like to display products. Should I first create a webservice or RSS that lists all of them? Or can one of these Ajax Scripts simply digest an XHTML webpage and display that?

感谢任何提示，我真的很感激。

thanks for any tips, I really appreciate it.

推荐答案

基本上你有两个选择 - 使用iframe来包装你的内容或使用DOM注入风格。

Basically you have two options - to use iframes to wrap your content or to use DOM injection style.

iframe很容易 - 主机网站包含一个iframe，其中url包含所有nessessary参数。

Iframes are the easy ones - the host site includes an iframe where the url includes all the nessessary params.

<p>Check out this cool webstore:</p>
<iframe src="http://yourdomain.com/store?site_id=123"></iframe>

但这带来了成本 - 考虑到内容，没有简单的方法来调整iframe的大小。你已经修复了初始尺寸。您可以提供某种跨框架脚本来测量iframe内容的大小，并将其转发到主机站点，该站点根据脚本中的数字调整iframe的大小。但这真是太烂了。

But this comes with a cost - there's no easy way to resize the iframe considering the content. You're pretty much fixed with initial dimensions. You can come up with some kind of cross frame script that measures the size of the iframe contents and forwards it to the host site that resizes the iframe based on the numbers from the script. But this is really hacky.

第二种方法是直接注入你自己的HTML主页。主机站点从您的服务器加载< script> 标记，该脚本包含将HTML添加到页面的所有信息。有两种方法 - 第一种是在服务器中生成所有HTML并使用 document.write 来注入它。

Second approach is to "inject" your own HTML directly to the host page. Host site loads a <script> tag from your server and the script includes all the information to add HTML to the page. There's two approaches - first one is to generate all the HTML in your server and use document.write to inject it.

<p>Check out this cool webstore:</p>
<script src="http://yourdomain.com/store?site_id=123"></script>

脚本来源类似于

document.write('<h1>Amazing products</h1>');
document.write('<ul>');
document.write('<li><a href="http://yourdomain.com/?id=1">green car</a></li>');
document.write('<li><a href="http://yourdomain.com/?id=2">blue van</a></li>');
document.write('</ul>');

这将取代原来的< script> 在 document.write 调用中使用HTML标记并且注入的HTML是原始页面的一部分 - 所以没有像iframe那样调整大小等问题。

This replaces the original <script> tag with the HTML inside document.write calls and the injected HTML comes part of the original page - so no resizing etc problems like with iframes.

<p>Check out this cool webstore:</p>
<h1>Amazing products</h1>
<ul>
<li><a href="http://yourdomain.com/?id=1">green car</a></li>
<li><a href="http://yourdomain.com/?id=2">blue van</a></li>
</ul>

同样的事情的另一种方法是从HTML中分离数据。包含的脚本由两部分组成 - 绘图逻辑和序列化形式的数据（即JSON）。与硬件 document.write 方法相比，这为脚本提供了很大的灵活性。您可以动态生成所需的DOM节点并将其附加到特定元素，而不是直接将HTML直接打印到页面。

Another approach for the same thing would be separating to data from the HTML. Included script would consist of two parts - the drawing logic and the data in serialized form (ie. JSON). This gives a lot of flexibility for the script compared to the kind of stiffy document.write approach. Instead of outpurring HTML directly to the page, you generate the needed DOM nodes on the fly and attach it to a specific element.

<p>Check out this cool webstore:</p>
<div id="store"></div>
<script src="http://yourdomain.com/store_data?site_id=123"></script>
<script src="http://yourdomain.com/generate_store"></script>

第一个脚本包含数据，第二个脚本包含绘图逻辑。

The first script consists of the data and the second one the drawing logic.

var store_data = [
    {title: "green car", id:1},
    {title: "blue van", id:2}
];

脚本将是这样的

var store_elm = document.getElementById("store");
for(var i=0; i< store_data.length; i++){
    var link = document.createElement("a");
    link.href = "http://yourdomain.com/?id=" + store_elmi[i].id;
    link.innerHTML = store_elmi[i].title;
    store_elm.appendChild(link);
}

虽然比 doc.write <更复杂一点/ code>，这种方法是最灵活的。

Though a bit more complicated than document.write, this approach is the most flexible of them all.

如果你想将某种数据发送回服务器然后你可以使用脚本注入（你不能使用AJAX，因为相同的源策略，但脚本注入没有限制）。这包括将所有数据放入脚本URL（请记住，IE的URL长度限制为4kB）和服务器响应所需数据。

If you want to send some kind of data back to your server then you can use script injection (you can't use AJAX since the same origin policy but there's no restrictions on script injection). This consists of putting all the data to the script url (remember, IE has the limit of 4kB for the URL length) and server responding with needed data.

var message = "message to the server";
var header = document.getElementsByTagName('head')[0];
var script_tag = document.createElement("script");
var url = "http://yourserver.com/msg";

script_tag.src = url+"?msg="+encodeURIComponent(message)+"&callback=alert";
header.appendChild(script_tag);

现在您的服务器获取带有GET参数的请求 msg =给服务器的消息和 callback = alert 使用它做一些事情，然后回复

Now your server gets the request with GET params msg=message to the server and callback=alert does something with it, and responds with

<?
    $l = strlen($_GET["msg"]);
    echo $_GET["callback"].'("request was $l chars");';
?>

这将构成

alert（ 请求是21个字符）;

alert("request was 21 chars");

如果您为某种类型的自己的功能更改警告那么您可以在网页和服务器之间传递消息。

If you change the alert for some kind of your own function then you can pass messages around between the webpage and the server.

这篇关于如何制作像Disqus或者这样的javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！