使用 jquery 显示和隐藏微调器：不适用于 Iphone、safari 等

Question

我正在尝试使用 JQuery 显示/隐藏微调器。基本上我有这个代码：

function unLoader(e) {
    $(".site-content").hide();
    $(".loading").show();    
    }

   $(window).on('load', function() {
         $(".loading").hide();
         $(".site-content").show();
          window.onbeforeunload = unLoader;
    });

它适用于 Windows 上的 Chrome 和 FireFox 以及 MacOS 上的 Chrome。 但它不适用于 Safari MacOS。它不适用于 Safari Iphone 或 Chrome Iphone。

尝试更改 eventName 并不能解决问题：

var isOnIOS = navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPhone/i);    
var eventNameHide = isOnIOS ? "pagehide" : "beforeunload";
var eventNameShow = isOnIOS ? "pageshow" : "load";

我们将不胜感激。

Answer 1

在您的上下文中，$().on("load") 函数不清楚。您可以使用文档准备检查文档是否已加载。

$(document).ready(function() {
         $(".loading").hide();
         $(".site-content").show();
          window.onbeforeunload = unLoader;
    });

如果你想使用你的实际代码，你需要定义 pagehide 方法。请尝试：

var isOnIOS = navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPhone/i);    
var eventNameHide = isOnIOS ? "pagehide" : "beforeunload";

$(document).ready(function() {
    $(".loading").hide();
    $(".site-content").show();
    window.addEventListener(eventNameHide, function (event) { 
        window.event.stopPropagation(); //trying with and without
        $(".site-content").hide();
        $(".loading").show(); 
    });
});