Safari下禁止读取缓存的解决方案

相信很多人都遇到了safari浏览器的缓存问题。Safari默认会缓存页面的完整状态，当由A页面进入到B页面后，然后点击浏览器的后退按钮退回A页面，这会后safari会直接从cache中读取页面。在绝大多数情况下，这种行为是有很好的用户体验的，但是在某些情况下，我们不希望浏览器读取缓存的页面，比如一些银行，金融，支付系统，需要实时的读取数据。那么如何解决这个问题呢？

一种最常见的方式，就是在响应头中加入一些内容，PHP代码如下：

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0

加上上面这些header，可以让页面在大多数浏览器中都不缓存。但还是有个问题，上面的代码对safari的前进和后退不起作用，safari还是会在缓存里面读取数据。要做到完全禁止，根据官方的Safari Developer FAQ，还需要在页面中加上一个iframe。加上iframe后的页面，safari永远不缓存。

<iframe style=”height:0px;width:0px;visibility:hidden” src=”about:blank”>
    this frame prevents back forward cache
</iframe>

网上很多人都推荐这个方法，但是尝试之后不管用。最后在stackoverflow上看到一种还算不错的方案，通过javascript去强制页面reload。我对这个方法做了一点强化，任何页面如果不需要缓存，可以在body元素上加上no-cache这个class，那么下面的方法都会让页面强制重刷。

if (isSafari()) {
    $(window).bind("pageshow", function (event) {
        if (event.originalEvent.persisted && $('body').hasClass("no-cache")) {
            document.body.style.display = "none";
            window.location.reload();
        }
    });
}

function isSafari() {
    if (navigator.userAgent.indexOf("Safari") > -1) {
        return true;
    }
    return false;
}

如果有更好的方式，请指教！