コンサルロケッツ STATION

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

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

  
  
  
  

onpageshow属性とは

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

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

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

  
  
  
  

onpageshowとonloadとの違い

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

  
  
  
  

onpageshowの使い方

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

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

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

こんな使い方もできます。
  
  
つまり、ふつーにJavaScriptを動かすことができるのです。

  
  
  
  

おまけ(本題)

正直ここまで読み進めたアナタは「いや、onpageshowとかいつ使うんだよ」「onloadで大体事足りるわ」「ってかbodyタグの属性で使うシーンなさすぎだろ」などといった不満を垂れているはずです。
たしかにJSのイベントとして使用するならまだしも、bodyタグの属性として使用するシーンはなっかなかのニッチかもしれません。
しかし、ことECを生業とするコーダーに関しては、その範疇ではありません。
  
以前、このような記事を書かせて頂きました。
【ムリゲー】楽天RMS「ヘッダー・フッター・レフトナビ」にscriptタグを入れたい!
この記事でわたしは楽天RMS「ヘッダー・フッター・レフトナビ」にscriptタグを入れることで、PC表示時の楽天カテゴリページおよび商品ページでJavaScriptをなんとか動かせられないかと模索したものの、どうあがいても無理という結論に至りました。
  
ここからは推測してください。。
bodyタグの「onpageshow」には、意外な使い道があるのです。

  
  
  
  

さいごに

いかがでしたか?
なにかに行き詰まらない限り使用しない「onpageshow」という属性。
正直わたしも初見に近いこの属性だったのですが、これからはお世話になりそうな予感。
とはいえ、あまり無茶な使い方をしてしまうと万一の際に対応できなくなるので、ほどほどに。
  
それでは、また!

  
  
  
  

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • サリープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!