ブラウザ操作メソッドの使い方｜戻る・印刷【JavaScript入門】

本記事にはプロモーション（アフィリエイト広告）を含みます。

この記事は、2026年10月時点のMDN Web DocsおよびWHATWG HTML Standardに基づいています。対象はChrome・Edge・Firefox・Safariの最新版です。ブラウザは継続的に更新され、記事で扱う機能ごとに対応する版も異なるため、版番号は固定せず、利用中の版に応じた確認方法を説明します。

JavaScriptから、前のページに戻ったり、印刷画面を開いたりできるのか迷っていませんか。この記事では、使える機能と、名前が似ていても共通の方法として使えない機能を分けて説明します。

まずは、JavaScriptの上位ガイドで学習の順番を確認できます。ウィンドウ操作を体系的に学びたい方は、JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイドも参考にしてください。

この記事では、戻る・進むの仕組みを先に説明してから、ボタンの例を紹介します。

最初に結論：6つの機能の使える範囲

戻る・進むには、ブラウザが記録しているページの履歴を使います。印刷画面を開く機能や、ページの読み込みを止める機能もあります。一方、ホーム画面への移動やページ内検索は、共通の方法として使えるとは限りません。

メソッドは、ある機能を呼び出すための書き方です。ここでは、ブラウザに戻る・進むなどの処理を頼む命令を指します。

まず、できることと注意点を機能名で確認しましょう。具体的な命令の名前は、それぞれの説明で紹介します。

標準の機能とは、公開された共通の決まりに沿って使える機能のことです。機能によってブラウザや版で違いがあるため、利用する環境に合わせて公式資料を確認してください。

戻る・進むには履歴の機能を使う

ブラウザの履歴は、これまでに開いたページを前後にたどるための記録です。ページの場所はURLで表されます。

history.back()は履歴の1つ前へ、history.forward()は履歴の1つ先へ移動します。ここでのhistoryは、ページの履歴を扱うための名前です。

戻る先や進む先の履歴がない場合、呼び出しても移動先はありません。たとえば、最初に開いたページでは、前のページが記録されていないことがあります。

履歴を使ったページ移動が、別のページを埋め込んだ場合にどう関係するかは、【JavaScript入門】iframeの履歴操作（history.back）の仕組み｜親ウィンドウとの違い・注意点を初心者向けに解説で確認できます。

ボタンで戻る・進むを試すコード

次の例は、戻る・進むのボタンと印刷ボタンを備えたHTMLファイルです。HTMLは、見出しや文章、ボタンなど、ホームページの内容を組み立てるための書き方です。

試すには、パソコン、文字を入力してファイルを保存できるアプリ、ブラウザが必要です。同じタブでページを移動できる環境を前提にしています。

対象はChrome・Edge・Firefox・Safariの最新版です。特定の版番号を一律に示すのではなく、利用中のブラウザの版を確認し、機能ごとの対応状況を公式資料で調べてから試してください。確認手順は「ブラウザごとの違いと公式資料」で説明します。

1. 次のコードをすべてコピーします。コードは、コンピューターにしてほしいことを決まった書き方で並べた指示です。

2. 文字を入力して保存できるアプリに貼り付け、「window操作.html」という名前で保存します。文字の保存方法を選べる場合はUTF-8を選んでください。

   補足：UTF-8とは？
   文字をコンピューターに保存するときの決まりの1つです。日本語が文字化けしないよう、保存時の設定とページの指定を合わせます。

3. ブラウザで任意のページを開きます。その後、同じタブで保存した「window操作.html」を開きます。別のタブで開いた場合は、同じタブでページを移動する形にしてから試します。

4. 「前のページへ戻る」を押し、直前に開いていたページへ移るかを確認します。

5. 戻った後に「次のページへ進む」を押し、サンプルのページへ戻るかを確認します。

6. 「印刷画面を開く」を押します。印刷画面が表示されたら、印刷せずに閉じてもかまいません。

以下は、ボタンが押されたときに、それぞれの処理を呼び出すコードです。HTMLの中にJavaScriptを書く場所を示すscriptと、ページの内容を扱うdocumentを使っています。ボタンを見つけて、押されたときに処理を始める書き方も含まれています。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ページ移動と印刷の例</title>
</head>
<body>
  <h1>ページ移動と印刷の例</h1>

  <button id="backButton" type="button">前のページへ戻る</button>
  <button id="forwardButton" type="button">次のページへ進む</button>
  <button id="printButton" type="button">印刷画面を開く</button>

  <script>
    document.getElementById("backButton").addEventListener("click", function () {
      history.back();
    });

    document.getElementById("forwardButton").addEventListener("click", function () {
      history.forward();
    });

    document.getElementById("printButton").addEventListener("click", function () {
      window.print();
    });
  </script>
</body>
</html>

実行結果：

戻るボタン：戻れる履歴があれば、前のページへ移動します。
進むボタン：進める履歴があれば、次のページへ移動します。
印刷ボタン：ブラウザの印刷画面が開きます。

画面の例では、戻る・進むボタンによる画面移動と、印刷ボタンを押した後の印刷画面を示します。

履歴がない場合、戻る・進むのボタンを押してもページが変わらないことがあります。これは、移動できる履歴がない場合にも起こります。

home()はホーム画面へ移動する標準機能ではない

window.home()やopener.home()を、ブラウザのホーム画面へ移動する方法として使うことはできません。home()は、共通の標準機能として定められた方法ではないためです。

openerは、別のページを開いたときに、開いた側のページを指すために使われる名前です。常に使えるものではなく、ホーム画面へ移動する機能でもありません。

別のページへ移動させたい場合は、移動先を指定したリンクなどを使います。ブラウザに設定したホーム画面へ移動する機能と、ホームページ内の移動は別のものです。

別のページを開く方法や、開いた側との関係については、window.openとopenerの使い方｜親子画面連携【JavaScript入門】で解説しています。

print()で印刷画面を開く

window.print()は、ブラウザの印刷機能を呼び出します。前のHTML例のように、ボタンが押されたときに実行できます。

この命令が行うのは印刷画面を開くことです。実際に印刷するか、どのプリンターや保存先を使うかは、利用者が印刷画面で決めます。

stop()はページの読み込みを止める

window.stop()は、進行中のページ読み込みを止めるための機能です。読み込みが終わったページで、過去に終わった処理を取り消す命令ではありません。

読み込み中に実行するのが用途です。読み込みが終わった後にボタンを押しても、止める対象がないため、期待した変化がない場合があります。

find()はどの環境でも使えるページ内検索ではない

window.find()は、指定した文字列をページ内で探す機能として一部の環境で見られます。しかし、どのブラウザでも使える共通の方法ではありません。対応状況を確認せず、Webページの検索機能として頼るのは避けてください。

ページを読む人に文字を探してもらう目的なら、ブラウザに備わっているページ内検索を案内できます。ページ内検索は、表示中のページから文字を探す機能です。

自分のページに検索欄を作りたい場合は、必要な動作に合わせて別の方法を選びます。window.find()を、すべての環境で使える前提にはしないでください。

よくある失敗と確認方法

window.back()やwindow.forward()を呼び出している

戻る・進むには、window.back()・window.forward()ではなく、history.back()・history.forward()を使います。呼び出し先が見つからない場合は、ブラウザの開発者ツールでエラーを確認できます。

開発者ツールは、ページの問題やプログラムからのメッセージを調べるためのブラウザの画面です。

戻る・進むを押しても画面が変わらない

移動先となる履歴がない可能性があります。同じタブで別のページを開いてからサンプルのページに移動し、もう一度試してください。履歴の有無は、コードだけでは決まりません。

home()やfind()を呼び出している

これらを共通の機能として当てにすることはできません。別の方法が必要な場合は、home()なら移動先を指定したリンク、ページ内検索ならブラウザの検索機能など、目的に合う方法へ置き換えてください。

印刷画面や読み込み停止が思った通りにならない

print()は印刷画面を呼び出す命令で、印刷の完了を保証するものではありません。stop()は読み込みを止める機能なので、読み込みが終わっている場合には止める対象がありません。

ブラウザごとの違いと公式資料

history.back()・history.forward()・window.print()・window.stop()は、公式資料で仕様を調べられる機能です。一方、window.home()は共通の標準機能ではなく、window.find()は共通の方法として頼れません。ブラウザ名だけで機能の対応状況を判断せず、機能ごとの資料を確認してください。

この記事では、Chrome・Edge・Firefox・Safariの特定の版番号ごとの対応結果は掲載していません。各ブラウザは更新され、同じブラウザでも利用者が使っている版が異なるためです。版番号を調べ、各機能の対応表に記載されたブラウザ名と版を照らし合わせてください。

1. 利用中のブラウザの設定画面やヘルプを開き、「バージョン情報」などから版番号を調べます。画面の名前や場所はブラウザによって異なります。

2. 下の公式資料から、調べたい機能のページを開きます。

3. 資料の対応状況の表で、利用中のブラウザ名を探し、版番号と対応状況を確認します。表に必要な情報がない場合は、各ブラウザの公式ヘルプも確認してください。

APIは、ある機能を使うために決まった方法で呼び出す窓口です。以下の資料では、ページの履歴や印刷などの機能について調べられます。

• MDN Web Docs：History.back() — 前の履歴へ移動する機能
• MDN Web Docs：History.forward() — 次の履歴へ移動する機能
• MDN Web Docs：Window.print() — 印刷機能を呼び出す方法
• MDN Web Docs：Window.stop() — 読み込みを止める機能
• MDN Web Docs：Window.find() — ページ内の文字を探す機能
• WHATWG HTML Standard：History API — ページの履歴に関する共通の決まり

ブラウザの版は、各ブラウザの設定画面にある「バージョン情報」などから調べられます。画面の名前や場所はブラウザによって異なるため、見つからない場合はブラウザの公式ヘルプを参照してください。MDN Web Docsの各機能のページでは、対応するブラウザや版の情報を確認できます。

JavaScriptを基礎から学びたい方へ