Question

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

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

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

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

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

Answer 1

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

IFRAMES

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

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

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

DOM注入

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

<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那样调整大小等问题。

<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直接打印到页面上。

<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稍微复杂一点，但这种方法最灵活。

发送数据

如果您想将某种数据发送回服务器，那么您可以使用脚本注入（由于相同的源策略，您不能使用AJAX，但脚本注入没有限制）。这包括将所有数据放入脚本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");';
?>

哪个会弥补

警告（“请求是21个字符”）;

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

Answer 2

我对Disqus或者Disqus没有做太多，但我确实知道如何制作这样的小部件。将使用JavaScript生成窗口小部件的实际显示部分。所以，假设你有一个id为commerce_store的div标签。您的JavaScript代码将在首次加载时（或当ajax请求更改页面时）搜索文档，并查找是否存在commerce_store div。找到这样的容器后，它将自动生成所有必需的HTML。如果您还不知道如何执行此操作，则可以谷歌“动态添加javascript中的元素”。我建议为您的小部件创建一个自定义JavaScript库。它不需要太疯狂。像这样：

window.onload = init(){
    widget.load();
}
var widget = function(){
    this.load = function(){
        //search for the commerce_store div
        //get some data from the sql database
        var dat = ajax('actions/getData.php',{type:'get',params:{page:123}});
        //display HTML for data
        for (var i in dat){
            this.addDatNode(dat[i]);
        }
    }
    this.addDatNode = function(stuff){
        //make a node
        var n = document.createElement('div');
        //style the node, and add content
        n.innerHTML = stuff;
        document.getElementById('commerce_store').appendNode(n);
    }
}

当然，您需要设置某种类型的AJAX框架来获取数据库信息和内容。但这不应该太难。

对于Disqus和Disqus，我相信评论表格和一切都只是HTML（通过JavaScript生成）。脚本的实际“插件”部分将是ASP，PHP，SQL等的后台框架。最简单的方法是，可能只是一些PHP和SQL代码。 SQL将用于将所有注释或销售信息存储到数据库中，PHP将用于操作数据。像这样：

function addSale(){ //MySQL code here };
function deleteSale(){ //MySQL code here };
function editSale(){ //MySQL code here };
//...

你的大PHP文件将拥有你的小部件需要做的所有操作（关于改变数据库。但是，即使使用这个大的PHP文件，你仍然需要用你的方式调用单个函数ajax框架。回顾示例JavaScript框架的actions/getData.php请求.Feaction，是指包含一堆PHP文件的文件夹，每个方法一个。例如，addSale.php：

include("../db_connect.php");
db_connect();
//make sure the user is logged in
include("../authenticate.php");
authenticate();
//Get any data that AJAX sent to us
var dat = $_GET['sale_num'];
//Run the method
include("../PHP_methods.php");
addSale(dat);

您希望PHP_methods和运行文件的单独文件的原因是因为您可能有多个PHP_methods文件。您可以使用三种方法API，一种用于显示内容，一种用于请求内容，另一种用于更改内容。一旦你开始越来越多地重复使用你的方法，最好将它们全部放在一个地方。重写一次，到处重写。

所以，真的，这就是你需要的小部件。当然，您可能希望有一个安装脚本来设置商业数据库和所有。但实际的小部件只是一个包含上述脚本文件的文件夹：

install.php ：设置数据库
JavaScript库：加载HTML内容和表单并执行ajax请求
CSS文件：用于样式化HTML内容和表单
db_connect ：用于连接数据库的通用php脚本
验证：用于检查用户是否已登录的php脚本;这可能会有所不同，具体取决于您是否拥有自己的用户系统，还是使用了gravitars / facebook / twitter /等。
PHP_methods ：一个包含您需要的所有数据库操作方法的大型php文件
actions文件夹：一堆调用必要PHP方法的个人php文件;用AJAX调用每个这些php文件

理论上，您所要做的就是将该文件夹复制到任何网站，然后运行install.php进行设置。您希望窗口小部件运行的任何页面，您只需包含.js文件，它将完成所有工作。

当然，这就是我如何设置它。我假设编程语言或设置细节的变化会有所不同。但是，对于大多数网站插件来说，基本思想都是类似的。

哦，还有一件事。如果您打算销售小部件，那么尝试通过重新分发来保护所有这些脚本将非常困难。您最好的选择是将PHP文件放在您自己的服务器上。客户端需要拥有自己的db_connect.php，它连接到自己的数据库和所有数据库。但是，实际的ajax请求需要引用远程服务器上的文件。请求需要使用某种类型的密码或其他内容发送有效db_connect的url。实际上，想到它，我认为它不可能做远程服务器文件共享。你必须多研究一下，“因为我当然不知道你是怎么做的。

Answer 3

我喜欢Azmisov的解决方案，但它有一些缺点。

网站可能不希望您的代码位于其服务器上。如果你从AJAX切换到加载脚本（例如jQuery的getJSON）会好得多。

所以我建议：

包含在Google上托管的jquery和从您的域到客户端站点的简短jquery代码。没什么。
使用跨域调用将脚本写入服务器（通过getJSON或getScript），以便直接获取所有内容，并且不必在客户端的服务器上进行任何操作。见here for examples，我不会在这里写得更好。使用jQuery可以很容易地向页面添加内容，这样我就不用在这里了:)只需一个命令。
通过提供两行<script src= ... ></script>

如何制作像Disqus或者这样的javascript

3 个答案:

IFRAMES

DOM注入

发送数据