Как так устроены ссылки на некоторых сайта?

Question

[FX-Mercury]

Есть ссылки вида
<a href="/feed"> Новости </a>
Когда по ним кликаешь происходит загрузка контена и адресная строка изменяется на vk.com/feed. Вот как так сделать ? Когда я деляю такую ссылку браузер пытается загрузить файл feed

Answer 1

[Арсений Соколов]

Это динамические страницы. Вам надо для начала приступить к изучению какого-либо языка, тогда станет ясно как делать подобное.

Если вы хотите такое же применять на PHP, то допустим для Apache есть вот такая конфигурация .htaccess

Options +FollowSymLinks
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

Ну а в index.php вам нужно будет весь остаточный путь парить под свои нужды.

UPD

FX-Mercury: ну допустим если вопрос стоит именно в том, чтобы не перезагружать страницу, то это AJAX технология + работа с историей браузера, тогда вам надо использовать что-то подобное:

Работает в браузерах Chrome, Safari, FF4+ и IE10pp4+!

Пример:

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Также можешь использовать windows.onpopstate для определения нажатия кнопок навигации браузера назад/вперед:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Для более глубокого изучения манипуляции с историей браузера читай MDN, там все расписано.

Кстати, если надо что-то подобное использовать на IE7, то рекомендую смотреть в сторону history.js.

Для тех, кто задается вопросом что такое IE10pp4+ — это Internet Explorer 10 версии и старше на Windows 8 Platform Preview 4 версии и старше

Comments

[FX-Mercury]

мне нужно знать как изменить адрес в строке браузера и чтобы он не перходил по этому адресу

[Арсений Соколов]

FX-Mercury: Смотри обновление моего ответа.

Answer 2

[Александр N++]

historyApi + ajax = pjax

Answer 3

[Dmitriy Mozgovoy]

То веб приложение и всю загрузку и построение страницы там делают скрипты на клиенте.
Чтоб менять адрес в строке браузера без перехода - нужна поддержка History API
habrahabr.ru/post/123106

<a href="/feed" data-virtual>Feed</a>
        <a href="/news" data-virtual>News</a>
        <a href="/users" data-virtual>Users</a>
        <a href="/users">Real link</a>

document.body.addEventListener("click",function(evt){
                var target=evt.target;
                if(target.tagName=="A"){
                    if(target.hasAttribute("data-virtual")){
                        window.history.pushState({},target.textContent,target.href);
                        evt.preventDefault();
                        alert("Идем на "+target.href);
                    }
                }
            })

            window.addEventListener("popstate",function(evt){
                alert("Назад на "+window.location.href);
            })

Теперь если у ссылки есть атрибут data-virtual - то она виртуальная - перехода при клике на нее не будет.

Answer 4

[Antiless]

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
источник