2012-07-19 69 views
0

我正在開發一個使用JavaScript進行樣式設計的表單,用於提交很多不同的東西。然而,大多數情況下,不同的東西只會略有不同,所以如果您在瀏覽器上按下按鈕,表格就與您在提交表格之前完全一樣。瀏覽器是否可以緩存Javascript/DOM更改?

注意:這是用普通的HTML/Javascript的範圍較小,在已經工作的,我要問的問題是我如何使用JavaScript來隱藏時保留這個功能/更換輸入字段等

我已經試過History.js和HTML5的replaceState(),但似乎沒有任何工作。此外,如果它有幫助,這將是一個私人網站,需要安裝最新的瀏覽器,所以不要猶豫建議僅在最新瀏覽器版本中提供的解決方案。

非常感謝!

更新#1:這裏有更好的解釋什麼,我需要的圖像。

image

更新#2:好我設法完美破解它,跨瀏覽器包括在內。我在明天睡了之後會發佈一個解決方案。

+0

不能使用該URL的末尾#(#yourUrl.html fake1)當您提交的Ajax,使他們真的走「回」到他們提交之前他們有同樣的東西,以創造一個歷史記錄? – jeschafe 2012-07-19 22:59:01

+0

對不起!意思是說我使用Javascript進行表單造型,而不是AJAX提交哈哈!更新。 – xLite 2012-07-19 23:00:34

+0

http://simsalabim.github.com/sisyphus/? – rjz 2012-07-19 23:03:21

回答

1

好吧,我回到了繪圖板上,試圖用我已經知道存在的工具找出一些東西。每種瀏覽器(通常情況下,沒有測試任何非主流瀏覽器)的情況是,當你提交表單後按後退按鈕,文本輸入字段通常填充。我想看看這是否與隱藏的輸入字段一樣,事實證明它確實如此!

所以下次我設置一些JavaScript事件聽出來的頁面加載。

if($.browser.mozilla) 
{ 
    $(window).on('pageshow', pageManager.init); 
} 
else 
{ 
    $(pageManager.init); 
} 

這適用於Chrome,Firefox和IE9。我還沒有測試任何其他瀏覽器,但這些是唯一的瀏覽器,將用於我的私人網站,所以這對我來說已經足夠了。我相信你可以根據你的需求設置你自己的首選解決方案,但這對我來說最適合。

反正上面的代碼意味着每個頁面加載,pageManager.init()將運行時間。下面是我用它來檢查是否已按下回到按鈕的代碼中的一個片段,它不只是簡單地刷新頁面或首次訪問:

if($('input[name="form_submitted"]').val() != '') 
{ 
    // back button was pressed 
} 

正如你所看到的,這是因爲檢查一樣簡單如果你的隱藏表單域包含一個值。要真正保證一個值將被設置,請確保在提交表單時設置:

$('#my-form').submit(function() 
{ 
    $('input[name="form_submitted"]').val('true'); 
} 

它確實如此簡單。這是我能想到的用於確定是否瀏覽器的返回按鈕被按下的最好方法之一。現在,緩存所有的表單值可見域它可以像使用上的字段JSON.stringify(),堅持這一切在你以後解碼一個隱藏字段一樣簡單。

0

AFAIK,這通常是手工處理。也就是說,您使用hashtags或pushState(使用適當的狀態對象),並在散列更改或popstate上抓取散列/狀態,然後(重新)根據需要構建您的DOM。

(注意,我結合了兩種非常不同的場景到一個人也沒有,對不起,如果你只使用哈希值發生變化,你就不太可能使用pushState,作爲pushState根據MDN不會觸發onhashchange