Question

我有一个与此主体相关的页面：

<body>
    <div class="loading">
            <div class="loader"></div>
    </div>
    <div class="site-content">
            [... all the content]
    </div>
</body>

我正在使用此代码显示/隐藏微调器

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

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

问题在于微调器可以在PC和Mac的台式机上使用，也可以在野生动物园，firefox，chrome等系统上运行。

但是在我的Iphone上不起作用。

另一方面，我正在使用微调器来调用ajax：

var $loading = $('.loading').hide();
$(document)
    .ajaxStart(function () {
        $loading.show();
    })
    .ajaxStop(function () {
        $loading.hide();
    });

但是这次微调器在移动设备（iphone）中工作！

如何使微调器适用于我所有页面中的移动设备（使用前面显示的代码）？

我知道问题出在onbeforeunload事件

谢谢。

EDIT1：要回答josh的评论，我什至尝试过这个：

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

     $(window).on(eventNameShow, function(){
            $(".loading").hide();
            $(".site-content").show();
            window.addEventListener(eventNameHide, function(e) {
                $(".site-content").hide();
                $(".loading").show();    
            });
        });

Answer 1

beforeunload在iOS Safari上不会发生。没有将动作绑定到的事件。

IOS上的onbeforeunload问题（iPhone）

1 个答案: