我正在開發一個頁面,它大量使用jQuery在頁面上動態創建元素。後退按鈕會影響由jquery動態創建的元素
當我瀏覽到下一頁然後單擊後退按鈕後,所有動態創建的元素在使用Chrome和IE時都會消失。
但是,在Firefox和Safari中,元素仍保留在頁面上。
如何讓Chrome和IE顯示與Firefox和Safari相同的行爲?
感謝
我正在開發一個頁面,它大量使用jQuery在頁面上動態創建元素。後退按鈕會影響由jquery動態創建的元素
當我瀏覽到下一頁然後單擊後退按鈕後,所有動態創建的元素在使用Chrome和IE時都會消失。
但是,在Firefox和Safari中,元素仍保留在頁面上。
如何讓Chrome和IE顯示與Firefox和Safari相同的行爲?
感謝
這裏有一個簡單的作弊:
抓住你的頁面的innerHTML並將其分配給window.name
。加載頁面時,請檢查您的數據是否在window.name
。如果是,將其複製回DOM
我最後做了什麼實際上是使用頁面中的AJAX調用來從Session中獲取項目,並使用jQuery自己重新創建項目。
通過設置window.sessionStorage來存儲元素的內容,我可以在從返回按鈕返回(使用Firefox)返回後恢復一些HTML。
這個例子類似:
<script>
if (sessionStorage.getItem("sessionHtml") != null) {
$('#sessionContent').html(sessionStorage.getItem("sessionHtml"));
}
window.onbeforeunload = function (event) {
$('#sessionContent').html('Data that's restored when you come back');
sessionStorage.setItem("sessionHtml", $('#sessionContent').html());
}
</script>
<body>
<div id="sessionContent"></div>
</body>
重要:此方法不能當用戶瀏覽或刷新頁面區分。並且一旦sessionHtml中存儲了一些內容,實際上會抑制頁面被新數據刷新的能力。如果你的網頁是動態的,這可能不是什麼大不了的事。
也許有人在那裏可能會更好地理解如何實現一個好的獨立於瀏覽器的方法來確定事件是刷新還是返回導航?
也許你可以添加一些代碼或指向一個示例頁面? –
看起來像Firefox和Safari重新創建頁面時完全沒有重新分析HTML,而Chrome和IE重新分析HTML(實際上創建了一個全新的頁面)。 – FloatLeft
我最後做了什麼實際上是使用頁面中的AJAX調用來獲取Session中的項目,並使用jQuery自己重新創建項目 – FloatLeft