Настраиваем импорт удаленного кода на сайте uCoz
При создании сайта часто возникает ситуация, когда нужно вывести на сайте некую важную информацию, но получить ее в нужном виде не получается.
Например - вам необходимо вывести курсы валют какого-либо определенного банка, но на сайте банка нет экспорта подобной информации, она просто выводится для посетителей. Или вы хотите выводить на своем сайте последние актуальные цены на бензин в Украине - но не знаете, где их взять. В значительной части подобных случаев проблему можно решить при помощи информеров, которые предоставляют различные ресурсы. Но, часто случается так, что информер, хоть и несет необходимую вам информацию, но не подходит под дизайн вашего сайта, или содержит рекламу ресурса, который его распространяет, или еще чем-то вас не устраивает. В этом случае приходится искать другие выходы, и об одном из них пойдет сегодня речь.

Итак, допустим, нужно вывести на сайте информацию о последних актуальных ценах на бензин по одному из регионов Украины. Поиск подходящих информеров, к сожалению, успеха не имел (а может, просто искали плохо ;) ), и потому было решено делать информер самостоятельно. Для этого нам понадобятся три вещи - сайт-источник информации, импорт удаленного кода и jQuery. При помощи этой нехитрой комбинации, фактически, можно извлечь любую нужную информацию с любого источника.

Наиболее подходящим для экспорта информации ресурсом стал портал http://biz.liga.net
На этом портале информация о ценах на бензин представлена в подходящем виде (таблицей), и кроме того присутствует разделение по ценам на регионы, что в будущем поможет нам доработать информер таким образом, чтобы можно было посмотреть цены на бензин в любом регионе Украины. Для начала нам надо каким-то образом извлечь информацию с этого сайта. Так как это нельзя сделать при помощи JavaScript, а серверных языков программирования в нашем распоряжении нет, воспользуемся замечательной возможностью, предоставляемой uCoz, а именно импортом удаленного кода. Фактически, эта возможность позволяет загрузить любую страницу со стороннего сайта, и потом воспользоватся ею так как будет нужно. Именно так мы и сделаем - добавим в импорт удаленного кода адрес нужной нам страницы с информацией о ценах на бензин в нужном нам регионе. Вот этот адрес:
http://biz.liga.net/auto/region/56

Добавив этот адрес в импорт удаленного кода мы получили стандартный служебный код - $RCODE_1$. Но вставить его на свой сайт просто так не получится, так как в этом случае на нашем сайте выведется вся информация и содержимое импортированной страницы. Нам же нужна лишь табличка с ценами на бензин.
Здесь нам на помощь приходит вся мощь JavaScript-библиотеки jQuery, которая по-умолчанию интегрирована в систему uCoz. С ее помощью можно извлечь из импортированной страницы любые нужные элементы и информацию. Рассмотрим как это делается.
Для начала, нам нужно разместить полученный код $RCODE_1$ на одной из страниц нашего сайта, чтобы к ней можно было обращатся напрямую из JavaScript.
Для этого создадим в Редакторе страниц новую страницу и назовем ее "Актуальные цены на топливо". Единственным содержимым этой страницы будет код вызова импорта удаленного кода:
<div style="display:none;">$RCODE_1$</div>
Несмотря на то, что нигде на сайте мы не будем ссылаться на эту страницу - отображение информации лучше скрыть, на случай, если кто-либо зайдет по этому адресу случайно. Итак - теперь у нас есть страница вида http://autoclub.ck.ua/index/0-4 , которая содержит нужную нам информацию, и к которой мы уже можем обратится средствами JavaScript. Сделаем это прямо в нужном нам месте кода, а именно в правой колонке сайта. Создадим блок "Цены на топливо", оформим его в соответствии с дизайном сайта, и проведем выборку нужной информации и ее оформление к нужному виду.
Вот как это происходит:
<span id="newInformer">Загрузка...</span>
 <script type="text/javascript">
 jQuery("#newInformer").load("/index/0-4 table.ligaCurrencyRatesTable", function()
 { 
 jQuery("#newInformer table td").removeAttr("style").removeClass().addClass("fuel_view");
 jQuery("#newInformer table").attr("cellspacing","1").attr("cellpadding","0").attr("bgcolor","#CCCCCC").attr("border","0").css("margin-right","2").css("margin-left","2");
 }); 
 </script>
Разберем подробнее.
Первая строчка:
<span id="newInformer">Загрузка...</span> 
является элементом-контейнером, в который мы собственно и загрузим полученную табличку с ценами на бензин. Надпись "Загрузка..." нужна для того, чтобы пользователь, заходящий на сайт, видел не пустое место, а понимал, что информация находится в процессе загрузки, и скоро появится. В случае возникновения каких-либо проблем с загрузкой (проблемы с удаленным сервером, каналом к нему и т.д.) в этом месте можно выводить другую надпись, например, "Извините, информация временно недоступна".

Следующей важной строчкой является:
jQuery("#newInformer").load("/index/0-4 table.ligaCurrencyRatesTable", function() { }
Алгоритм работы этой строки словами можно расписать так: загрузить в элемент с id newlnformer элемент table с классом .ligaCurrencyRatesTable со странички /index/0-4 То есть - благодаря универсальным возможностям jQuery мы получаем со страницы с импортированным кодом только тот элемент, который нам нужен - таблицу с ценами на бензин.

Следующие две строчки отвечают исключительно за оформление нашего информера. Первая из них:
jQuery("#newInformer table td").removeAttr("style").removeClass().addClass("fuel_view"); 
убирает в нашей таблице стили и классы, прописанные для ячеек и добавляет наш собственный класс fuel_view, в котором мы опишем, как должна отображаться информация.
Вторая строчка:
 jQuery("#newInformer table").attr("cellspacing","1").attr("cellpadding","0").attr("bgcolor","#CCCCCC").attr("border","0").css("margin-right","2").css("margin-left","2");
устраняет проблемы с внешним видом самой таблицы, устанавливает необходимые атрибуты и стили.

Вот собственно и все - используя всего несколько строк кода и функцию импорта мы получили на нашем сайте регулярно обновляющийся информер последних цен на бензин в регионе, который, к тому же, хорошо вписан в дизайн. Для непосвященного человека будет абсолютно незаметно, что информация загружается с другого ресурса. Готовый результат вы можете увидеть на сайте http://autoclub.ck.ua в правой колонке.



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

Как видите, минусов существенно меньше чем плюсов :) Потому, по-моему личному мнению, такой подход к импорту информации имеет право на жизнь :)
Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.
34 комментариев
1 2 »
1 Написал GID-vologda 06 Октябрь 2010, 18:22
Замечательная статья!
2 Написал leonP4 06 Октябрь 2010, 18:24
Довольно-таки не плохо! wink
Кое что новое взял для себя из этого материала, раньше подходил к импорту как почти бесполезному элементу, только иногда когда нужно было со второго сайта на php что то вывести.
avatar
3 Написал Труд9га 06 Октябрь 2010, 20:15
Code
jQuery("#newInformer table").attr("cellspacing","1").attr("cellpadding","0").attr("bgcolor","#CCCCCC").attr("border","0").css("margin-right","2").css("margin-left","2");

Соответственно можно заменить на
Code
jQuery("#newInformer table").attr("cellspacing","1").attr("cellpadding","0").css({border-collapse: 'separate', border-spacing: '1px', padding: '0px', background: '#CCC', border: '0px', margin-right: '2px', margin-left: '2px'});

happy
avatar
4 Написал Труд9га 06 Октябрь 2010, 20:17
Тоесть заменить на:
Code
jQuery("#newInformer table").css({border-collapse: 'separate', border-spacing: '1px', padding: '0px', background: '#CCC', border: '0px', margin-right: '2px', margin-left: '2px'});

(предыдущий пост прошу поправить.)
5 Написал europe-kiev 06 Октябрь 2010, 20:30
Спасибо за статью надо будет попробовать как-то
6 Написал Маххх 07 Октябрь 2010, 10:12
если импортировать картинки (товар с описанием), получится?
8 Написал Styler 07 Октябрь 2010, 12:38
Получится. Любые элементы удаленной страницы можно извлечь таким способом.
7 Написал mehaNik 07 Октябрь 2010, 12:31
я конечно подозревал что подобное возможно, но чтобы так просто можно было распарсить удаленную страницу....

пиши еще. хотелось бы в следующих выпусках увидеть метод, который я у тебя как то наблюдал: как выводить куски одних модулей внутри других.

avatar
9 Написал ada3in1 07 Октябрь 2010, 15:59
Этой статье не хватает одного маленького абзаца о маленькой вежливой ссылке на источник информации cool
А так очень полезно. Хороший толчок к тому, чтобы изучить-таки jQuery dry
12 Написал Styler 08 Октябрь 2010, 11:31
Источник какой информации? О jQuery? Пожалуйста - http://jquery.com/, хотя эта ссылка находится за несколько секунд в Гугле.
avatar
14 Написал ada3in1 08 Октябрь 2010, 12:42
Не, я имела в виду, что при импорте информации с другого сайта нелишним бывает рядом с чужими данными давать ссылку на этот самый другой сайт (в данном случае biz.liga.net). И чужие заслуги себе в каком-то виде не присваиваются, и ответственность за чужие ошибки никто на тебя не повесит... То есть к технической стороны дела это, конечно, никакого отношения не имеет, просто показалось неожиданным, что тут такого нет.
15 Написал Styler 08 Октябрь 2010, 14:30
Вы, вероятно, невнимательно читали статью. Там в начале написано, что подобный импорт данных можно использовать, если вас что то неустраивает в стандартных информерах, которые можно найти в интернете. Например - ссылки на сайты-источники. А добавлять ссылку или нет - личное дело каждого конкретного вебмастера
avatar
16 Написал ada3in1 08 Октябрь 2010, 14:54
Я читала статью, но по тупости своей решила, что, поскольку реклама более общее понятие, чем ссылка, имелось в виду просто чересчур навязчивое ее оформление. Была неправа, каюсь.
Что личное дело каждого - и не спорю, ни в коем разе. Просто забавно, что по умолчанию считается естественным нежелание ставить ссылки. Впрочем, всё это полюбасу не относится к теме статьи.
10 Написал cool@player 07 Октябрь 2010, 20:29
Хорошая статья. Но не люблю я эти импорты с других сайтов. Любой чужой сайт может упасть и будет большой упс. Тоже самое выйдет, если на исходном сайте администратор изменит или уберет нужный мне блок...
13 Написал Styler 08 Октябрь 2010, 11:44
К сожалению, как показывает практика, невозможно иметь абсолютно всю нужную информацию только на своем сайте. Те же самые цены на бензин для простого сайтовладельца самостоятельно собирать и размещать на сайте еждневно - слишком затратно по времени и средствам.
11 Написал sfera 08 Октябрь 2010, 04:57
отличная статья! давно ждал. спасибо автору.

небольшой вопрос: как убрать ссылки? то есть есть готовая страница, на ней выводится удалённое содержимое, но со ссылками, причём ссылки имеют вид: http://мой_сайт/afisha/events/1920/ , при переходе по которой вылетает страница 404.

спасибо.

avatar
17 Написал tRiMe:o0O 10 Октябрь 2010, 09:16
Познавательная статья.
18 Написал sfera 11 Октябрь 2010, 14:35
да, именно это, только не могу понять как это можно реализовать. спасибо.
19 Написал Styler 12 Октябрь 2010, 23:38
Неплохим вариантом может стать простая замена всех ссылок на допустим span, и при этом естественно нужно удалять параметр href, иначе валидаторы будут ругаться. В этом случае сохранится форматирование ссылок и их содержимое.
avatar
20 Написал Raphael 14 Октябрь 2010, 16:56
Quote
Этой статье не хватает одного маленького абзаца о маленькой вежливой ссылке на источник информации

Да, хорошим тоном было бы рядом с таким информером указать: "Источник такой-то". В данном случае - "Источник: сайт biz.liga.net". Не нужно делать это с гиперссылкой (если у вас нет с источником партнёрских отношений), просто текст. Но указать источник информации надо.
avatar
21 Написал Sergic 21 Октябрь 2010, 18:21
Если я правильно понимаю, то таким образом можно импортировать практически любую инфу.. Вопрос: как сделать так, чтобы на полученном результате не кликались ссылки, если они там есть, а оставалась чисто картинка, таблица или текст?
avatar
22 Написал школа7332 21 Октябрь 2010, 22:38
Доброе время суток. Возможно задам глупый вопрос, но мне нужно элементарно добавить текст на свой созданный сайт. текст в ворде на 24-х страницах, и целиком не помещается, когда его добавляешь просто как новость. Как его можно запихать на сайт? Даже если хотя бы просто разместить ссылку на него. Помогите пожалуйста. Очень нужно.
23 Написал GID-vologda 30 Октябрь 2010, 18:15
Если текст находится в Microsoft Word документе, следовательно его необходимо очистить от излишних кодов.
1) Выделяем весь текст который необходимо добавить и копируем в блокнот - то есть в txt файл.
2) После из файла txt то есть из блокнота - копируем и вставляем в поле добавления на сайт.
(так как при использование визуального редактора из буфера обмена копируются дополнительные метаописания и другая ересть из документа Microsoft Word которая занимает в разы больше места чем чистый текст)
Из за этого срабатывают ограничения в системе.
avatar
24 Написал EDGE1041 10 Декабрь 2010, 14:51
Друзья помогите пожалуйста. Я незнаю просто куда это написать. Хочу добавить видео на сайт и что-бы его гости могли просматривать хотя бы на главной странице. cry
avatar
25 Написал cherkassy 11 Декабрь 2010, 18:34
Здравствуйте. Задача - импортировать рассписание автовокзала г черкассы. Проблема : в коде нет возможности привязаться к table . пробую привязаться к Div у не получается.
Подскажите как можно сделать заранее спасибо за совет
http://infobus.com.ua/modules/pages/main/tablo_all/cherkassy.html
avatar
26 Написал Ариф 26 Декабрь 2010, 01:08
У меня тоже такой вопрос. Как выпарсить таблицу, если у неё не задано никакого класса? То есть такую:
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td>Очень нужные данные</td></tr>
<tr><td>Очень нужные данные 2</td></tr>
</table>

Или как взять из данного примера только первую строку (<tr><td>Очень нужные данные</td></tr>)?

Заранее спасибо

avatar
27 Написал BOSS5476 30 Январь 2011, 19:16
Ребята,помогите,загружаю файл с компа на сайт,потом перехожу по ссылке и косяк,рисунки все есть,а текст в виде ромбиков с вопросит.знаками
28 Написал Scorpik427 30 Январь 2011, 20:02
Текст.документы надо сохранять в кодировке UTF-8
29 Написал vadim-narochnyi 05 Апрель 2011, 14:24
Styler ты оказывается фигню написал, импорт с другой страницы не возможен, по крайней мере так говорит пользователь Apocalypse87 с helper.ucoz.ru biggrin вот его сообщение http://helper.ucoz.ru/forum/26-21155-124333-16-1301940600 чесно говоря я сам пробовал это сделать, все получилось, ну что ж, наверное он знаток!
Ребята кто делал напишите что это возможно, а то он меня на весь форум оскорбил!
30 Написал Styler 06 Апрель 2011, 17:07
Пользователь Apocalypse87 ошибается, о чем собственно ему и было сказано на форуме Хелпера.
1-20 21-24
Ваш комментарий