在按下返回按钮时强制Firefox重新加载页面

Question

在按下返回按钮时强制Firefox重新加载页面

21

当用户按下后退按钮时，如何使Firefox重新运行javascript并重新加载整个页面？我能够在所有浏览器中实现这一点，除了Firefox，通过添加以下代码来自于另一个SO问题的帮助：

history.navigationMode = 'compatible';
$("body").unload(function(){})

同时还要添加一个iFrame... 但在Firefox中这不起作用。有什么解决办法吗？

- Lance

8个回答

8

在我的情况下，最终用户将其新数据发布到服务器后，他将被重定向到另一个页面。但是当最终用户按下返回按钮时，表单将填充旧数据。因此，需要重新加载页面。

我为Firefox和Google Chrome分别设计了解决方法，它们具有不同的缓存页面显示行为。

通过这样做，可以防止Firefox缓存页面，而返回按钮将从服务器获取页面。

window.onunload = function(){};

但 Google Chrome 使用另一种方式，上述解决方案对我无效。因此，我为 Chrome 做了另一个解决方法。我为表单设置了一个标志，将其标记为脏的。

在加载任何内容之前，在 <head> 的顶部，我检查 cookie。

if(document.cookie.match(/my-form=dirty/)) {
  document.cookie = "my-form=; expires=-1; path="+document.location.pathname;
  window.location.reload();
}

借助 jQuery，当用户修改内容时我会写入 cookie。

$(document).load(function(){
  $(':input').change(function(){
    document.cookie = "my-form=dirty; expires=86400000; path="+document.location.pathname;
  })
})

需要注意的是：

- Fabio Montefuscolo

window.onunload=function() {} 在我使用Angular时有效。添加先前答案中提到的meta标签无效。 - eeejay

5

这个解决方案对我很有效（而且我认为比其他建议的解决方案更简单）：

    $(window).bind('pageshow', function() {
        // This event is called only by FireFox. Because Firefox doesn't reload the page when the user uses the back button,
        // or when we call history.go.back(), we need to force the reload for the applicatino to work similar to Chrome and IE (11 at least).

        // Doc: https://developer.mozilla.org/en-US/docs/Listening_to_events_in_Firefox_extensions
        location.reload();
    });

如果当前使用的浏览器是FireFox，我会在每次页面加载时调用这段代码。（要查找当前运行的浏览器是否为Firefox，请参见此处）。

- Yngvar Kristiansen

抱歉，但这是一个循环。你的想法是什么？ - Yevgen

3

供参考，navigationMode属性只适用于Opera浏览器，因为IE和Webkit浏览器已经具有提问者想要的行为。

IE和Webkit执行的是Opera所称的“兼容”导航。Firefox执行的是Opera所称的“快速”导航。但只有在Opera中，这种行为才是可以控制的。

- brothercake

1

将此代码添加到您的文件中。在测试之前先清除缓存。

<?php
 header("Cache-Control: private, no-store, max-age=0, no-cache, must-revalidate, post-check=0, pre-check=0");
 header("Pragma: no-cache");
 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
?>

在JavaScript中添加标题，请阅读此内容。

https://developer.mozilla.org/en-US/docs/Web/API/Headers/append

- khan

0

对我来说，这些都没有起作用。我通过检查cookies来实现 - 我在页面的头部导入jsp（源代码如下），然后在“.”中调用refreshOnBack。

<%@ page import="java.util.UUID" %>
<script>
    var REFRESH_PAGE_COOKIE_NAME="refreshPage_";
    var PAGE_REFRESH_GUID = "<%out.print(UUID.randomUUID().toString());%>";  
    /* To force refresh of page when user or javascript clicks "back",
     * put call to this method in body onload function - NOT THROUGH JQUERY 
     * as jquery onload is not called on history back.
     * In must be done via <BODY onload="...">
     */
    function refreshOnBack(){
        //Alghoritm uses cookies to check if page was already loaded.
        //Cookies expiration time is not set - will be gone after browser restart.
        //Alghoritm:
        //is cookie set? 
        // -YES - reload;
        // -NO - set it up;
        //Cookie contains unique guid in name so that when page is regenerated - it will not reload.
        var cookieName = REFRESH_PAGE_COOKIE_NAME + PAGE_REFRESH_GUID; 
        if(getCookie(cookieName)=="Y"){
            window.location.reload();
        } else {
            setCookie(cookieName,"Y");
        }
    }   
</script>

- Marcin Junger

你怎么称呼refreshOnBack？ - Christian Vielma

0

我认为你想要的答案在这里：https://dev59.com/03VD5IYBdhLWcg3wNY1Z#5493543

简而言之：使用HTTPS + 服务器发送头部 Cache-Control: must-revalidate + 过去设置的 Expires 头部应该可以解决问题。以下是一个 PHP 实现示例：

<?php

$expires = gmdate( 'D, d M Y H:i:s', time() - 1 );

header( 'Cache-Control: must-revalidate' );
header( "Expires: {$expires} GMT" );

?>
<!DOCTYPE html>
<html>
    <head>
        <title>Auto-reloading page</title>
    </head>
    <body>
        <p>The current day is <?php echo date( 'd, F Y'); ?> and the time is <?php echo date('H:i:s'); ?>.</p>
        <p><a href="http://google.com">Click away</a></p>
    </body>
</html>

- Aaron Gustafson

0

如果你使用的是C# .Net，你可以在页面加载或初始化事件中以编程方式处理它。

Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetValidUntilExpires(false);
Response.Cache.VaryByParams["*"] = true;

更多信息，请查看 MSDN 上的 Response.Cache： http://msdn.microsoft.com/zh-cn/library/system.web.httpresponse.cache(v=vs.110).aspx

- Pseudyx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jknair · Accepted Answer

将此代码添加到 HEAD 标签之间

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">