WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

window.locationでURL情報を取得

デモ

http://efu.sakura.ne.jp/web/location/?1481711331426#hash

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>location</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <style>
    .text01 {
      font-size: 36px;
      text-align: center;
    }
  </style>
  <script>
    $(function(){
      var d = (new Date).getTime();
      var date_param = '?' + d;
      $('.text01 a').text(date_param + '#hash');
      $('.text01 a').attr('href',date_param + '#hash');

      //URL情報
      console.log(location);

      //URLを取得
      console.log(location.href);
      //ドメインを取得
      console.log(document.domain);
      //ホストを取得
      console.log(location.host);
      //ハッシュを取得
      console.log(location.hash);
      //「?」以降を取得(ハッシュは含まれない)
      console.log(location.search);
      //パスを取得
      console.log(location.pathname);
      //プロトコルを取得
      console.log(location.protocol);
    });
  </script>
</head>
<body>
  <p class="text01"><a href=""></a></p>
</body>
</html>

f:id:mmmmofu:20161214193508p:plain

location

URL情報を取得できる。

location.href

URLを全て取得

結果:

http://efu.sakura.ne.jp/web/location/?1481711331426#hash

document.domain

ドメインを取得

結果:

efu.sakura.ne.jp

location.host

ホストを取得

結果:

efu.sakura.ne.jp

location.hash

ハッシュを取得

結果:

#hash

location.search

?以降を取得(ハッシュは含まない)

結果:

?1481711331426

location.pathname

パスを取得

結果:

/web/location/

location.protocol

プロトコルを取得

結果:

http:

windowは省略できる。