Я розглядаю використання API історії HTML5 для вирішення проблем глибокого зв’язку із вмістом, завантаженим AJAX, але я намагаюся вийти з місця. Хтось знає про якісь хороші ресурси?
Я хочу використати це, оскільки це здається чудовим способом дозволити можливість передачі посилань, можливо, не ввімкнено JS. Багато рішень не вдається, коли хтось із JS надсилає посилання комусь без.
Мої початкові дослідження, схоже, вказують на API історії в JS та метод pushState.
Відповіді:
Для чудового підручника сторінка Мережі розробників Mozilla на цій функціональності - це все, що вам знадобиться: https://developer.mozilla.org/uk/DOM/Manipulating_the_browser_history
На жаль, API історії HTML5 реалізується по-різному у всіх браузерах HTML5 (що робить його непослідовним і помилковим) і не має резервного доступу для браузерів HTML4. На щастя, History.js забезпечує перехресну сумісність для браузерів HTML5 (забезпечуючи роботу всіх браузерів HTML5 так, як очікувалося) та необов'язково забезпечує хеш-запас для браузерів HTML4 (включаючи підтримувану підтримку даних, заголовків, функцій pushState та substituState).
Детальніше про History.js ви можете прочитати тут: https://github.com/browserstate/history.js
Статтю про Hashbangs VS Hashes VS HTML5 History API див. Тут: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
Я багато виграв від "Занурись у HTML 5". Пояснення та демонстрація простіші і зрозуміліші. Глава історії - http://diveintohtml5.info/history.html та демонстрація історії - http://diveintohtml5.info/examples/history/fer.html
Майте на увазі під час використання pushstate HTML5, якщо користувач копіює або додає закладки до глибокого посилання та відвідує його знову, то це буде прямим зверненням до сервера, який буде 404, тому вам потрібно бути готовим до цього, і навіть бібліотека pushstate js не допоможе ти. Найпростіше рішення - додати правило переписати на сервер Nginx або Apache таким чином:
Apache (у своєму vhost, якщо ви використовуєте його):
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>Nginx
rewrite ^(.+)$ /index.html last;
Специфікація історії HTML5 химерна.
history.pushState() не відправляє a popstate подію та не завантажує нову сторінку самостійно. Це було покликане лише підштовхнути державу до історії. Це функція "скасувати" для програм на одній сторінці. Вам потрібно вручну відправити popstateподію або використати history.go()для переходу до нового стану. Ідея полягає в тому, що маршрутизатор може слухати popstateподії і робити навігацію за вас.
Деякі речі, які слід зазначити:
history.pushState() і history.replaceState() не розсилати popstateподії.history.back(), history.forward() І назад браузера і вперед кнопки роблять відправки popstateподії.history.go() і history.go(0) також перезавантажуйте повну сторінку та не розсилайте popstateподії.history.go(-1)(назад 1 сторінка) та history.go(1)(вперед 1 сторінка) відправленняpopstate події.Ви можете використовувати подібний API API, щоб надіслати новий стан І відправити поп-події.
history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));
Потім слухайте popstateподії за допомогою роутера.
new PopStateEvent(...)здається, не працює в IE11? Чи існує рішення, про яке хтось знає?
var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
Ви можете спробувати Davis.js , він надає вам маршрутизацію у вашому JavaScript за допомогою pushState, коли вона доступна, і без JavaScript вона дозволяє коду на вашому сервері обробляти запити.
Ось чудовий показ екрану на тему Райана Бейтса про рейл-трансляції. Зрештою, він просто вимикає функцію ajax, якщо метод history.pushState недоступний:
Ви можете поглянути на цей плагін jQuery. На їхньому сайті є багато прикладів. http://www.asual.com/jquery/address/
Я написав дуже просту абстракцію маршрутизатора на версії History.js , що називається StateRouter.js . Це знаходиться на дуже ранніх стадіях розробки, але я використовую це як рішення про маршрутизацію в односторінковій програмі, яку я пишу. Як і ви, мені здалося, що History.js дуже важко зрозуміти, тим більше, що я зовсім новачок у JavaScript, поки я не зрозумів, що вам справді потрібна (або повинна мати) абстракція маршрутизації поверх неї, оскільки вона вирішує низький рівень проблема.
Цей простий приклад коду повинен демонструвати, як він використовується:
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();Ось невеличка загадка, яку я придумав, щоб продемонструвати її використання.
якщо jQuery доступний, ви можете використовувати jQuery BBQ