导航到另一个页面时，Safari 上未显示页面加载覆盖

Question

我有一个 Web 应用程序，它仅在页面加载时显示叠加层（某些服务器工作）。它在 Firefox 和 Chrome 中运行良好。例如，当我登录时：我填写登录表单，然后单击登录按钮，出现叠加层 - 服务器检查时，片刻之后，提供另一个页面或显示错误消息。

叠加层不会使用 Safari 显示。

HTML代码

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

javascript - jquery

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

在 safari 中：当我手动注释掉 HTML 初始隐藏状态时 - 它会显示。（这表明我的 CSS 没问题。）但这不是它应有的功能。

我尝试使用 opacity: 0，但整个页面都被冻结了。

如何让叠加层仅在页面加载时出现 - 就像 Chrome?

Answer 1

可能值得使用显示属性...

这里我使用 JS 在加载时隐藏 div 然后当你点击按钮时 div 通过移除隐藏属性变得可见

     $(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>

Answer 2

Safari 似乎不支持 onbeforeunload，但 MDN 中的 the recommended approach 是：

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 中测试。

Answer 3

在与 Siavas 聊天后。我决定处理表单提交的操作和一些点击以触发覆盖。

这是我的结果 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 上），它也显示覆盖。这适用于所有浏览器。就像汤姆展示的那样。

导航到另一个页面时，Safari 上未显示页面加载覆盖

Page loading overlay not shown on Safari when navigating to another page

javascript

css

jquery

overlay

show-hide