onpageshow属性の「意外な使い道」について

こんにちは。ロケッツ4号機です。
さいきん、知人の影響で落語にハマり始めました。
桂米朝「たちぎれ線香」のオチ(サゲ)の鋭さ、圧巻です。

さて今回は「onpageshow」属性についてご紹介。
この「onpageshow」はふだんあまり仕様頻度の少ない属性なので
「存在は知ってたけど実際に使ったことはない」という方も多いはず。
今回この「onpageshow」属性の概要と使い方、そしてとっておきの「意外な使い道」までコソッとご紹介。

onpageshow属性とは
onpageshowとonloadとの違い
onpageshowの使い方
おまけ(本題)
さいごに

onpageshow属性とは

「onpageshow」属性とは「ページ表示時に実行されるスクリプトを定義する属性」のことです。
生来カンの鋭いみなさまならピンと来られたかと思いますが、JavaScriptのイベント「pageshow」とほぼ同じですね。

window.addEventListener('pageshow', function() {
  console.log('pageshow');
});

このJSイベント「pageshow」と同等の働きを「onpageshow」属性が実現してくれます。

<body onpageshow="console.log('onpageshow')">

「onpageshow」はbodyタグの属性として付与し、そのままスクリプトを書いたり関数を放り込んだりして使用します。
ここに定義されたスクリプトは、ページ表示時に動作します。使い道は様々ですが、たとえばよく見られるのが「ブラウザバックを検知してなんらかの仕掛けを行いたい」といった、わりとニッチなニーズでこの「onpageshow」が使用されることが多いようです。

onpageshowとonloadとの違い

もしかするとみなさんは「onpageshow」に似たイベントに「onload」を思い浮かべたかもしれません。「onpageshow」も「onload」も、どちらもページ表示時に発火するものですが、若干機能が異なります。

「onload」は「ページ読み込み(load)後に処理」を行います。
対して「onpageshow」は「ページ表示(show)後に処理」を行います。
つまり「onpageshow」は「ブラウザバックなどによる表示(キャッシュ/ページの再解析を行わない)において処理」を行ってくれます。「onload」はブラウザバックでは挙動しないため、先にも記したように「ブラウザバックを検知してなんらかの仕掛けを行いたい」といった際に「onpageshow」が役立つのです。

onpageshowの使い方

ここでbodyタグの属性としての「onpageshow」の使い方をご紹介します。
まず、先にも記したこちら。

<body onpageshow="console.log('onpageshow')">

コンソールに「onpageshow」と表示されるはずです。

つぎにこちら。

<body onpageshow="let now=now Date();console.log(now);">

こちらはコンソールに現在の時刻が表示されるはずです。

<body onpageshow="kannsuu();">
<script>
let kannsuu = function(){
  console.log('onpageshow');
};
</script>

こんな使い方もできます。

つまり、ふつーにJavaScriptを動かすことができるのです。

おまけ(本題)

正直ここまで読み進めたアナタは「いや、onpageshowとかいつ使うんだよ」「onloadで大体事足りるわ」「ってかbodyタグの属性で使うシーンなさすぎだろ」などといった不満を垂れているはずです。
たしかにJSのイベントとして使用するならまだしも、bodyタグの属性として使用するシーンはなっかなかのニッチかもしれません。
しかし、ことECを生業とするコーダーに関しては、その範疇ではありません。

以前、このような記事を書かせて頂きました。
【ムリゲー】楽天RMS「ヘッダー・フッター・レフトナビ」にscriptタグを入れたい！
この記事でわたしは楽天RMS「ヘッダー・フッター・レフトナビ」にscriptタグを入れることで、PC表示時の楽天カテゴリページおよび商品ページでJavaScriptをなんとか動かせられないかと模索したものの、どうあがいても無理という結論に至りました。

ここからは推測してください。。
bodyタグの「onpageshow」には、意外な使い道があるのです。