使用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";

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

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