Наложение загрузки страницы не отображается в Safari при переходе на другую страницу - PullRequest
Новая
       8

Наложение загрузки страницы не отображается в Safari при переходе на другую страницу

0 голосов
/ 25 января 2019

У меня есть веб-приложение, которое отображает оверлей только при загрузке страницы (некоторые серверы работают). Отлично работает в Firefox и Chrome. Например, когда я вхожу в систему: я заполняю форму входа в систему, затем нажимаю кнопку входа в систему, появляется наложение - пока сервер проверяет, то через некоторое время обслуживается другая страница или отображается сообщение об ошибке.

Наложение не будет отображаться при использовании Safari.

HTML код 

<div class="overlay"  style="display: none;" id="loadingDiv">

JavaScript - JQuery 

 window.onbeforeunload = function(e) { $("#loadingDiv").show(); };

В сафари: когда я вручную закомментирую исходное скрытое состояние HTML - оно показывает. (Это указывает на то, что мой CSS в порядке.) Но он не должен функционировать.

Я попытался использовать opacity: 0 вместо этого, и вся страница зависла.

Как заставить оверлей появляться только при загрузке страницы - как в Chrome?

Ответы [ 3 ]

0 голосов
/ 29 января 2019

Кажется, onbeforeunload не поддерживается Safari, но рекомендуемый подход в MDN: 

window.addEventListener("beforeunload", function (e) { 
    $("#loadingDiv").show();
});

Этот скрипт должен быть размещен после загрузки jQuery, и желательно вконец тега <body>.Еще лучше обернуть его .ready(), чтобы оно выполнялось после загрузки всего DOM: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div style="display: none;" id="loadingDiv"><div class="loader">Loading...</div></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
    window.addEventListener("beforeunload", function (e) { 
        $("#loadingDiv").show();
    });
});
</script>
</body>
</html>

Это было протестировано в Safari 12, Chrome 71 и Firefox 64.

0 голосов
/ 01 февраля 2019

После общения с Сиавасом.Я решил обработать действие для отправки формы и несколько щелчков, чтобы вызвать наложение.

Вот мой результирующий javascript: 

function init() {
    var forms = document.forms;
    for (var i = forms.length - 1; i >= 0; i--) {
        forms[i].onsubmit = function() {
            $("#loadingDiv").show();
        };
    }
    var subnav = document.querySelectorAll("ul.subnav li a");
    subnav.forEach(link => {
        link.addEventListener("click", function () {
            $("#loadingDiv").show();
        });
    });
}
document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
        init();
    }
});

Внизу добавлен слушатель, когда он готовФункция init выполнена.Наложение отображается для каждой отправки формы.Затем добавляется прослушиватель для кликов (на ul.subnav> li> a), который также показывает оверлей.Это работает во всех браузерах.Как Том показывал.

0 голосов
/ 25 января 2019

Может быть стоит использовать атрибут отображения ...

здесь я использую JS, чтобы скрыть div при загрузке, затем, когда вы нажимаете кнопку, div становится видимым, удаляя атрибут hide 

     $(document).ready(function () {
        //on page load
        //Adding the attribute and hides the div
        $("#loadingDiv").attr('hidden', 'hidden');
        //on a button click (this could be any event)
        $("#ContanerName").on("click", "#btn", function () {
          //removes the attribute and makes it visable
          $("#loadingDiv").removeAttr('hidden');
        });
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ContanerName">
      <div class="overlay" id="loadingDiv">
        <p>hello world</p>
      </div>
      <input type="button" id="btn" value="button"/>
    </div>
...