Javascript 强制 Firefox 在后退按钮上重新加载页面

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3536822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:04:17  来源:igfitidea点击:

Force Firefox to Reload Page on Back Button

javascripthtmlfirefoxcaching

提问by Lance Pollard

How do you make Firefox rerun javascript and reload the entire page when the user presses the back button? I was able to do this in all browsers except Firefox from the help of another SO question by adding this code:

当用户按下后退按钮时,如何让 Firefox 重新运行 javascript 并重新加载整个页面?通过添加以下代码,我能够在另一个 SO 问题的帮助下在除 Firefox 之外的所有浏览器中执行此操作:

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

And also adding an iFrame... But this doesn't work in Firefox. Is there anything to do?

并且还添加了一个 iFrame ......但这在 Firefox 中不起作用。有什么可做的吗?

采纳答案by jknair

add this between your HEAD tags

在你的 HEAD 标签之间添加这个

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

回答by Fabio Montefuscolo

In my case, after the final user Post his new data to server, he is redirected to another page. But when the final user press the back button, the form is pre-populated with the old data. So, reload page is needed.

就我而言,在最终用户将他的新数据发布到服务器后,他被重定向到另一个页面。但是当最终用户按下后退按钮时,表单会预先填充旧数据。因此,需要重新加载页面。

I did a workaround for Firefox and another for Google Chrome. They have different behavior to show cached pages.

我为 Firefox 和 Google Chrome 做了一个解决方法。它们有不同的行为来显示缓存页面。

Doing this will prevent Firefox to cache the page and the back button will bring the page from server.

这样做将阻止 Firefox 缓存页面,后退按钮将从服务器中获取页面。

window.onunload = function(){};

But Google Chrome do it in another way and the solution above did not work for me. So I did another workaround for Chrome. I did a flag that mark the form as dirty.

但是谷歌浏览器以另一种方式做到了,上面的解决方案对我不起作用。所以我为 Chrome 做了另一个解决方法。我做了一个标志,将表格标记为脏。

At the top of <head>, before load anything, I check the cookie

在顶部<head>,在加载任何东西之前,我检查了 cookie

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

With a help of jQuery, I write the cookie when user modify something

在 jQuery 的帮助下,我在用户修改某些内容时编写了 cookie

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

Good to know:

很高兴知道:

回答by Yngvar Kristiansen

This solution worked for me (and I believe is a bit simpler than other solutions suggested):

这个解决方案对我有用(我相信比建议的其他解决方案更简单):

    $(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();
    }); 

I call this code on every page load, if the browser is FireFox. (To find out if the currently running browser is Firefox, see here).

如果浏览器是 FireFox,我会在每次加载页面时调用此代码。(要了解当前运行的浏览器是否为 Firefox,请参见此处)。

回答by brothercake

For reference, that navigationMode property only applies to Opera, it's just that IE and the Webkit browsers already have the behavior the questioner wanted.

作为参考,该 navigationMode 属性仅适用于 Opera,只是 IE 和 Webkit 浏览器已经具有提问者想要的行为。

IE and Webkit do what Opera would call "compatible" navigation. Firefox does what Opera would call "fast" navigation. But it's only in Opera that this behavior is actually controllable.

IE 和 Webkit 执行 Opera 所谓的“兼容”导航。Firefox 执行 Opera 所谓的“快速”导航。但只有在 Opera 中,这种行为才是真正可控的。

回答by Marcin Junger

None of this worked for me. I do it via cookies checking - I import jsp (source below) in head part of page, and then I call refreshOnBack in .

这些都不适合我。我通过 cookie 检查来做到这一点 - 我在页面的头部导入 jsp(源代码如下),然后在 .

<%@ 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>

回答by khan

Add this to you file. Clean your cache first before testing.

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

<?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");
?>

to add headers in javascript please read this.

要在 javascript 中添加标题,请阅读此内容。

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

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

回答by Aaron Gustafson

I think the answer you might want is here: https://stackoverflow.com/a/5493543/1475148

我想你可能想要的答案在这里:https: //stackoverflow.com/a/5493543/1475148

TLDR: HTTPS + Cache-Control: must-revalidateas a server-sent header + Expiresheader set in the past should make it work. Here's a sample PHP implementation:

TLDR: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>

回答by Pseudyx

If your using c# .Net, you can handle it on the page load or init event programmatically

如果您使用 c# .Net,您可以在页面加载或 init 事件中以编程方式处理它

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

For more info, check out Response.Cache at MSDN: http://msdn.microsoft.com/en-us/library/system.web.httpresponse.cache(v=vs.110).aspx

有关详细信息,请查看 MSDN 上的 Response.Cache:http: //msdn.microsoft.com/en-us/library/system.web.httpresponse.cache(v= vs.110).aspx