Сохраняйте заголовок динамического c постоянным после первой загрузки - PullRequest
Новая
       3

Сохраняйте заголовок динамического c постоянным после первой загрузки

0 голосов
/ 15 марта 2020

Топ-баннер нашего сайта загружается динамически. У каждого пользователя есть определенный c набор вкладок навигации в соответствии с их настройкой прав доступа. И баннер на всех страницах для определенного пользователя c одинаков. Поэтому в настоящее время наш дизайн должен использовать Ajax, чтобы получить настройку прав доступа пользователя, а затем заполнить баннер, что означает, что когда пользователь посещает каждую страницу, верхний баннер обновляется после получения данных Ajax. Это не очень удобно для пользователя, когда он постоянно обновляет баннер. Что мне нужно, так это чтобы после входа в систему баннер навигации оставлял c отдельно от изменения цвета активной вкладки. Есть ли способ, которым я могу достичь этого. Если разрешение пользователя изменилось в базе данных, пользователь может загрузить страницу (или повторно войти), чтобы обновить sh баннер. Кстати, текущий верхний баннер находится в отдельном файле HTML. Страница полностью написана в javascript, CSS, HTML. И никаких рамок, используемых на нашем сайте. Заранее спасибо

1 Ответ

0 голосов
/ 15 марта 2020

К сожалению, каждый раз, когда вы переходите на новую страницу, независимо от того, насколько эффективно вы выполняете загрузку, это всегда будет заметно на более медленных устройствах / соединениях. В идеале, вашим решением будет либо использовать iframe (в крайнем случае), либо динамически загружать контент и заполнять его для каждой «страницы» в пределах одной реальной страницы с помощью манипуляций DOM. Вы также можете использовать CSS для маскировки элементов или «страниц», которые пользователь не должен видеть, пока он находится на текущей «странице», что позволит ему уже загружаться в браузер, и вы просто переключите его видимость.

Запросы браузера на новые страницы автоматически очищают документ, что приводит к "вспышкам" между страницами.

Самое простое решение - заполнить элементы с помощью JavaScript AJAX вызывает контент / настройки. Я приложил скрипку с примером того, как динамически изменять содержимое в vanilla JavaScript, все, что вам нужно сделать, это загрузить содержимое в массив и затем обновить элементы (включая навигацию по вашим вкладкам).

Соответствующий код для навигации будет здесь, но вы можете просто установить значение страницы на любую вкладку, которую они нажимают. Приведенный ниже код меняет видимость между двумя элементами при изменении страницы в зависимости от того, был ли достигнут предел: 

  btn_prev.style.display = (curr_page > 1 ? "inline-block" : "none");
  btn_next.style.display = (curr_page < story.length ? "inline-block" : "none");

Если вы хотите еще больше оптимизировать его, вы можете поместить навигационные кнопки в массив и используйте индекс каждой кнопки, чтобы вам не нужны именованные элементы.

Fiddle: https://jsfiddle.net/s0toz3L8/1/

...