问题描述

我想制作一个可以在任何网页上显示的应用，就像 Disqus 或 IntenseDebate 在文章和网页.

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 包含所有必要参数.

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 的大小.但这真的很hacky.

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

这会用 document.write 调用中的 HTML 替换原始 <script> 标记，并且注入的 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 方法相比，这为脚本提供了很大的灵活性.您无需将 HTML 直接添加到页面，而是动态生成所需的 DOM 节点并将其附加到特定元素.

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

虽然比 document.write 稍微复杂一些，但这种方法是最灵活的.

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=message to the server 获取请求，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("request is 21 chars");

alert("request was 21 chars");

如果您将 alert 更改为您自己的某种功能，那么您可以在网页和服务器之间传递消息.

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 或 IntenseDebate 这样的 javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！