Многих мучает вопрос, как подгрузить в определенное место - нужный блок, таблицу или другой элемент с внутренней страницы сайта, сегодня мы дадим ответ и рассмотрим такие ситуации.
Чтобы посмотреть как это работает, кликните по ссылке Подгрузить сюда контент страницы контактов.
Так как для подобных ситуаций я не нашел готового решения, пришлось написал небольшую 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>
Приятного программирования господа ;)
