javascript - 如何制作像 Disqus 或 IntenseDebate 这样的 javascript

Question

我想制作一个可以在任何网页上显示的应用程序，就像 Disqus 或 IntenseDebate 在文章和网页上的呈现方式一样。

它将显示一个迷你电子商务店面。

我不确定如何开始。这些“小部件”是否有任何示例代码、框架或设计模式？

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

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

Answer 1

基本上您有两种选择 - 使用 iframe 来包装您的内容或使用 DOM 注入(inject)样式。

内嵌框架

iframe 很简单 - 主机站点包含一个 iframe，其中 url 包含所有必要的参数。

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

但这是有代价的——考虑到内容，没有简单的方法来调整 iframe 的大小。您几乎已经确定了初始尺寸。您可以想出某种跨框架脚本来测量 iframe 内容的大小，并将其转发到主机站点，主机站点根据脚本中的数字调整 iframe 的大小。但这真的很 hacky。

DOM注入(inject)

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

<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>标签内含 HTML document.write调用和注入(inject)的 HTML 是原始页面的一部分 - 因此不会像 iframe 那样出现调整大小等问题。

<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 相比，这为脚本提供了很大的灵 active 。方法。您无需直接将 HTML 输出到页面，而是动态生成所需的 DOM 节点并将其附加到特定元素。

<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>

第一个脚本由数据组成，第二个脚本由绘图逻辑组成。

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);
}

虽然比document.write复杂一点, 这种方法是所有方法中最灵活的。

发送数据

如果您想将某种数据发送回您的服务器，那么您可以使用脚本注入(inject)(由于同源策略，您不能使用 AJAX，但脚本注入(inject)没有限制)。这包括将所有数据放入脚本 url(请记住，IE 的 URL 长度限制为 4kB)和服务器响应所需数据。

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=message to the server和 callback=alert用它做点什么，然后用

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

哪个会弥补

alert("请求是 21 个字符");

如果您更改 alert对于您自己的某种功能，您可以在网页和服务器之间传递消息。