Question

我正在构建一个用户可以编辑对象的页面，通过React组件^{_{（问题不直接涉及React，不需要此框架中的专业知识）}} 。为了性能和简单性，初始对象存储在发送给用户的HTML中的JSON中，并且每个React组件都使用此对象进行初始化。

<html>
<head>
    <script>var OBJ = {'foo': 'bar', 'foo2': 'baz'};</script>

    <body>...

        <script src="my_react_components.jsx"></script>
    </body>
</html>

每个组件都加载到$(document).ready()中，并且在第一次访问页面时一切正常。但是，在Chrome上进行测试时，我发现了一种奇怪的行为。通过以下步骤：

加载页面
通过React组件编辑对象的属性（在我的应用程序中：单击它，打开一个表单，然后在验证时发送一个AJAX请求。在内部，OBJ现在等于{'foo': 'new_bar', 'foo2': 'baz'}例如）
修改页面以考虑新的属性值
点击任何重定向到其他页面的链接
点击按钮

用户返回第一页但是使用了初始属性，这可能令人困惑（“哼，我之前更新了这个值”）。这仅在Chrome上发生。 Firefox和IE 10似乎工作正常，显示用户在离开页面之前的最后一个HTML视图。

我认为BFCache implemented in Firefox可能与Chrome中的不同（保留HTML但重放Javascript）。的确，如果我尝试这样的事情：

<!DOCTYPE html>
<html>
<body>
    <a href="https://stackoverflow.com">Click</a>
    <script>console.log('test');</script>
</body>
</html>

如果我们来自后退按钮而不是Firefox中，

test会显示在Chrome控制台中...

我该如何解决这个问题？我不知道它是否相关，但是Chromium have an open issue for 2 years more of less related。

Chrome上的后退按钮可以重新解释Javascript但不会在Firefox / IE

0 个答案: