Web制作の時にページごと違う処理をさせたいこと、ありますよね？
そんな時にはURLやパスなどを取得して、そのページで処理をさせると思います。
今回はそれをご紹介いたします！
フローとしては
URL、パス取得
⬇︎
ページの判定
⬇︎
ページごとに処理を変える
といったものになります。
JavaScriptでページの判定をするときは基本的に「Location」オブジェクトを使用します。
実際のコード（取得したいもの一覧）
プロトコルを取得
location.protocolドメイン、ホストを取得
location.host
location.hostnameポート番号を取得
location.portページのパスを取得
location.pathnameパラメーターを取得
location.searchページ内リンクを取得
location.hashこれでURIを取得することができます。
このサイトでの一例
このサイトの記事一覧ページはこんな感じ。
そこで location.protocol をします。
「https:」が取得できました。
「SSL対応しているとき/していないとき」の判定に使えそうですね！
次は location.host、location.hostname をします。
「tashumist.com」が取得できました。
次に location.pathname をします。
「blog」が取得できました。
ページごとの処理ができるようになります。
次に location.search、 location.hash をします。
通常はパラメータやページ内リンクを取得できますが、ここではURIに記述がなかったため空文字になっています。
location.port も同様です。
なんとなく理解できましたでしょうか？
全てを画像で紹介！
パッと一目でわかるような図が自分でも欲しいと思ったので作成しました。
ぜひ参考にしてみてください！
コメント