2012-07-19 70 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