Как сделать JavaScript как Disqus или IntenseDebate

Question

Я хочу создать приложение, которое будет отображаться на любой веб-странице, точно так же, как Disqus или IntenseDebate визуализируют на статьях и веб-страницах.

В нем будет отображаться мини-магазин электронной торговли.*

Я не знаю, с чего начать.Есть ли какой-нибудь пример кода, каркаса или шаблона дизайна для этих «виджетов»?

Например, я хотел бы отобразить продукты.Должен ли я сначала создать веб-сервис или RSS, который перечисляет все из них?Или может один из этих сценариев Ajax просто переварить веб-страницу XHTML и отобразить ее?

спасибо за любые советы, я действительно ценю это.

Answer 1

По сути, у вас есть два варианта - использовать iframes для переноса вашего контента или использовать стиль внедрения DOM.

* 1003 фреймы * Ифреймы самые простые - на хост-сайте есть фрейм, в котором URL-адрес содержит все необходимые параметры. <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> на HTML внутри вызовов document.write, и внедренный HTML становится частью исходной страницы, поэтому никаких проблем с изменением размера и т. Д., Как с 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-узлы на лету и присоединяете его к определенному элементу.

<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 имеет ограничение в 4 КБ для длины URL-адреса) и ответа сервера необходимыми данными.

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 для какой-либо собственной функции, вы сможете передавать сообщения между веб-страницей и сервером.

Answer 2

Я не так много сделал ни с Disqus, ни с IntenseDebate, но знаю, как бы я подошел к созданию такого виджета.Фактическая отображающая часть виджета будет сгенерирована с помощью JavaScript.Итак, скажем, у вас есть тег div с идентификатором commerce_store.Ваш код JavaScript будет выполнять поиск документа, когда он будет впервые загружен (или когда запрос ajax изменяет страницу), и обнаружит, существует ли commerce_store div.Найдя такой контейнер, он автоматически сгенерирует весь необходимый HTML.Если вы еще не знаете, как это сделать, вы можете Google «динамически добавлять элементы в 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 и IntenseDebate я считаю, что формы комментариев и все это всего лишь 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. Посмотрите на запрос actions/getData.php примера платформы JavaScript. Действия - это папка с набором файлов 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 метода, один для отображения контента, одиндля запроса контента и один для изменения контента. Как только вы начинаете многократно использовать ваши методы, лучше всего, чтобы они были все в одном месте. Переписаны один раз, переписаны везде.

Так что, на самом деле, это все, что вы "Мне нужен виджет. Конечно, вы хотели бы иметь скрипт установки, который устанавливает Cбаза данных ommerce и все.Но фактическим виджетом будет просто папка с вышеупомянутыми файлами сценариев:

1. install.php : получает настроенную базу данных
2. библиотека JavaScript: для загрузки содержимого и форм HTML и выполнения запросов ajax
3. CSS-файл : для оформления содержимого и форм HTML
4. db_connect : универсальный php-скрипт, используемый для подключения к базе данных
5. authenticate : php-скрипт для проверки входа пользователя в систему;это может варьироваться в зависимости от того, используете ли вы свою собственную пользовательскую систему или используете гравитары / facebook / twitter / и т. д.
6. PHP_methods : большой php-файл со всеми используемыми вами методами манипулирования базой данных.
7. папка действий : набор отдельных файлов php, которые вызывают необходимые методы PHP;вызовите каждый из этих файлов php с помощью AJAX

Теоретически, все, что вам нужно сделать, это скопировать эту папку на любой веб-сайт и запустить install.php, чтобы настроить его.На любой странице, на которой вы хотите запускать виджет, вы просто включаете файл .js, и он будет выполнять всю работу.

Конечно, я просто настроил бы его.Я предполагаю, что изменения в языках программирования или специфика настройки будут отличаться.Но основная идея похожа на большинство плагинов для сайтов.

О, и еще одна вещь.Если вы намеревались продать виджет, было бы крайне сложно попытаться защитить все эти сценарии от перераспределения.Лучше всего иметь файлы PHP на вашем собственном сервере.У клиента должен быть свой собственный db_connect.php, который подключается к своей собственной базе данных и всем остальным.Но фактические запросы ajax должны ссылаться на файлы на вашем удаленном сервере.Запрос должен отправить URL-адрес действительного db_connect, с каким-то типом пароля или чем-то еще.На самом деле, если подумать, я не думаю, что это возможно сделать общий доступ к файлам на сервере.Тебе придется исследовать это немного больше, потому что я точно не знаю, как ты это сделаешь.

Answer 3

Мне нравится решение Азмисова, но у него есть некоторые недостатки.

Сайты могут не захотеть, чтобы ваш код был на их серверах.Было бы намного лучше, если бы вы переключились с AJAX на загрузку скриптов (например, getQSON jQuery)

Поэтому я предлагаю:

1. Включить jquery, размещенный в Google, и короткий код jqueryс вашего домена на клиентские сайты.Ничего более.
2. Напишите сценарий с междоменными вызовами на ваш сервер (через getJSON или getScript), чтобы все извлекалось напрямую, и на клиентском сервере не нужно было ничего вставлять.См. здесь для примеров , я бы не написал здесь ничего лучше.Добавление контента на страницу достаточно просто с jQuery, чтобы я не упомянул об этом здесь :) Всего одна команда.
3. Легко распространяйте, предоставляя две строки <script src= ... ></script>