Safari 在卸载页面之前更改 dom答案

【问题标题】：Safari change dom on before unload pageSafari 在卸载页面之前更改 dom
【发布时间】：2017-07-07 13:50:22
【问题描述】：

当我在我的网站上切换页面时，我不想显示加载程序。所以我在我的 HTML 中定义了一个加载器：

<div class="ajax-loader"><i class="icon-spin5"></i></div>

在我的 CSS 中：

.ajax-loader {
    z-index: 1;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: all ease-in-out .25s;

    i {
        display: inline-block;
        font-size: 80px;
        width: 80px;
        height: 80px;
        animation: spin 3s linear infinite;

        @media @step1, @step2 {
            font-size: 2em;
        }
    }

    &.active {
        opacity: 1;
    }
}

在我的 JS 中：

$(document).ready(function() {
    // loader on page change
    window.onbeforeunload = function(e) {
        // show ajax loader
        $('.ajax-loader').addClass('active');
    };
});

一切都很好，在 IE、Firefox、Chrome 中……但在 Safari（Mac + iOS）中却不行。

有什么想法吗？
谢谢！

【问题讨论】：

beforeunload 监听器唯一应该做的就是返回一个字符串，一些浏览器会在对话框中显示该字符串，要求用户确认是否要离开页面。
改变 DOM 有什么意义？一旦处理程序返回，页面就会被卸载，因此您不会再看到当前的 DOM。
我的加载器与我的 JS 一起显示（不透明度 0 到 1）（addClass 处于活动状态）。它在所有浏览器上都能完美运行，但在 Safari 中却不行......
您解决了这个问题吗？

标签： javascript jquery html css safari

【解决方案1】：

document.pagehide 可能适用于 Safari。

document.pagehide = function(e) {
    $('.ajax-loader').addClass('active');
};

【讨论】：

【解决方案2】：

可能在你的 css 中缺少 -webkit-transition 和 -webkit-transform

【讨论】：