blocks|key|686158|text|您可以使用锚点，并查看文档的位置href的值；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|686159|从http://acme.co/开始，在位置后面加上一些东西，比如'#b'；|offset|length|style|CODE|686160|所以，现在你的网址是http://acme.co/#b，当一个人点击后退按钮时，它返回到http://acme.co，间隔检查函数发现缺少我们设置的散列标记，清除间隔，并加载附加了时间戳的引用网址。|686161|有一些副作用，但我会让你自己解决这些问题;)|686162|<script>
document.location.hash+=+"#b";
var+referrer+=+document.referrer;

//+setup+an+interval+to+watch+for+the+removal+of+the+hash+tag
var+hashcheck+=+setInterval(function(){
++++if(document.location.hash!="#b")+{

++++//+clear+the+interval
++++clearInterval(hashCheck);

++++var+ticks+=+new+Date().getTime();
++++//+load+the+referring+page+with+a+timestamp+at+the+end+to+avoid+caching
++++document.location.href.replace(referrer%2B'?'%2Bticks);
++++}
},100);
</script>|code-block|syntax|javascript|686163|这是未经测试的，但它应该工作在最小的调整。|686164|entityMap^0|0|1|F|0|A|H|18|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

You can use an anchor, and watch the value of the document's location href;

Start off with <code>http://acme.co/</code>, append something to the location, like '#b';

So, now your URL is <code>http://acme.co/#b</code>, when a person hits the back button, it goes back to <code>http://acme.co</code>, and the interval check function sees the lack of the hash tag we set, clears the interval, and loads the referring URL with a time-stamp appended to it.

There are some side-effects, but I'll leave you to figure those out ;)

<pre><code>&lt;script&gt;
document.location.hash = "#b";
var referrer = document.referrer;

// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
 if(document.location.hash!="#b") {

 // clear the interval
 clearInterval(hashCheck);

 var ticks = new Date().getTime();
 // load the referring page with a timestamp at the end to avoid caching
 document.location.href.replace(referrer+'?'+ticks);
 }
},100);
&lt;/script&gt;
</code></pre>

This is untested but it should work with minimal tweaking.

blocks|key|470131|text|您的问题是由back-forward+cache引起的。当用户导航离开时，它应该保存页面的完整状态。当用户使用后退按钮返回时，页面可以非常快地从缓存中加载。这与普通的缓存不同，后者只缓存HTML代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|470132|为bfcache加载页面时，不会触发onload事件。相反，您可以检查onpageshow事件的persisted属性。它在初始页面加载时设置为false。当页面从bfcache加载时，它被设置为true。|style|CODE|470133|Kludgish的解决方案是在页面从bfcache加载时强制重新加载。|470134|window.onpageshow+=+function(event)+{
++++if+(event.persisted)+{
++++++++window.location.reload()+
++++}
};|code-block|syntax|javascript|470135|如果您使用的是jQuery，请执行以下操作：|470136|$(window).bind("pageshow",+function(event)+{
++++if+(event.originalEvent.persisted)+{
++++++++window.location.reload()+
++++}
});|470137|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching^0|6|I|0|0|I|6|Z|A|1C|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@$A|15|B|16|F|G]|$A|17|B|18|F|G]|$A|19|B|1A|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1C|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1E|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

Your problem is caused by <a href="https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching">back-forward cache</a>. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.

When page is loaded for bfcache <code>onload</code> event wont be triggered. Instead you can check the <code>persisted</code> property of the <code>onpageshow</code> event. It is set to false on initial page load. When page is loaded from bfcache it is set to true. 

Kludgish solution is to force a reload when page is loaded from bfcache.

<pre><code>window.onpageshow = function(event) {
 if (event.persisted) {
 window.location.reload() 
 }
};
</code></pre>

If you are using jQuery then do:

<pre><code>$(window).bind("pageshow", function(event) {
 if (event.originalEvent.persisted) {
 window.location.reload() 
 }
});
</code></pre>

blocks|key|470173|text|该行为与Safari的后退/前进缓存有关。你可以在苹果的相关文档中了解到它：http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|470174|苹果自己的修复建议是在你的页面上添加一个空的iframe：|470175|<iframe+style="height:0px;width:0px;visibility:hidden"+src="about:blank">
++++this+frame+prevents+back+forward+cache
</iframe>|code-block|syntax|javascript|470176|(之前公认的答案似乎也是有效的，只是想加入文档和另一个潜在的修复程序)|470177|entityMap|0|LINK|mutability|MUTABLE|url|http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5^0|12|2T|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

The behavior is related to Safari's Back/Forward cache. You can learn about it on the relevant Apple documentation: <a href="http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5" rel="nofollow">http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5</a>

Apple's own fix suggestion is to add an empty iframe on your page:

<pre><code>&lt;iframe style="height:0px;width:0px;visibility:hidden" src="about:blank"&gt;
 this frame prevents back forward cache
&lt;/iframe&gt;
</code></pre>

(The previous accepted answer seems valid too, just wanted to chip in documentation and another potential fix)

blocks|key|470203|text|首先，在代码中插入字段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|470204|<input+id="reloadValue"+type="hidden"+name="reloadValue"+value=""+/>|code-block|syntax|javascript|470205|然后运行jQuery：|470206|jQuery(document).ready(function()
{
++++++++var+d+=+new+Date();
++++++++d+=+d.getTime();
++++++++if+(jQuery('#reloadValue').val().length+==+0)
++++++++{
++++++++++++++++jQuery('#reloadValue').val(d);
++++++++++++++++jQuery('body').show();
++++++++}
++++++++else
++++++++{
++++++++++++++++jQuery('#reloadValue').val('');
++++++++++++++++location.reload();
++++++++}
});|470207|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

First of all insert field in your code:

<pre><code>&lt;input id="reloadValue" type="hidden" name="reloadValue" value="" /&gt;
</code></pre>

then run jQuery:

<pre><code>jQuery(document).ready(function()
{
 var d = new Date();
 d = d.getTime();
 if (jQuery('#reloadValue').val().length == 0)
 {
 jQuery('#reloadValue').val(d);
 jQuery('body').show();
 }
 else
 {
 jQuery('#reloadValue').val('');
 location.reload();
 }
});
</code></pre>

blocks|key|470242|text|所有这些答案都有些曲解。在现代浏览器(safari)中，仅在onpageshow解决方案上工作，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|470243|window.onpageshow+=+function+(event)+{
++++if+(event.persisted)+{
++++++++window.location.reload();
++++}
};|code-block|syntax|javascript|470244|但在速度较慢的设备上，有时您会在重新加载之前看到前一个缓存视图的瞬间。处理这个问题的正确方法是在服务器上正确地设置Cache-Control来响应下面的一个|470245|'Cache-Control',+'no-cache,+max-age=0,+must-revalidate,+no-store'|470246|entityMap^0|U|A|0|0|0|0|1T|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

All of those answer are a bit of the hack. In modern browsers (safari) only on <code>onpageshow</code> solution work, 

<pre><code>window.onpageshow = function (event) {
 if (event.persisted) {
 window.location.reload();
 }
};
</code></pre>

but on slow devices sometimes you will see for a split second previous cached view before it will be reloaded. Proper way to deal with this problem is to set properly Cache-Control on the server response to one bellow

<code>'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'</code>

blocks|key|686394|text|我有同样的问题，使用3个不同的锚点链接到下一页。当从下一页返回并选择不同的锚点时，链接没有改变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|686395|所以我有|686396|<a+href="https://www.example.com/page-name/#house=house1">House+1</a>
<a+href="https://www.example.com/page-name/#house=house2">View+House+2</a>
<a+href="https://www.example.com/page-name/#house=house3">View+House+3</a>|code-block|syntax|javascript|686397|更改为|686398|<a+href="/page-name#house=house1">House+1</a>
<a+href="/page-name#house=house2">View+House+2</a>
<a+href="/page-name#house=house3">View+House+3</a>|686399|也用于安全：|686400|//+Javascript
window.onpageshow+=+function(event)+{
++++if+(event.persisted)+{
++++++++window.location.reload()+
++++}
};

//+JQuery
$(window).bind("pageshow",+function(event)+{
++++if+(event.originalEvent.persisted)+{
++++++++window.location.reload()+
++++}
});|686401|在网上找到的卸载、重新加载和重新加载(True)的解决方案中，没有一个是不起作用的。希望这对有同样情况的人有所帮助。|686402|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I had the same issue with using 3 different anchor links to the next page. When coming back from the next page and choosing a different anchor the link did not change.
so I had
<pre><code>&lt;a href=&quot;https://www.example.com/page-name/#house=house1&quot;&gt;House 1&lt;/a&gt;
&lt;a href=&quot;https://www.example.com/page-name/#house=house2&quot;&gt;View House 2&lt;/a&gt;
&lt;a href=&quot;https://www.example.com/page-name/#house=house3&quot;&gt;View House 3&lt;/a&gt;
</code></pre>
Changed to
<pre><code>&lt;a href=&quot;/page-name#house=house1&quot;&gt;House 1&lt;/a&gt;
&lt;a href=&quot;/page-name#house=house2&quot;&gt;View House 2&lt;/a&gt;
&lt;a href=&quot;/page-name#house=house3&quot;&gt;View House 3&lt;/a&gt;
</code></pre>
Also used for safety:
<pre><code>// Javascript
window.onpageshow = function(event) {
 if (event.persisted) {
 window.location.reload() 
 }
};

// JQuery
$(window).bind(&quot;pageshow&quot;, function(event) {
 if (event.originalEvent.persisted) {
 window.location.reload() 
 }
});
</code></pre>
None of the solutions found online to unload, reload and reload(true) singularily didn't work. Hope this helps someone with the same situation.

Got an issue with safari loading old youtube videos when back button is clicked. I have tried adding onunload="" (mentioned here <a href="https://stackoverflow.com/questions/5297122/preventing-cache-on-back-button-in-safari-5">Preventing cache on back-button in Safari 5</a>) to the body tag but it doesn't work in this case.

Is there any way to prevent safari loading from cache on a certain page?

Prevent safari loading from cache when back button is clicked

服务器

jQuery

当单击后退按钮时，safari加载旧的youtube视频时出现问题。我尝试将onunload="“(这里提到的)添加到body标记中，但在本例中不起作用。有没有办法防止从某个页面上的缓存加载safari？

问当单击“后退”按钮时，防止从缓存加载safari
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当单击“后退”按钮时，防止从缓存加载safariEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当单击“后退”按钮时，防止从缓存加载safari
EN