0

我正在开发一个使用 Javascript 进行样式设置的表单，该表单将用于提交许多不同的内容。然而，在大多数情况下，不同的东西只会略有不同，因此如果当您按下浏览器上的“后退”按钮时，表单与您提交表单之前离开时的表单完全相同，这将真正使用户受益。

注意：这在使用普通的 HTML/Javascript-less 表单时已经有效，我要问的问题是如何在使用 Javascript 隐藏/替换输入字段等时保留此功能。

我已经尝试过History.js和 HTML5 replaceState()，但似乎没有任何效果。此外，如果有帮助，这将是一个需要安装最新浏览器的私人网站，因此请不要犹豫推荐仅在最新浏览器版本中可用的解决方案。

非常感谢！

更新＃1：这是一张更好地解释我需要的图片。

图片

更新#2：好的，我成功破解了它，包括跨浏览器。明天睡觉后我会发布一个解决方案。

4

2 回答 2

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()在字段上使用并将其全部粘贴在稍后解码的隐藏字段中一样简单。

于 2012-07-28T17:50:01.450 回答
0

AFAIK，这通常是手动处理的。也就是说，您使用主题标签或 pushState（带有适当的状态对象），并且在哈希更改或 popstate 上您获取哈希/状态，并根据需要（重新）构建您的 DOM。

（请注意，我在那里将两种非常不同的场景合二为一，抱歉。如果您只使用哈希更改，您可能不会使用pushState，因为根据 MDNpushState不会触发。）onhashchange

于 2012-07-20T01:50:38.803 回答