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，然后当您单击按钮时，通过删除hide属性使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上显示

3 个答案: