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

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

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

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

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

Оцени публикацию:
  • 79,336
Оценили человек: 79
Теги : jquery, iframe load, iframe parse, load container, load dom, ajax popup

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • прикольно. Спасибо
    27 декабря 2010, 17:40 коммент полезен : +3 # On_off
  • Почему это не работает если подгружать контент с другого сайта??
    12 мая 2011, 19:29 коммент полезен : +2 # Dronm
    • политика безопасности браузеров не разрешает подобные манипуляции
      13 мая 2011, 05:59 коммент полезен : +3 # Admin
  • больше полугода назад искал это. тогда выкрутился каким-то образом (были варианты с аяксом, каки-то уже ставшие стандартными вещи, но, поскольку с кодингом туго... ), сделал, форматирование, картинки пропадали при подгрузке. но тут - все наготово =) и лучше
    23 ноября 2011, 10:15 коммент полезен : 0 # Леха2
  • благодарю!

    пока не разобрался, но из того , что искал

    возможно , описание окажется бредом чайника (давно реализовано) , а впечатление ошибочным , но хочу поделиться следующими впечатлениями и предложениями

    1) впечатление таково , что аналогичная подгрузка (с последующим сворачиванием-разворачиванием в переменные) реализована на страничке помощи i.ua ( и не только) http://help.i.ua/section/11
    я немного изменил скрипт (так , чтобы вместо стандартной команды показать-скрыть размещался индивидуальный текст) http://vetebez.at.ua

    теперь о проблемах , для решения которых не хватает "тямы" "чайника"
    1) на сервере не проверял , но на рабочей станции (из папки) подгрузка не получается (остался один визуальный эффект (скрытие-разворачивание)
    -->
    где собака зарыта ?
    2) в моём случае на каждый новый блок приходится повторять скрипт с индивидуальным параметром блока
    это утяжеляет код страницы , так что ожидаемый эффект - облегчения первоначальной загрузки - теряется
    -->
    нельзя ли облегчить код так , чтобы вместо индивидуальных скриптов остались индивидуальные переменные
    3) можно ли сделать так , чтобы подгружаемый блок мог содержать вложенный подгружаемый подблок ?
    4) не лучше ли реализовать функцию специальным параметром ссылки , изменяющей переход на страницу на подгрузку соответствуюм плагином брузера ?

    Из-за отсутствия возможности прикрепления файлов упомянутый и другие коды не прописываю , вышлю при запросе - сообщите email
    VeterBezGranyc@i.ua

    С уважением
    25 декабря 2011, 14:01 коммент полезен : 0 # Veterbez
  • ничего не получилось сделать такое на сайте у себя, можете, помогите, мой емайл написан!
    29 декабря 2011, 17:38 коммент полезен : -1 # Rjbelka
    • ! здравствуйте !

      случайным образом Rjbelka спросил у меня - чайника , каким образом добиться скрипта подгрузки срабатывания

      обещал , помочь . как только справлюсь

      я закончил исследования , а вот email адрес Rjbelka потерял

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

      как
      когда мне попадается неизвестная привлекающая функция я поступаю следующим образом
      -
      сохраняю страничку на своём компьютере в виде файла .html (и соответствующей ему папки)
      соблюдая правило начинать открывающим , заканчивать закрывающим тэгом , вычищаю код странички блоками до того момента , когда заканчивается срабатывание

      пользуюсь полученным шаблоном для наполнения содержанием

      в данном случае дело осложняется необходимостью использования вируально сервера
      едва не самым простым и достаточным в данном случае оказывается аппачи
      при этом нужно помнить
      (в справке не описано)
      что
      размещать исследуемые файлы нужно будет в папке htdocs
      ,
      начинать с файла index.html (папка index_files)
      ,
      отменить работу браузера в автономном режиме и запускать на открытие ссылки http://localhost

      юзание
      1)
      сохраняем страничку http://yapro.ru/web-master/javascript/podgruzka-nujnogo-kontenta-drugih-stranic.html
      в виде файла index.html (папка index_files)
      ,
      облегчаем код страничкм до следующего
      (вы можете просто скопировать нижеприведенный
      ------------
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ru-ru" lang="ru-ru">
      <head>
      <title>Подгрузка нужного контента других страниц</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="Content-Language" content="ru">
      <script language="Javascript" type="text/javascript" src="index_files/jquery_003.js"></script>
      <script language="Javascript" type="text/javascript" src="index_files/system.js" charset="utf-8"></script>
      </head>

      <body>
      <p>Многих мучает вопрос, как подгрузить в определенное место - нужный блок,
      таблицу или другой элемент с внутренней страницы сайта, сегодня мы
      дадим ответ и рассмотрим такие ситуации.</p>
      <p id="this_tag" style="border: 1px dotted rgb(204, 204, 204);">Чтобы посмотреть как это работает, кликните по ссылке <a href="#" onclick="$('#this_tag').html('подгружаю данные...').lebnikLoad('#content', 'http://yapro.ru/contacts.html'); return false;">Подгрузить сюда контент страницы контактов</a>.</p>
      <p>Так как для подобных ситуаций я не нашел готового решения, пришлось написал
      небольшую jQuery функцию lebnikLoad. Она все сделает за Вас или так,
      как Вы этого хотите. Для этого в ней есть возможность использовать
      собственную callback-функцию.</p>
      </body></html>
      -------------
      2)
      оставляем в папке index_files 2 файла
      jquery_003.js
      system.js

      3)
      создаём файл с подгружаемым содержанием
      (я сохранил contacts.html в виде YaprCont.htm)
      4) изменяем ссылку http://yapro.ru/contacts.html на /YaprCont.htm
      !- (хостинг-сервер потребовал у меня полного адреса - http;//.../YaprCont.htm) -!
      4) копируем полученные файлы и папку в папку htdocs установленной программы Аппачи
      (указанную владельцем , на хостинге)
      5) проверяем работоспособность
      |
      ! у меня - работает !
      (испытывал на хостинге host.sk)

      после этого усложняем и дополняем файл index.html нужным содержанием
      и
      ...
      наслаждаемся

      С уважением,
      VeterBez
      23 января 2012, 17:00 коммент полезен : +2 # Veterbez
      • не обнаружил возможности отредактировать
        -
        делаю это дополнением к 3) пункту

        добавляем в открывающие тэги предназначенных к подгрузке блоков параметр id="content"

        <p>
        например
        превращаем в
        <p id="content">
        <dd>
        в
        <dd id="content">
        ...
        и находящееся между соответствующими открывающими и закрывающими тэгами содержание загружается
        (вместе со скриптами - я попробовал)
        24 января 2012, 08:53 коммент полезен : 0 # Veterbez
        • ещё одно дополнение

          блок , куда производится загрузка , в моём случае , индивидуализируется параметром this_tag
          ,
          то есть второе .. место должно иметь вид this_tag1 ..

          аналогично параметром content можно индивидуализировать подгружаемое содержание
          .
          то есть второе... содержание нужно изменить на content1 ...
          24 января 2012, 09:53 коммент полезен : 0 # Veterbez
          • посмотреть как работает скрипт подгузки с
            (настроенным на наведение)
            скриптом проявления - удаления блока информации с экрана
            можно на
            http://vete.host.sk
            24 января 2012, 12:42 коммент полезен : 0 # Veterbez
  • В хроме не работает, после нажатия на ссылку хром не загружает текст, хотя скрипт выполняется если таковой имеется...

    И можете помочь поправить скрипт, чтобы браузер запоминал историю переходов, т.е. чтобы кнопки Вперед Назад работали?
    11 января 2012, 13:21 коммент полезен : 0 # Евгений3
  • Не работает! опишите подробно что куда и как писать..
    13 января 2012, 16:18 коммент полезен : 0 # Вадим1
  • Просьба помощи. Есть компонент Web Plan http://geosector.gixx.ru
    При клике переходит на описание объекта - http://127.0.0.1:4001/index.php?option=com_web_plan&controller=web_plan&task=view_offer&catalog_id=0&offer_id=3&Itemid=37
    Как можно подгрузить описание при клике в div id= "text info". Внутри дива на спане "Информация об объекте...
    Куда рыть...
    Спасибо всем кто откликнется
    13 марта 2012, 13:33 коммент полезен : 0 # Марат
  • Скажите, а как сделать так, чтобы при клике на ссылку изменялся Div на другой, в то же время менялся адрес страницы...
    Примером может следить ВКонтакте...
    Там шапка сайта и меню одно целое и не обновляется почти, а подгружается содержимое внутри и изменяется адрес страницы...
    Как сделать что то аналогичное?
    27 апреля 2012, 20:57 коммент полезен : 0 # Ярослав
    • это реализуется через Ajax с изменением адресной строки, но возможность менять адресную строку есть не у каждого браузера
      28 апреля 2012, 06:26 коммент полезен : 0 # Admin
  • Всем Привет!!
    Я прикрутил этот скрипт к контенту! Точнее:
    1. Установил скрипт в шапке!
    2. Прописал id в контент
    3. Подключил линк на новость.

    Теперь при открытии любой новости обновляется только контент и переходит к самой новости без перезагрузки страницы!!!

    Вроде бы все хорошо вот только перейдя в новость url сайта не меняется, как это исправить!??
    Думаю ответ будет многим полезен!
    06 июня 2012, 00:08 коммент полезен : 0 # Betalek
    • Вы наверное неправильно прикрутили, покажите адрес сайта где можно посмотреть Ваши труды
      06 июня 2012, 06:34 коммент полезен : 0 # Admin
  • Всё хорошо, но возникла такая проблема. Вставляемая страница загружается, все скрипты работают, кроме одного... Скрипт создает скролл для списка, вот он-то и не хочет высчитывать свою высоту. Работать он начинает только после вставки нового элемента в список. Как быть?
    09 июля 2012, 09:21 коммент полезен : 0 # Михаил3
  • Здравствуйте, воспользовался вашим скриптом, все работает отлично - СПАСИБО!
    Но есть маленький нюанс, который не могу решить... Как вывести в этой строчке:
    <a id="link-{news-id}" href="#" onclick="$('.ajax_load-{news-id}').html('Подгружаем контент...').lebnikLoad('.ajax', '{full-link}'); return false;">Быстрый доступ к фильму</a>

    Вместо "Подгружаем контент..." картинку прелоадер?
    24 июля 2012, 13:15 коммент полезен : 0 # Quest
  • Люди помогите плиз! Вот у меня есть страница index.html. В ней сбоку новости в диве. Как сделать так чтобы в этот див автоматически загружалась информация из страницы news.html? Если делать ссылку я разобрался, все работает. На кнопку нажимаешь в слой загружается информация. Но как сделать чтобы человек зашел на главную стр. и все было автоматом, без кнопок? Помогите чайнику. Опишите плиз. Если нужно скину рабочий вариант.
    25 июля 2012, 08:22 коммент полезен : +1 # Марат1
  • Спасибо. Два дня мучался, пока не нашел Вашу статью. Вроде пока полет нормальный.
    26 октября 2012, 11:18 коммент полезен : 0 # Frantsuzzz
  • А если вместо адреса указать переменную с (this).attr('href') будет работать? Потому что на мое удивление конструкция

    $("#gal a").click(function() {
       var rUrl = $(this).attr('href');
       $('#gal').load('rUrl #gal');
       return false;
    });

    не работает ((

    05 января 2013, 18:24 коммент полезен : 0 # Максим5
  • Есть ли способ ускорить это все? Уж очень долго.. Нужен аналог фоток гугла, есть несколько фоток (5х5), понажатию на одну из них - появляется блок и в нем описание. У каждой фотки свое описание, есть своя страница и с нее нужно вытащить <div id="loadme"></div>... ПО этому скрипту все работает, но уж очень долго
    28 марта 2013, 09:31 коммент полезен : 0 # Nik
  • а можно исходники с рабочим кодом дать, пожалуйста!
    17 июля 2013, 10:57 коммент полезен : 0 # Aisultan
  • Если я правильно понял, то этот код функции и примеры подгружают контент в iframe? Возможно, ли использовать этот скрипт для подгрузки контента в Ajax?
    С уважением, Андрей.
    02 ноября 2013, 22:40 коммент полезен : 0 # Андрей10
  • Есть сайт на Joomla http://sebenado.ru/
    Нужна только форма заказа из икеа
    Как сделать вот так?
    http://idea-sr.ru/checkout/
    или вот так?
    http://shopikea.ru/checkout.html
    09 марта 2014, 14:24 коммент полезен : 0 # Sfera
  • А чем не устраивает jQuery .$(selector).load('url #selector') ?

    работает достаточно быстро
    10 октября 2014, 13:41 коммент полезен : 0 # Den
  • Если с другого домена то нечего не работает
    04 декабря 2014, 23:22 коммент полезен : 0 # Игорь (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » JavaScript »