Подгрузка нужного контента других страниц

Автор: Aport Понедельник, Февраль 2nd, 2015 Нет комментариев

Рубрика: Уроки JavaScript

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

Чтобы посмотреть как это работает, кликните по ссылке Подгрузить сюда контент страницы контактов.

Так как для подобных ситуаций я не нашел готового решения, пришлось написал небольшую jQuery функцию lebnikLoad. Она все сделает за Вас или так, как Вы этого хотите. Для этого в ней есть возможность использовать собственную callback-функцию.

Код функции:

;(function($) {
$.lebnikLoad = function(selector, url, callback){ $(document.body).lebnikLoad(selector, url, callback, true); };
$.fn.lebnikLoad = function(selector, url, callback, without_selector_document){
var selector_document = this;
var e = $(‘<iframe style=»display:none» src=»‘+url+’»></iframe>’);
$(document.body).append( e );
$(e).load(function(){
var x = $(selector, e[0].contentWindow.document);
if(callback){
callback(x);
}else if(without_selector_document != true){
$(selector_document).html( $(x).html() );
}
});
};
})(jQuery);

Синтаксис применения:

$(selector_document).lebnikLoad(selector_on_url, url, [ complete_callback(responseSeleced) ])
или
$.lebnikLoad(selector_on_url, url, complete_callback(responseSeleced))

Примеры применения:

1. в блок #div вставить содержимое блока #content_from который имеется на странице http://you-site.ru/page

$(«#div»).lebnikLoad(«#content_from», «http://you-site.ru/page»);

2. в блок #div ничего не вставлять, а содержимое блока #content_from который имеется на странице http://you-site.ru/page вывести на экран

$(«#div»).lebnikLoad(«#content_from», «http://you-site.ru/page», function(r){
alert( $(r).html() );
});

3. содержимое блока #content_from который имеется на странице http://you-site.ru/page вывести на экран

$.lebnikLoad(«#content_from», «http://you-site.ru/page», function(r){
alert( $(r).html() );
});

Надеюсь, функция пригодится многим программистам, и если есть идеи, с удовольствием выслушаю.

Следует учесть важные моменты:

В момент подгрузки страницы (iframe-а) происходит выполнение всех JavaScript-ов (в iframe-е), следовательно после вставки обработанных данных, события яваскриптов тоже будут работать, с одной стороны это плюс, но с др. стороны это может ввести программиста в заблуждение, особенно, когда подгруженный контент имеет свои JavaScript-ы (<script>…</script>). Таким образом то, что указано в <script>…</script> при вставке будет выполнено уже на текущей странице, и может получится не только двойной эффект JavaScript-обработки контента, но и ненужная доп. обработка контента текущей страницы.

Примеры реального применения:

1. подгрузка контента дочерних страниц в табы:

<script>
$(document).ready(function(){
$(«#ajax_tabs A»).click(function(){
if($(this).data(«ajax_tabs»)!=true){
$(this).data(«ajax_tabs», true);// вроде кэширования, с помощью исключения повторной загрузки данных
var ex = this.href.split(«#»);
$(«#»+ex[1]).html(«подгружаю данные…»).lebnikLoad(«#article», ex[0], function(r){
$(«#»+ex[1]).html(«»).append(r.html());// можно подгрузить контент целиком: $(«#»+ex[1]).html(«»).append(r);
});
}
});
$(«#ajax_tabs A:first»).trigger(«click»);// автоматически подгружаем нужный контент в перый таб
});
</script>

Приятного программирования господа ;)

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты