enable - safari javascript設定




Safari後退按鈕問題 (7)

我為當地社區學院做了一些小規模的編程和網絡工作。 包括維護一個非常大的和靈魂破壞的網站,包括VBScript,javascript,Dreamweaver生成的cruft和各種conmen已經說服他們購買多年的附加組件集合的工作。

幾天前,我接到一個電話:“網站正在鎖定使用Safari的人!” 好吧,第一步下載Safari(v3.1.2),第二步網站衝浪。 一切似乎正常工作。

長話短說我終於孤立了這個問題,它涉及到Safari的後退按鈕。 該網站使用一個花式褲子的JavaScript菜單,在我嘗試過的所有瀏覽器中都有效,包括第一次使用Safari。 但是在Safari中,如果您關閉頁面的鏈接,然後點擊後退按鈕,菜單將不再起作用。

我做了一個削減的網頁來說明原則。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
</body>
</html>

加載頁面,你會看到警告框。 然後按照頁面上的鏈接並點擊後退按鈕。 在IE和Firefox中,你再次看到警告框,在Safari中你不知道。

經過大量的搜索,我發現了其他類似的問題,但沒有真正令人滿意的答案。 所以我的問題是,如何讓我的網頁在用戶點擊後退按鈕後在Safari中以同樣的方式工作,就像他們在其他瀏覽器中一樣?

如果這是一個愚蠢的問題,請溫柔,JavaScript對我來說有點新。


一個iframe解決了這個問題:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
</body>
</html>

更多細節


我不知道是什麼原因造成這個問題,但是我知道誰可能會幫助你。 Safari是建立在Webkit上的 ,並且不是蘋果公司(誰不是那麼關注社區), Webkit團隊可能知道問題在哪裡。

這根本不是一個愚蠢的問題。


Stefan的iframe解決方案,但如果這不夠優雅,我發現以下的JavaScript也解決了它:

window.onunload = function(){};

也就是說,如果你的菜單是JavaScript,那麼你可能更喜歡用JavaScript解決這個問題。

卸載事件處理程序定義的想法來自這個Firefox 1.5的文章: https//developer.mozilla.org/en/Using_Firefox_1.5_caching



以下是移動Safari的一個很好的解決方案:

/*! Reloads page on every visit */
function Reload() {
    try {
        var headElement = document.getElementsByTagName("head")[0];
        if (headElement && headElement.innerHTML)
            headElement.innerHTML += " ";
        } catch (e) {}
    }

    /*! Reloads on every visit in mobile safari */
    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(evt) {
            if (evt.persisted) {
                document.body.style.display = "none";
                location.reload();
            }
        };
    }

來源

我修改了我的需要,但是,這是好的。 (如果你不修改它刷新刷新白屏)。


在iPad上有同樣的問題。

不是那麼漂亮,但它的作品:)。 怎麼運行的。

我意識到,在iPad Safari上,按下後退按鈕後,頁面不會重新加載。 我在頁面上每秒都放一個計數器,並保存當前的時間戳。

當頁面加載時,計數器和時間是同步的。 在返回按鈕上,計數器繼續停止,並在時間戳和計數器之間存在差距。 如果間隙大於500毫秒,強制重新加載頁面。

在文件action.js中

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0

function showLoadingBox(text) {

    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();

    //Here load the spinner

}

function showLoadingBoxIpadRelaod()
{
    //Calculate difference between now and page loaded time minus threshold 500ms
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;

    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;

    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}

$(window).bind("pageshow", function(event) {
  if (event.originalEvent.persisted) {
    window.location.reload() 
  }
});

mshah最近在這裡 回复 。





safari