#javascript #url #browser
#javascript #url #браузер
Вопрос:
Я хочу это
www.example.com/?category=electronicsamp;gadget=mouse
чтобы выглядеть так:
www.example.com/?electronics/mouse
Я извлекаю данные, выполняя XHR запрос с обычными запросами. Но я хочу, чтобы запросы фильтра отображались в URL наиболее удобочитаемом виде с помощью history.pushState() . А также он должен оставаться на той же странице при перезагрузке.
- Возможно ли, чтобы браузеры возвращались на ту же страницу при перезагрузке? Я имею в виду не только самые современные, но и большинство из них.
Внимание, после «/» во втором URL есть «?».
Комментарии:
1. Вам понадобится настройка на стороне сервера, которая выполняет необходимую перезапись URL-адреса и возвращает весь необходимый код для отображения конкретного представления, запрошенного по этим URL-адресам.
2. @CBroe Я отредактировал свой ответ. Пожалуйста, посмотрите «?» после «/». Может ли строка запроса безопасно содержать «/»? Как браузеры отображают это? Я не хочу никаких действий на стороне сервера.
3. Рендеринг на стороне сервера по-прежнему является основой для большинства вещей, о которых вы здесь просите. (Тот же контент, который отображается после жесткой перезагрузки, в первую очередь удобочитаем для роботов поисковых систем.)
4. Если строго следовать требованию URL, технически это возможно на стороне клиента, поскольку запрос URL доступен в Javascript, и выполняется запрос XHR.
5. @Mike Да, это тот, который отображается в адресной строке. Итак, можно ли писать косую черту после вопросительного знака? Я также беспокоился о SEO.
Ответ №1:
Вы можете взять текущий URL и разобрать текст после ? .
const query = location.href.split("?").pop()
Это разбивает текущий URL на каждый ? и возвращает последний элемент.
Затем вы можете получить параметры по его структуре.
const [category, gadget] = query.split("/")
Это присваивает первый и второй индексы запроса, разделенные на / , переменным category и gadget соответственно. Это то же самое, что делать это.
var parts = query.split("/")
var category = parts[0]
var gadget = parts[1]
С помощью этих двух переменных вы можете передать правильные данные в своем XHR запросе.
Что касается запроса истории, пока вы выполняете XHR запрос при загрузке, ваша страница каждый раз будет отражать правильную информацию. Вы также можете прочитать о событиях всплывающего окна, чтобы обнаружить изменения в history .
РЕДАКТИРОВАТЬ: только сейчас прочитайте о проблеме с SEO. При таком подходе вы мало что можете сделать с SEO, поскольку большинство поисковых систем SEO не запускают Javascript при анализе информации. Внедрение Javascript meta оказалось бы бесполезным для большинства сканеров. Извините. Как сказал CBroe, для этого вам понадобится рендеринг на стороне сервера.