読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

LocationオブジェクトとHistoryオブジェクト

WebページのURL情報(Location)

  • Locationオブジェクトは、WebページのURLを情報としてもつオブジェクトです
  • hrefプロパティの値を変更することで、別のWebページへ移動できます



location.href = 移動先URL;

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<h1>現在のページ</h1>
<p><button onclick="location.href='http://www.google.co.jp/';">移動する</button></p>
</body>
</html>

Webページの履歴情報(History)

  • Historyオブジェクトは、Webページの閲覧履歴を情報としてもつオブジェクトです
  • backメソッドで1つ前のページに戻ることができます
  • ブラウザの戻るボタンをクリックしたときと同じ挙動です



history.back();

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<h1>JavaScriptの練習</h1>
<p><button onclick="history.back();">戻る</button></p>
</body>
</html>


  • LocationオブジェクトやHistoryオブジェクトで、ページ間の移動ができる