Не так давно я задался вопросом, как же можно сделать так, чтобы страницы загружались с помощью ajax скрипта, как вконтакте и при этом были проиндексированы поисковыми машинами.
Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).
Первое, что я сделал это — подключил скрипты на странице и написал функцию которая будет отслеживать изменение хеша страницы:
$jQuery = jQuery.noConflict(); $jQuery(window).hashchange(function()< var link = window.location.hash.replace(«#», «»); get_page_by_hash(link); >);
Данная функция вызывает функцию «get_page_by_hash» при изменении хэша страницы, первым аргументом которой будет являться ссылка на страницу.
Вторым шагом я сделал саму функцию «get_page_by_hash»:
function get_page_by_hash(link) < if(typeof(link) != «undefined»)< if(link != «»)< $jQuery.ajax(< type: «POST», cache: false, async: false, url: link, success: function(data)< if(data != «»)< $jQuery(«body»).html(data); >> >); > > >
В данной функции происходит замена html в тебе body на html, который пришел в ответе на запрос.
Как Загрузить Видео в ВК на Страницу или Свою стену в 2023 году
1. Метод передачи данных — POST нужен для определения того зашли просто на страницу или это запрос через ajax. Это позволит в шаблоне сделать условие, которое будет скрывать данные не требующие отображения при запросе скриптом:
if($_SERVER[«REQUEST_METHOD»] == «GET»)
Так же с помощью этого метода можно сделать замену html не в теге а внутри любого элемента, которого можно выбрать с помощью jQuery, при этом обрезать все не нужное в шаблоне с помощью условия, указанного выше.
Следующим шагом было выставление хеша страницы который мы отслеживаем с помощью функции выше:
$jQuery(«a»).click(function() < if($jQuery(this).attr(«href»).substr(0, 1) == «/»)< window.location.hash = $jQuery(this).attr(«href»); >>);
Данная функция позволяет добавить hash в адресную строку браузера, работает во всех браузерах.
Так же все видили, что вконтакте в браузерах Mozilla и Chrome адрес меняется без перезагрузки страницы, чтобы этого добиться нужно сделать еще пару шагов:
1. Нужно определить браузер с помощью этой функции:
function getNameBrouser() < var userAgent = navigator.userAgent.toLowerCase(); // Определим Internet Explorer if (userAgent.indexOf(«msie») != -1 userAgent.indexOf(«opera») == -1 userAgent.indexOf(«webtv») == -1) < return «msie»; >// Opera if (userAgent.indexOf(«opera») != -1) < return «opera»; >// Gecko = Mozilla + Firefox + Netscape if (userAgent.indexOf(«gecko») != -1) < return «gecko»; >// Safari, используется в MAC OS if (userAgent.indexOf(«safari») != -1) < return «safari»; >// Konqueror, используется в UNIX-системах if (userAgent.indexOf(«konqueror») != -1) < return «konqueror»; >return «unknown»; >
2. Теперь нам нужно расширить функцию обновления hash страницы:
Вы пытались загрузить более одной однотипной страницы в секунду в ВК. Решение проблемы!
$jQuery(«a»).click(function()< if($jQuery(this).attr(«href»).substr(0, 1) == «/»)< if(getNameBrouser() == «gecko»)< window.history.pushState(«», «», $jQuery(this).attr(«href»)); window.history.replaceState(«», «», $jQuery(this).attr(«href»)); get_page_by_hash($jQuery(this).attr(«href»)); >else < window.location.hash = $jQuery(this).attr(«href»); >return false; > >);
С помощью данных скриптов у Вас будет сайт похож (по переходам по страницам) на сайт вконтакте.ру
Источник: habr.com
Загрузка страниц как в вк
Не так давно я задался вопросом, как же можно сделать так, чтобы страницы загружались с помощью ajax скрипта, как вконтакте и при этом были проиндексированы поисковыми машинами.
Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).
Первое, что я сделал это — подключил скрипты на странице и написал функцию которая будет отслеживать изменение хеша страницы:
$jQuery = jQuery.noConflict(); $jQuery(window).hashchange(function()< var link = window.location.hash.replace(«#», «»); get_page_by_hash(link); >);
Данная функция вызывает функцию «get_page_by_hash» при изменении хэша страницы, первым аргументом которой будет являться ссылка на страницу.
Вторым шагом я сделал саму функцию «get_page_by_hash»:
function get_page_by_hash(link) < if(typeof(link) != «undefined»)< if(link != «»)< $jQuery.ajax(< type: «POST», cache: false, async: false, url: link, success: function(data)< if(data != «»)< $jQuery(«body»).html(data); >> >); > > >
В данной функции происходит замена html в тебе body на html, который пришел в ответе на запрос.
1. Метод передачи данных — POST нужен для определения того зашли просто на страницу или это запрос через ajax. Это позволит в шаблоне сделать условие, которое будет скрывать данные не требующие отображения при запросе скриптом:
if($_SERVER[«REQUEST_METHOD»] == «GET»)
Так же с помощью этого метода можно сделать замену html не в теге а внутри любого элемента, которого можно выбрать с помощью jQuery, при этом обрезать все не нужное в шаблоне с помощью условия, указанного выше.
Следующим шагом было выставление хеша страницы который мы отслеживаем с помощью функции выше:
$jQuery(«a»).click(function() < if($jQuery(this).attr(«href»).substr(0, 1) == «/»)< window.location.hash = $jQuery(this).attr(«href»); >>);
Данная функция позволяет добавить hash в адресную строку браузера, работает во всех браузерах.
Так же все видили, что вконтакте в браузерах Mozilla и Chrome адрес меняется без перезагрузки страницы, чтобы этого добиться нужно сделать еще пару шагов:
1. Нужно определить браузер с помощью этой функции:
function getNameBrouser() < var userAgent = navigator.userAgent.toLowerCase(); // Определим Internet Explorer if (userAgent.indexOf(«msie») != -1 userAgent.indexOf(«opera») == -1 userAgent.indexOf(«webtv») == -1) < return «msie»; >// Opera if (userAgent.indexOf(«opera») != -1) < return «opera»; >// Gecko = Mozilla + Firefox + Netscape if (userAgent.indexOf(«gecko») != -1) < return «gecko»; >// Safari, используется в MAC OS if (userAgent.indexOf(«safari») != -1) < return «safari»; >// Konqueror, используется в UNIX-системах if (userAgent.indexOf(«konqueror») != -1) < return «konqueror»; >return «unknown»; >
2. Теперь нам нужно расширить функцию обновления hash страницы:
$jQuery(«a»).click(function()< if($jQuery(this).attr(«href»).substr(0, 1) == «/»)< if(getNameBrouser() == «gecko»)< window.history.pushState(«», «», $jQuery(this).attr(«href»)); window.history.replaceState(«», «», $jQuery(this).attr(«href»)); get_page_by_hash($jQuery(this).attr(«href»)); >else < window.location.hash = $jQuery(this).attr(«href»); >return false; > >);
С помощью данных скриптов у Вас будет сайт похож (по переходам по страницам) на сайт вконтакте.ру
Похожие новости:
- Ajax загрузка файлов с помощью iframe
- AJAX отправка файла. Как отправить файл с помощью Ajax? Как отправить файл на javascript?
- Загрузка фотографий на сервер вконтакте
- Как с помощью AJAX обновить ВСЮ форму
- Как с помощью ajax обновить НЕСКОЛЬКО элементов формы
Источник: yadro.top
Динамическая загрузка контента через jQuery
В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Для примера я сначала построил очень простой макет. Вот скриншот и HTML-код, который мы будем использовать.
ajax . nettuts
Welcome!
Tutorial by James for NETTUTS
Шаг 1
Вначале пойдите и скачайте последний стабильный релиз jQuery и добавьте ссылку на него в ваш документ:
Как я считаю, одна из лучших черт jQuery – это его простота. Можно достичь поставленной задачи в сочетании с ошеломляющими эффектами всего несколькими строчками кода.
Во-первых, давайте загрузим библиотеку jQuery и запустим функцию, когда документ уже готов (когда DOM уже загружен).
JavaScript
$ ( document ) . ready ( function ( ) <
// Stuff here
Шаг 2
Нам нужно сделать так, чтобы при нажатии на ссылку в меню навигации на нашей странице, браузер не делал переход на соответствующую страницу, а динамически загружал контент этой страницы внутрь нашего макета, без перезагрузки.
Для этого нам нужно определить ссылки в меню навигации и запускать эту функцию при щелчке на них:
JavaScript
$ ( ‘#nav li a’ ) . click ( function ( ) <
// function here
Давайте наметим, что мы должны сделать в этой функции по порядку.
Удалить содержимое текущей страницы.
Получить новое содержимое страницы и добавить в содержимое DIV.
Вначале нам нужно определить, из какой страницы получать данные после того, как на ссылку нажали. Все, что для этого нужно сделать – это получить атрибут ‘href’ нажатой ссылки и использовать его как адрес страницы, из которой будет загружаться информация.
Кроме того, к полученному URL необходимо добавить метку элемента, так как мы не собираемся использовать ВСЕ содержимое из запрашиваемой страницы. Вместо этого, нам требуются данные внутри разделителя div с меткой ‘content’:
JavaScript
var toLoad = $ ( this ) . attr ( ‘href’ ) + ‘ #content’ ;
Чтобы наглядно продемонстрировать, что делает вышеуказанный код, давайте представим, что пользователь нажимает на ссылку ‘about’ , которая связана со страницей ‘about.html’ – в этой ситуации переменной будет: ‘about.html #content’ – и это именно та переменная, которую мы будем запрашивать при простом вызове. Однако первое, с чего мы начнем – это создадим красивый эффект для содержимого текущей страницы. Вместо того, чтобы оно просто исчезало, мы используем функцию «скрывания» jQuery:
JavaScript
$ ( ‘#content’ ) . hide ( ‘fast’ , loadContent ) ;
Указанная функция быстро «прячет» #content div, и как только эффект заканчивает свое действие, она, в свою очередь, инициирует функцию «loadContent» (загрузка нового содержимого [через ajax]) – это функция, которую мы определим позже (в шаге 4).
Шаг 3
Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:
JavaScript
$ ( ‘#wrapper’ ) . append ( ‘LOADING. ‘ ) ;
$ ( ‘#load’ ) . fadeIn ( ‘normal’ ) ;
Вот CSS, прилагающаяся к свежесозданному #load div:
display : none ;
position : absolute ;
right : 10px ;
background : url ( images/ajax-loader.gif ) ;
width : 43px ;
height : 11px ;
text-indent : -9999em ;
Таким образом область, которая должна содержать анимацию загрузки, первоначально не отображается. Далее, при инициализации функции fadeIn () (см. выше в коде), она начинает отображаться в верхнем правом углу сайта и показывает анимированный GIF, пока через некоторое время снова не исчезнет с экрана.
Шаг 4
Через некоторое время, когда пользователь нажмет на одну из ссылок, начнет происходить следующее:
Появляется сообщение о загрузке.
А теперь давайте напишем ту самую функцию загрузки содержимого, о которой мы ранее говорили:
JavaScript
function loadContent ( ) <
$ ( ‘#content’ ) . load ( toLoad , » , showNewContent )
Функция loadContent вызывает запрошенную страницу, а когда это уже выполнено, вызывает функцию ‘showNewContent’ (показ нового содержимого):
JavaScript
function showNewContent ( ) <
$ ( ‘#content’ ) . show ( ‘normal’ , hideLoader ) ;
Эта функция – showNewContent — использует функцию show() jQuery (на самом деле, это слишком скучное название для такого отличного эффекта) с тем, чтобы новое содержимое, помеченное меткой элемента ‘#content’ появилось на странице. Однажды вызванная, она инициирует функцию ‘hideLoader’ (исчезание):
JavaScript
function hideLoader ( ) <
$ ( ‘#load’ ) . fadeOut ( ‘normal’ ) ;
Нам необходимо помнить, что функция обработки клика должна возвратить «false», чтобы браузер не совершил перехода на другую страницу.
Теперь все должно работать прекрасно. Пример этого можно увидеть здесь: [LINK]
JavaScript
$ ( document ) . ready ( function ( ) <
$ ( ‘#nav li a’ ) . click ( function ( ) <
var toLoad = $ ( this ) . attr ( ‘href’ ) + ‘ #content’ ;
$ ( ‘#content’ ) . hide ( ‘fast’ , loadContent ) ;
$ ( ‘#load’ ) . remove ( ) ;
$ ( ‘#wrapper’ ) . append ( ‘LOADING. ‘ ) ;
$ ( ‘#load’ ) . fadeIn ( ‘normal’ ) ;
function loadContent ( ) <
$ ( ‘#content’ ) . load ( toLoad , » , showNewContent ( ) )
function showNewContent ( ) <
$ ( ‘#content’ ) . show ( ‘normal’ , hideLoader ( ) ) ;
function hideLoader ( ) <
$ ( ‘#load’ ) . fadeOut ( ‘normal’ ) ;
return false ;
Шаг 5
Можно было бы на этом и остановиться, но если вы беспокоитесь об удобстве использования (о котором должны заботиться), важно проделать еще кое-какую работу. Проблема нашего текущего решения в том, что оно игнорирует адреса URL. Что, если пользователь захочет определить ссылку на одну из наших так называемых «страниц»? Сейчас это сделать невозможно, потому что URL все время один и тот же.
Источник: webformyself.com