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

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

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

Так как для подобных ситуаций я не нашел готового решения, пришлось написал небольшую 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>

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