flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScript 右クリックのメニュー表示のコンテンツ作成

右クリック本来のコンテンツを含めつつ作成するのが親切

前回の内容で一通り、右クリックからのメニュー選択までが可能となりましたが

ただアラートが出るだけでは閲覧者にとっては邪魔なだけです。

そこで右クリックのメニューを補充してみました

  • 戻る
  • 進む
  • 更新
  • 閉じる
  • ソース表示
  • 印刷

まず代表的なものを組み込んだあとに

はてなアンテナはてなブックマーク追加のオリジナルコンテンツも追加してみようと思います。

 

戻る

history.back();

進む

history.forward();

更新

location.reload();

閉じる

window.close();

ソース表示

window.open("view-source:" + document.URL);

印刷

window.print();

 

各ソースはこのようになります。

戻ると進むはhistoryオブジェクト更新はlocationで行いウインドウのクローズはwindow.closeで行います。

ただしウインドウを閉じる動作に関しては、ほとんどのブラウザでは動作しないことがあります。

 

ソース表示にはview-sourceプロトコルを使いますFirefoxChromeで動作します。

IE9とOperaでは動作はしません

 

印刷には予めJavaScriptで用意されているものがあるのでそれを使用します。

Demo

http://yatagarasu0495.web.fc2.com/javascript/blog/clickmenu/03.html

demoサイトでは別途にCSSも適応しています。

CSSと独自の右クリックメニューにより本来の右クリックを超えるメニューが作れるのではないでしょうか