Я пытаюсь использовать оверлей <div>, но не могу вызвать оверлей из функции, использующей Microsoft Edge (версия Chromium). Оверлей отлично работает с Firefox.

Вот ссылка на скрипку, которая проиллюстрирует мою дилемму: https://jsfiddle.net/utd0z7qk/

Сначала откройте ссылку с помощью Firefox, затем нажмите кнопку «Проверить наличие ошибок». Вы увидите окно alert с сообщением «Check Point». Обратите внимание, что в фоновом режиме вы также увидите, что наложение было вызвано с сообщением «Загрузка ...».

Затем откройте ту же ссылку с помощью Microsoft Edge и нажмите кнопку «Проверить наличие ошибок». Вы снова увидите окно alert с сообщением «Check Point .. Однако обратите внимание, что наложение не было запущено, и в фоновом режиме нет сообщения.

Почему нет?

Я широко использую оверлеи <div> для обмена сообщениями, особенно когда я ожидаю заметной задержки ответа от удаленного источника (например, базы данных, веб-службы, REST API и т. Д.). Есть ли подходящее решение для такого поведения в Microsoft Edge?

Отредактировано, чтобы включить код:

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";

  alert("Check Point");

  ovly.style.display = "none";
}
.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,1.00); /* White background with opacity */
/*  background-color: white;
    opacity: 1.00; */
    z-index: 2;  /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    overflow-y: auto;
}
<html>
  <head>
  <body>
    <center>
      <h5>Overlay Messaging Demo</h5>
      <br />
      <br />
      <button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
    </center>

    <!-- Spinner Overlay -->
    <div id="overlaySpinner" class="overlay" style="text-align:center;">
      <div class="text-center" style="height:65%"></div>
      <div class="text-center" style="height:5%">
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
        <span id="msgSpinner"></span>
      </div>
    </div>
  </body>
  </head>
</html>

Любая помощь приветствуется.

1
rpowell6 16 Июл 2020 в 17:20

1 ответ

Лучший ответ

Я тестировал, и проблема также возникает в Google Chrome:

Google chrome

По сути, вам нужно дать ему время для перекомпоновки / перерисовки.

Для проверки достаточно простого setTimeout.

Что-то вроде этого:

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";
  
  alert("Check Point");
  
  ovly.style.display = "none";
}

В это:

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";

  setTimeout(function(){
    alert("Check Point");
    
    ovly.style.display = "none";
  }, 2000);
}

И "Загрузка ..." должна показать: Google Chrome - после setTimeout

(Кстати, помните, что Microsoft Edge теперь работает на Blink, как и Google Chrome)

Вы можете попробовать это в StackSnippet ниже:

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";

  setTimeout(function(){
    alert("Check Point");
    
    ovly.style.display = "none";
  }, 2000);
}
.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,1.00); /* White background with opacity */
/*  background-color: white;
    opacity: 1.00; */
    z-index: 2;  /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    overflow-y: auto;
}
<html>
  <head>
  <body>
    <center>
      <h5>Overlay Messaging Demo</h5>
      <br />
      <br />
      <button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
    </center>

    <!-- Spinner Overlay -->
    <div id="overlaySpinner" class="overlay" style="text-align:center;">
      <div class="text-center" style="height:45%"></div>
      <div class="text-center" style="height:5%">
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
        <span id="msgSpinner"></span>
      </div>
    </div>
  </body>
  </head>
</html>
1
Ismael Miguel 16 Июл 2020 в 16:52