Навигация без перезагрузки страницы как вконтакте

Тема в разделе "JavaScript", создана пользователем alexz15, 26 апр 2012.

Модераторы: ZiX
  1. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    Приветствую!
    Организовал такую навигацию на сайте - без перезагрузки страницы и с изменением адреса в адресной строке:
    HTML:
    <title>Change url without reload</title>
    <script  type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script  type="text/javascript">
    $(function($){
              /* Биндим функцию на клик */
          $('.links a').attr('onclick','return false;').click(function(){
                /* Запоминаем адрес ссылки */
            var href = $(this).attr('href');
                /* Добавляем надпись загрузки по вкусу */
            $('.wrapper').text('Loading...');
                /* Загружаем в объект с классом «wrapper» объект
                с классом «content» с другой страницы */
            $('.wrapper').load(href+' .content', function(){
                  /* Меняем текст в адресной строке на тот, что был в адресе ссылки */
              history.pushState(null, null, href);
            });
          });
    });
    /* Happy End */
    </script>
    <table cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td width="150" class="links">
    <a href="first.html">first</a><br/>
    <a href="second.html">second</a><br/>
    <a href="third.html">third</a><br/>
    <a href="fourth.html">fourth</a><br/>
    <a href="fifth.html">fifth</a><br/>
    </td>
    <td valign="top" class="wrapper">
    <div class="content">third block</div></td>
    </tr>
    </table>
    1. Как можно сделать, чтобы в подгружаемом объекте с классом content можно было использовать javascript?
    2. Каким образом можно менять тайтл у страницы?
     
  2. DeaDSandro

    DeaDSandro Создатель

    Регистр.:
    30 апр 2010
    Сообщения:
    49
    Симпатии:
    16
    Посмотри технологию pjax (используется например на гитхабе). Реальная подгрузка страниц со сменой url'а и рабочей кнопкой Back. Ну и использование javascript, думаю, там не вызовет проблем, так как технология работает так же, как если бы мы просто перешли по ссылке на другую страницу
     
    alexz15 нравится это.
  3. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    DeaDSandro, благодарю!

    А из того что у меня сейчас есть, можно что-нибудь придумать?
     
  4. DeaDSandro

    DeaDSandro Создатель

    Регистр.:
    30 апр 2010
    Сообщения:
    49
    Симпатии:
    16
    alexz15 нравится это.
  5. Easy.proger

    Easy.proger Создатель

    Регистр.:
    1 май 2012
    Сообщения:
    22
    Симпатии:
    1
    чето не чего не понял толком )
    насчет первого вообще не понятно
    - что будет загружатся в content ? другая страница ? какой то скрипт ?
    - что требуется выполнить ?
    если страница то в этой самой подгружаемой странице и пишите свой код в обработчике load
    в общем по теме
    я делал так



    <a href="#" onclick='myFunction("some");'>first</a><br/>
    далее в myFunction уже обрабатывал как нужно ( делал запросы и т.д. ) после чего менял адрес строки
     
  6. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    в content должны работать скрипты, например <script>alert('eah');</script>
    есть еще вариант, использовать onload в img, там же и нужный тайтл:
    HTML:
    <table cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td width="150" class="links">
    <a href="first.html">first</a><br/>
    <a href="second.html">second</a><br/>
    <a href="third.html">third</a><br/>
    <a href="fourth.html">fourth</a><br/>
    <a href="fifth.html">fifth</a><br/>
    </td>
    <td valign="top" class="wrapper">
     
    <div class="content">
     
    third block
     
    <img src="http://www.site.com/dot.gif" onload="alert('eah');document.title='Тайтл'" width="0" height="0" border="0" alt="" />
     
    </div>
     
    </td>
    </tr>
    </table>
    
     
  7. Easy.proger

    Easy.proger Создатель

    Регистр.:
    1 май 2012
    Сообщения:
    22
    Симпатии:
    1
    а jquery::ready не подойдет ?
     
  8. casinolot

    casinolot

    Регистр.:
    22 окт 2010
    Сообщения:
    547
    Симпатии:
    84
    Реально тебе посоветовали, сразу изучай Ajax по другому не получится, не пытайся выдумать велосипед. твои задачи Html и простым JS не решить.
    title это такой же элемент страницы ,как и div,a,p....
    $("title").text("новое значение")
    кажется так.
     
  9. Andipas

    Andipas Постоялец

    Регистр.:
    5 дек 2007
    Сообщения:
    130
    Симпатии:
    92
    После
    $('.wrapper').load(href+' .content', function(){
    добавьте:
    $.getScript('scripts.js');

    и само содержимое scripts.js:
    $(document).ready(function () {
    document.title = 'first page test';
    $(".content").append('<div>test div</div>');
    });
    alert(111);
     
    alexz15 нравится это.