Jump to content
  • 0

History API: проблема с перезагрузкой страницы

WhatIsHTML

Asked by WhatIsHTML,

 Share

Question

WhatIsHTML Explorer

WhatIsHTML

Posted
Posted

Привет всем. У меня проблемы с простой задачей.

Есть одностраничный сайт. Пользователь нажимает на ссылку меню, которая обрабатывается функцией Js. Эта функция асинхронно загружает содержимое страницы и изменяет URL с помощью history.pushState ().
Например было "example.com" => после клика "example.com/page1"


Затем пользователь обновляет страницу, но такого файла, не существует на сервере.
Как решить эту проблему?

Вот пример
Вот страница с пояснениями, но примера обработки обновления страницы там нет.  У них в примере, после обновления открывается страница с тем же контентом, что было до перезагрузки и с тем же url.
Говорят, что нужно решать как-то с помощью php, но я затрудняюсь.

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • KatiaBeing
      Кастомный выпадающий список стран при помощи API
      By KatiaBeing
      Подскажите пожалуйста, как правильно сделать кастомный список стран используя API.
      Вот fetch код:
       
      const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами.
      Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.
    • Young
      Расположение картинки и фигур на сайте
      By Young
      Столкнулся с проблемой , когда вставил картинку , весь текст съехал в лево , а сама картинка , должна находиться с низу сайта
      И еще вопрос , как сделать так , чтобы когда я уменьшал размер сайта , облаки оставались на своих местах ?
      HTML
      CSS
       

      решено 
    • vladdvin
      Неотображаемый текст в шапке сайта.
      By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • Hinn
      Верстка/Разработка сайта/Создание логотипов
      By Hinn
      Всем приветик, начинающий фрилансер. Ищу первые заказы в данной сфере. Занимаюсь:
      • На малом уровне версткой;
      • Хорошо разбираюсь в таких CMS: как Wordpress и Tilta - легко и быстро разработаю одно страничные, многостраничные сайты, интернет-магазины (могу как дорабатывать, так и создания с нуля, так же занимаюсь переносом одного сервера на другой);
      • Увлекаюсь разработкой логотипов (логотипы с нуля, доработка логотипа, рисование логотипа по эскизу).
      Готов заниматься работой за любую плату. Так же присутствует портфолио, но за частую людям интересно когда о тебе есть отзывы. Поэтому пришел сюда за практическим опытом, и поиском постоянной работы.
      Использую:
      - Верстка: (HTML5/CSS3), верстаю из Figma, Photoshop, illustrator.
      - Разработка сайта: (CMS WordPress, Tilta).
      - Разработка логотипа: (Photoshop, illustrator)
      Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь (все-таки начинающий фрилансер).

      Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя;

      телеграмм: HinnWork;
      почта: balistic.baty@gmail.com

      Открыт для любых предложений. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept