Использование (немного) JavaScript

В течение некоторого времени у меня были проблемы с исчезновением моего флеш-баннера с моих веб-сайтов Flask. Flash — это небольшой баннер, который выпадает после того, как пользователь успешно вошел в систему, уведомляя пользователя об успешном входе в систему. Это также полезно для предупреждений и других вещей. Его легко использовать, потому что flash является частью библиотеки Flask.

Иногда баннер будет закрывать те части сайта, которые пользователь захочет просмотреть, поэтому было бы неплохо сделать так, чтобы он исчезал без необходимости перезагружать страницу. Когда я говорю перезагрузить, я не имею в виду нажатие кнопки перезагрузки на панели навигации браузера. Это просто повторит последний вызов, который вызвал отображение баннера. Это не принесет никакой пользы. Это только раздражает пользователя.

Когда я говорю перезагрузить, я имею в виду использование кнопки на вашей странице, которая отправляет другой запрос на публикацию для повторного создания этой страницы без флеш-баннера. Я не хочу этого делать, потому что это немного громоздко.

Вместо этого мы можем использовать немного JavaScript для удаления баннера. Это просто и гораздо менее разрушительно для пользователя.

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

Описанное здесь решение использует небольшое количество JavaScript… и я имею в виду небольшое количество. Это очень легко.

Вот репозиторий Github.

Фрагмент ниже из файла home.html показывает, что нужно добавить во flash div. Я добавил ввод, который представляет собой просто изображение «X», чтобы пользователь мог видеть что-то знакомое, используемое для закрытия окон, диалогов и т. д. Значение кнопки =✖ — это один из html-кодов для «X». В этот же вход я добавил метод «onclick», который вызывает функцию, которая написана внизу html-файла.

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class=”alert alert-{{ category }}” id=”div_flash” >
        {{ message }}
        <input type=”button” value=&#10006 onclick=”removeFlash()” style=”float: right”>
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}

«Onclick» не обязательно должен быть на входе. Он также работает непосредственно с div. Если вы удалите ввод с помощью «X» и просто добавите «onclick="removeFlash()"» в div, функция все равно будет работать. Затем вместо того, чтобы пользователь нажимал «X», он может щелкнуть в любом месте баннера.

Вот весь javascript, необходимый для того, чтобы объект исчез.

<script>
function removeFlash() {
  const element = document.getElementById(‘div_flash’);
  element.remove();
}
</script>

Скрытие и отображение

Мы можем пойти дальше. Вместо того, чтобы заставлять вещи исчезать, удаляя их, мы также можем скрыть их. В этом примере мне даже не нужно использовать flask для создания объекта. Я скрываю только html-элементы, но это работает и на странице, управляемой flask.

Для этого я создал div с id=”email_div”, который содержит метку и ввод текста. Ниже у меня есть кнопка ввода, которую я буду использовать для переключения между скрытием и отображением email_div.

В сценарии внизу hide_unhide.html я создаю переменную my_element. Я не буду пытаться объяснить, как работает синтаксис JavaScript, но, как вы видите, он достаточно прост. По сути, мы перенастраиваем свойство display с «inline» (одно из значений по умолчанию для display) на «none».

<head>
  <title>Hide/Unhide</title>
</head>
<body>
  <h1>Example Hide and Unhide</h1>
  <div id=”email_div”>
    <label>Email:</label>
    <input type=”text” id=”email” name=”email_text”>
    <input type=”submit” id=”btn_subtmit” value=”submit”>
    <br><br>
  </div>
  <input type=”submit” id=”btn_hider” value=”toggle submit” onclick=”hideUnhide()”>
<script>
function hideUnhide() {
  var my_element = document.getElementById(“email_div”);
  if (my_element.style.display === “none”) {
    my_element.style.display = “inline”;
  } else {
    my_element.style.display = “none”;
  }
}
</script>
</body>
</html>

Часть удаления была настолько простой, что я провел немного больше исследований и нашел последнюю часть, скрывающую/показывающую, в школах W3, так что я просто хочу отдать им должное. Я уверен, что это было во всем Интернете, но в течение нескольких месяцев я просто избегал этой маленькой детали и оставлял свои веб-сайты с закрытыми баннерами. Если вы чем-то похожи на меня (используете только Python/HTML/CSS), это поможет установить связь с небольшим количеством JavaScript, который можно использовать часто, и вам не нужно будет полагаться на поиск идеального виджета из начальной загрузки или еще один пакет для вашего интерфейса.