Last active
February 11, 2017 00:47
-
-
Save naviarh/8d1be3d0d077ed12b7df931207b67995 to your computer and use it in GitHub Desktop.
Script no reload page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*\ | |
|*| Script no reload page | |
|*| v1.0 | |
|*| Attributes for links: data-no-reload | |
|*| <a href="address" data-no-reload></a> | |
|*| Attributes for tags: data-load-name="" | |
|*| <div data-load-name="name1">..code..</div> | |
\*/ | |
(function() { | |
"use strict"; | |
var loadNoReload = function (get) { | |
removeNoReload(); | |
if (document.querySelector('[data-load-name]') === null) document.location = get.url; | |
else { | |
var load = true; | |
var data = new DOMParser().parseFromString(get.responseText, 'text/html'); | |
var tags = document.querySelectorAll('[data-load-name]'); | |
for (var i = 0; i < tags.length; i++) { | |
var tag = data.querySelector('[data-load-name="' + tags[i].getAttribute('data-load-name') + '"]'); | |
if (tag !== null) { | |
tags[i].innerHTML = tag.innerHTML; | |
var scripts = tags[i].querySelectorAll('script'); | |
for (var j = 0; j < scripts.length; j++) { | |
var script = document.createElement('script'); | |
script.innerHTML = scripts[j].innerHTML; | |
var attr = tag.querySelectorAll('script')[j].attributes; | |
for (var l = 0; l < attr.length; l++) script.setAttribute(attr[l].name, attr[l].value); | |
tags[i].replaceChild(script, scripts[j]); | |
load = false; | |
} | |
} | |
} | |
if (load) document.location = get.url; | |
} | |
addNoReload(); | |
}; | |
var clickNoReload = function (e, url) { | |
if (e) e.preventDefault(e); | |
var get = new XMLHttpRequest(); | |
if (url !== undefined) get.url = url; | |
else get.url = e.target.getAttribute('href'); | |
get.open('GET', get.url, true); | |
get.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); | |
get.onload = function () { | |
if (url === undefined) history.pushState(null, null, get.url); | |
loadNoReload(get); | |
}; | |
get.send(); | |
}; | |
var addNoReload = function () { | |
var links = document.querySelectorAll('a[data-no-reload]'); | |
for (var i = 0; i < links.length; i++) links[i].addEventListener('click', clickNoReload); | |
}; | |
var removeNoReload = function () { | |
var links = document.querySelectorAll('a[data-no-reload]'); | |
for (var i = 0; i < links.length; i++) links[i].removeEventListener('click', clickNoReload); | |
}; | |
window.addEventListener('popstate', function (e) { clickNoReload(e, location.pathname); }); | |
window.addEventListener('DOMContentLoaded', function () { addNoReload(); }); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Навигация без перезагрузки страниц
Скрипт позволяет с наименьшими усилиями организовать на сайте навигацию без перезагрузки страниц.
Как делать:
Определить на сайте группы страниц, которые одинаковые по структуре и отличием только в определённых блоках. Таким образом можно будет не трогая эти страницы заставить изменяться только блоки в них. Так же, при создании новых сайтов, можно заранее распланировать разделы, которые состоят из страниц с одинаковой структурой и дизайном.
Вписать на страницах в теги, блоки которых должны обновляться, атрибуты: data-load-name="имя блока", где имя_блока - указатель на заменяющиеся блоки. Блоков с уникальными именами на странице может быть несколько. При переходе на другую страницу содержимое этих блоков замениться на содержимое соответствующих блоков новой страницы.
Вписать в теги ссылок, которые ведут на подобные себе страницы, атрибуты: data-no-reload . Данный атрибут определяет, что по этой ссылке страница обновится без перезагрузки. Остальные ссылки будут загружать новые страницы обычным способом.
Выгоды:
P.S. В скрипте используются ajax запросы для получения новых страниц, в заголовках которых присутствует строка:
X-Requested-With=XMLHttpRequest , она позволяет отслеживать эти запросы. Это можно использовать для отдачи сервером не полных страниц, а только содержимого заменяющихся блоков. Такой подход позволит сократить объёмы передаваемых данных сайта.