2

iOS 7 のモバイル サファリでイベントに相当するものを取得する方法を知りたい$(window).blurです。タブが画面に表示されなくなったことを検出する目的でこれを希望します。これは以前に数回尋ねられました ( Mobile Safari の新しいタブへの移動を検出します) が、すべての回答が機能しなくなったか、$(window).focusイベントではなくイベントのみを提供し$(window).blurます。また、$(window).blurサファリの終了時に発火しますか?

4

1 に答える 1

3

この記事によると: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Page Visibility は、タブがフォアグラウンドおよびバックグラウンドになるタイミングを検出するための API (iOS 7 では webkit プレフィックス付き) です。XMLHttpRequest 2.0 仕様と完全に互換性があるということは、応答として「blob」を要求できるようになったことを意味します。ビデオ トラック API については既に簡単に説明しました。この API を使用すると、あらゆるメディア要素のすべてのトラックとコンテンツをクエリしてナビゲートできます。

基本的なデモを実装するための関連コードは次のようになります。うまくいけば、要件に合わせて調整できます。状態の変化をキャプチャする方法を示しているだけでなく、visibilityChangedイベント中にデータを要求する方法も示しているため、これは素晴らしい例です。

var eventName = "visibilitychange";
if (document.webkitHidden != undefined) {
    eventName = "webkitvisibilitychange";
    document.write("<h2>webkit prefix detected</h2>");
} else if (document.mozHidden != undefined) {
    eventName = "mozvisibilitychange";
    document.write("<h2>moz prefix detected</h2>");
} else if (document.msHidden != undefined) {
    eventName = "msvisibilitychange";
    document.write("<h2>MS prefix detected</h2>");
} else if (document.hidden != undefined) {
    document.write("<h2>standard API detected</h2>");
} else {
    document.write("<h2>API not available</h2>");
}


function visibilityChanged() {
    var h4 = document.getElementsByTagName("h4")[0];
    if (document.hidden || document.mozHidden || document.msHidden || document.webkitHidden) {
        h4.innerHTML += "<br>Hidden at " + Date().toString();
        var ajax = new XMLHttpRequest();
        ajax.open("GET", "sleep.php?" + Math.random(), true);
        ajax.onreadystatechange = function () {
            if (ajax.status == 200 && ajax.readyState == 4) {
                h4.innerHTML += "<br>AJAX Async at " + Date().toString();
            }
        }
        ajax.send(null);

        var ajaxs = new XMLHttpRequest();
        ajax.open("GET", "sleep.php?" + Math.random(), false);
        ajax.send(null);
        h4.innerHTML += "<br>AJAX Sync at " + Date().toString();

        setTimeout(function () {
            h4.innerHTML += "<br>Timer at " + Date().toString();
        }, 3000);

    } else {
        h4.innerHTML += "<br>Shown at " + Date().toString();
    }
}
document.addEventListener(eventName, visibilityChanged, false);

window.onpageshow = function () {
    h4.innerHTML = "<br>Page show at " + Date().toString();
};

window.onpagehide = function () {
    h4.innerHTML = "<br>Page hide at " + Date().toString();
};

お使いのデバイスでテストしたい場合は、ライブ デモをご覧ください: http://mobilexweb.com/ts/api/page.html

タブがフォーカスを失い、再びフォーカスされると、ログがページに書き込まれます。

于 2013-12-20T20:47:34.613 に答える