現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ウィンドウ

【JavaScript入門】back・forward・home・print・stop・findの使い方|ブラウザ操作メソッドをわかりやすく解説

投稿日:2019年5月15日 更新日:

JavaScriptのback・forward・home・print・stop・findとは?ブラウザ操作メソッドを初心者向けに解説

JavaScript には、ブラウザの「戻る」「進む」「印刷」など、ツールバーと同じ動作を行うメソッドが用意されています。
ここでは back()forward()home()print()stop()find() の6つをわかりやすく解説します。



back():1つ前のページに戻る

window.back() は、ブラウザ履歴の1つ前のページに戻ります。

window.back();

→ 履歴がない場合は何も起こりません。

forward():1つ先のページに進む

window.forward() は、ブラウザ履歴の1つ先のページに進みます。

window.forward();

→ 進める履歴がない場合は何も起こりません。



home():ホームページに移動

window.home() は、ブラウザに設定されているホームページを表示します。

opener.home();

→ 親ウィンドウ(opener)にホームページを表示します。

※ モダンブラウザではセキュリティ上の理由で動作しない場合があります。

print():印刷ダイアログを開く

window.print() は、印刷ダイアログを表示します。

myPage.print();

→ ウィンドウ myPage の内容を印刷できます。

stop():ページの読み込みを中止

window.stop() は、現在のページ読み込みを停止します。

onClick=”window.stop()”

→ ボタンなどに設定すると、読み込みを強制停止できます。

find():ページ内の文字列を検索

window.find("文字列") は、ページ内から指定した文字列を検索し、該当箇所へスクロールします。

find(“プロパティ”);

→ ページ内の「プロパティ」という文字列を検索します。



注意点

  • back / forward はブラウザ履歴がない場合は動作しない
  • home() はモダンブラウザでは無効化されていることが多い
  • print() は現在も広く利用されている
  • find() はブラウザによって動作が異なる場合がある
  • stop() は読み込み中のページに対してのみ有効

まとめ

  • back():1つ前のページに戻る
  • forward():1つ先のページに進む
  • home():ホームページに移動(非推奨)
  • print():印刷ダイアログを開く
  • stop():ページ読み込みを中止
  • find():ページ内検索を行う

関連リンク

-ウィンドウ
-

執筆者:

関連記事

【JavaScript入門】window.resizeTo・resizeByの使い方|ウィンドウサイズを絶対・相対で変更する方法を解説

JavaScriptのwindow.resizeTo・resizeByとは?ウィンドウサイズを変更する方法を初心者向けに解説 window.resizeTo() と window.resizeBy() …

【JavaScript入門】window.openの使い方|新しいウィンドウやタブを開く方法とオプション設定を解説

JavaScriptのwindow.openとは?新しいウィンドウ(タブ)を開く方法とオプション設定を解説 window.open() は、新しいウィンドウ(またはタブ)を開くためのメソッドです。 表 …

【JavaScript入門】window.scrollの使い方|指定位置へスクロールする方法を初心者向けに解説

JavaScriptのwindow.scrollとは?指定位置へスクロールする方法を初心者向けに解説 window.scroll() は、ページを指定した座標位置までスクロールさせるためのメソッドです …

【JavaScript入門】pageXOffset・pageYOffsetとは?現在のスクロール位置を取得・設定する方法を解説

JavaScriptのpageXOffset・pageYOffsetとは?現在のスクロール位置を取得・設定する方法を解説 pageXOffset と pageYOffset は、ページがどれだけスクロ …

【JavaScript入門】innerWidth・innerHeight・outerWidth・outerHeightの使い方|ウィンドウサイズの取得・設定方法を解説

JavaScriptのinnerWidth・innerHeight・outerWidth・outerHeightとは?ウィンドウサイズの取得・設定方法を解説 innerWidth・innerHeigh …