показать и скрыть счетчик с помощью jquery: не работает на Iphone, Safary и т. д.

Question

Я пытаюсь показать / скрыть счетчик с помощью JQuery. В основном у меня есть этот код:

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

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

Он отлично работает с Chrome и FireFox на Windows, на Chrome на MacOS. Но это не работает на Safari MacOS. Это не работает на Safari Iphone или Chrome Iphone.

Попытка изменить имя события не решает проблему:

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(); 
    });
});