指定したURLにページ遷移する / 指定したURLを開く - JavaScript

JavaScriptで指定したURLにページ遷移するコードを紹介します。

概要

JavaScriptでページ遷移する場合は、document.localtion.href に遷移先のURLを代入します。

プログラム例

コード

下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function frameClick() {
      document.location.href = "http://www.ipentec.com";
    }
  </script>
  <style type="text/css">
  <!--
    .frame {
      width: 160px;
      height: 48px;
      line-height: 48px;
      border:solid 1px #0094ff;
      background-color:#E0E0E0;
    }
  -->
  </style>

</head>
<body>
  <div class="frame" onclick="frameClick();">ページ遷移します。</div>
</body>
</html>

解説

[ページを遷移します]のDIV枠がクリックされると、JavaScriptにより、frameClick()関数が実行されます。
frameClick()関数では、document.location.href に遷移先のURL"http://www.ipentec.com"を代入し、ページ遷移を実行します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。画面の[ページ遷移します]の枠をクリックします。


Webブラウザのページが切り替わり、指定したURLにページ遷移できました。

補足

ページ遷移ではなく、新しいWebブラウザを開いて指定したURLを表示する場合は「指定したURLを別ウィンドウで開く (JavaScript プログラミング)」の記事を参照してください。
このページのキーワード
  • JavaScriptでページ遷移する
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-03-23
作成日: 2014-10-10
iPentec all rights reserverd.