Как лучше сделать виджет?
Есть сайт, для которого требуется сделать возможность размещения, например, ленты новостей на других сайтах. При этом на других сайтах должна быть возможность оценивать эти новости (т.е. добавлять/убавлять баллы).
В голове два варианта:
1. Тупо сделать страницу, на которой выводить этот виджет. И давать сайтам партнерам html-код фрэйма (iframe), у которого в качестве адреса будет страница с новостями.
2. Сделать через script, как написано здесь http://forum.hivext.ru/podkljuchenie-servisov/javascript-krossdomenye-zaprosy-k-servisam/
1) Виджет при помощи JavaScript делается (глянь как на баше сделан, по тому же принципу сделан)
2) Генерируй нужным сайтам готовый PHP скрипт.... В котором будет уникальный SecretCode. На основе секретного кода скрипт будет подписывать свои запросы. На основе этого у тебя получится защищенный канал связи для
- получения новостей сайтом
- возможности оценивать новости через виджет с сайта
<script type="text/javascript">
var client_id="ID-123456";
var widget_width="300";
var widget_height="400";
(function() {
var widget = document.createElement('script'); widget.type = 'text/javascript';
widget.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.your-domain.com/script.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(widget, s);
})();
</script>
Далее делаете скрипт, который считывает client_id высоту, ширину, url страницы и AJAX-ом отправляет на ваше сервер для генерации виджета.
со стороны сервера принимаете параметры и на их основе генерите виджет. Например, в зависимости от ширины и высоты, можно менять количество выводимых новостей, размеры шрифтов и т.д.
Сгенерили.
Возвращаете данные клиенту, создаете div (или пусть он встраивается клиентом) и пихаете в него ответ сервера.
Технически может показаться сложным, но это не так...
your-domain.com/script.js
А не проще script.PHP ... который бы сгенерил ДжаваСкрипт сразу со всеми новостями? и в строке передать все параметры?
1 запросом будет меньше.
1 запросом будет меньше.
Дак вот в этом-то и дело. Т.е. проще всего в этом случае использовать наверное iframe. У iframe можно ведь задавать высоту и ширину + параметры отображения (например, цвет текста, цвет фона) можно передавать в параметрах url'а.
Есть ли подводные камни при использовании iframe для этой задачи?
Есть ли подводные камни при использовании iframe для этой задачи?
Есть.
1. Его содержимое не будет видно поисковикам (как и в случае с JS).
2. Нужно не забывать к ссылкам в этом фрейме добавлять target="_parent"
3. Задавать цвет фона и т.д. из родительского фрейма нельзя (насколько я знаю). Фрейм лишь отображает содержимое другой страницы. Если менять - то именно в ней, т.е. в станице вывода. Зависеть может от переданных в GET параметрах (при указании SRC фрейма).
я бы использовал iframe только в самых крйних случаях. рекоммендую еще раз посмотреть в сторону JS и DIV
Вот что Вам приелся этот iframe?
yourdomane.ru/news/fast/generate.php?font=12&color=c0c0c0&headerfont=FFFFFF&serverid=1265
при обращении по такому адресу ВАШ сервер сгенерирует уже нужный JavaScript с отображением всего всего всего того, что Вам нужно.
Я бы на свой сайт iframe блок ставить не стал бы. Не люблю я ифреймы, считаю что это прошлый век.
yourdomane.ru/news/fast/generate.php?font=12&color=c0c0c0&headerfont=FFFFFF&serverid=1265
при обращении по такому адресу ВАШ сервер сгенерирует уже нужный JavaScript с отображением всего всего всего того, что Вам нужно.
Я бы на свой сайт iframe блок ставить не стал бы. Не люблю я ифреймы, считаю что это прошлый век.
Тогда реализацию я вижу так:
(взяты простые примеры, не претендуют на красоту кода, но на стабильность)
script.js
[HTML]
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
var xmlhttp = getXmlHttp()
xmlhttp.open('GET', '/generator.php', true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.writeln(xmlhttp.responseText);
}
}
};
xmlhttp.send("cliendid="+clientid+"&color="+color+"&format="+format);
[/HTML]
Содержимое generator.php думаю понятно...
index.html
[HTML]
<script type="text/javascript">
var clientid="ID-123456";
var color="c0c0c0";
var format="4";
(function() {
var widget = document.createElement('script'); widget.type = 'text/javascript';
widget.src = 'http://www.your-domain.com/script.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(widget, s);
})();
</script>
[/HTML]
Ну, что-то в этом роде )
Да, относительно длинно, но, достаточно гибко + выводить можно потом в любом формате и вносить изменения одним махом на всех сайтах, где есть скрипт, не требуя от них никаких изменений.
Таки да... Хотя есть примеры кроссдоменного XHR...
Тогда вариант лайт:
[HTML]<script type="text/javascript" src="http://domain.com/script.php?cid=1234&style=5"></script>[/HTML]
а script.php генерирует вам следующее:
[HTML]
document.write("<style type=\"text/css\"> .div_style {param:value px; } </style> <div class=\"div_style\">Какой-то текст</div> ");
[/HTML]
Просто, кроссдоменно... Главное соблюдение кодировок и экранированные кавычки в теле document.write
Не совсем (хотя право ваше).
Описанный в предыдущем посте способ не требует танцев с бубнами, Ajax-запросов и чего-то сложного... Вам нужно стандартно подключить скрипт (который генерируется сервером), так что проблем с кроссдоменностью не возникнет абсолютно...