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

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

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

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

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

Оцени публикацию:
  • 78,335
Оценили человек: 78
Теги : 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

youtube.com/watch?v=7hFivbgIEqk

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

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