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

alexz15

Постоялец
Регистрация
3 Окт 2008
Сообщения
394
Реакции
194
Приветствую!
Организовал Для просмотра ссылки Войди или Зарегистрируйся на сайте - без перезагрузки страницы и с изменением адреса в адресной строке:
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. Каким образом можно менять тайтл у страницы?
 
Посмотри технологию pjax (используется например на гитхабе). Реальная подгрузка страниц со сменой url'а и рабочей кнопкой Back. Ну и использование javascript, думаю, там не вызовет проблем, так как технология работает так же, как если бы мы просто перешли по ссылке на другую страницу
 
DeaDSandro, благодарю!

А из того что у меня сейчас есть, можно что-нибудь придумать?
 
чето не чего не понял толком )
насчет первого вообще не понятно
- что будет загружатся в content ? другая страница ? какой то скрипт ?
- что требуется выполнить ?
если страница то в этой самой подгружаемой странице и пишите свой код в обработчике load
в общем по теме
я делал так



<a href="#" onclick='myFunction("some");'>first</a><br/>
далее в myFunction уже обрабатывал как нужно ( делал запросы и т.д. ) после чего менял адрес строки
 
насчет первого вообще не понятно
в 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>
 
а jquery::ready не подойдет ?
 
Реально тебе посоветовали, сразу изучай Ajax по другому не получится, не пытайся выдумать велосипед. твои задачи Html и простым JS не решить.
title это такой же элемент страницы ,как и div,a,p....
$("title").text("новое значение")
кажется так.
 
После
$('.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);
 
Назад
Сверху