Help us understand the problem. What is going on with this article?

iOS safari の戻る/進むボタンと bfcache について

More than 3 years have passed since last update.

bfcacheとは

bfcache とは、ざっくり言うとブラウザの戻るボタンや進むボタンを押して画面遷移した時に、onload イベントが発火せず、JavaScript の状態が保存されたキャッシュが呼ばれて表示されることです。
発生条件は色々あるようなので、戻る/進むボタンを使うと必ず起こる現象でもないようです。
bfcache に関して詳しくは下記あたりに目を通したうえで検索してください。

Using Firefox 1.5 caching
Working with BFCache
bfcache について覚えて帰ってもらいます。(転載)

bfcache を無効にする

bfcache を無効にする方法を検索すると、下記のように onunload イベントにフックするだけで回避できるという記述が出てきます。

window.onunload = function() {};

が、iOS safari ではこの方法で回避できません。

iOS safari では下記のように pageshow イベントと、初回ロード時に false がセットされる persisted という真偽値プロパティを使用して、bfcache が使用された場合にリロードなどの処理を入れて回避することになります。

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
  }
};

ただこの方法だと、bfcache が使用された場合に必ずリロードされてしまうので、実際には

  • リロード以外の処理でなんとかする
  • 必要な時だけリロードさせる

などにしたほうが bfcache による体感速度の向上も保ったまま対策ができるので良いかと思います。

参考

javascript - Mobile Safari back button - Stack Overflow

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away