简体   繁体   English

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

[英]Force Firefox to Reload Page on Back Button

How do you make Firefox rerun javascript and reload the entire page when the user presses the back button? 当用户按下后退按钮时,如何让Firefox重新运行javascript并重新加载整个页面? I was able to do this in all browsers except Firefox from the help of another SO question by adding this code: 通过添加此代码,我可以在除了Firefox之外的所有浏览器中通过另一个SO问题的帮助来执行此操作:

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

And also adding an iFrame... But this doesn't work in Firefox. 并且还添加了iFrame ...但这在Firefox中不起作用。 Is there anything to do? 有什么事可做吗?

add this between your HEAD tags 在HEAD标签之间添加此项

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

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. 我为Firefox做了一个解决方法,为谷歌Chrome做了另一个解决方法。 They have different behavior to show cached pages. 它们具有显示缓存页面的不同行为。

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. 但谷歌Chrome以另一种方式做到这一点,上面的解决方案对我不起作用。 So I did another workaround for Chrome. 所以我为Chrome做了另一个解决方法。 I did a flag that mark the form as dirty. 我做了一个标志,表格形状很脏。

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: 很高兴知道:

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. 如果浏览器是FireFox,我会在每个页面加载时调用此代码。 (To find out if the currently running browser is Firefox, see here ). (要了解当前运行的浏览器是否为Firefox,请参阅此处 )。

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. IE和Webkit做Opera所谓的“兼容”导航。 Firefox does what Opera would call "fast" navigation. Firefox做了Opera所谓的“快速”导航。 But it's only in Opera that this behavior is actually controllable. 但只有在Opera中,这种行为实际上是可控制的。

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(源代码如下),然后我调用了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>

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-revalidate as a server-sent header + Expires header set in the past should make it work. TLDR:HTTPS + Cache-Control: must-revalidate为服务器发送的标头+过去设置的Expires标头应使其正常工作。 Here's a sample PHP implementation: 这是一个示例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>

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM