JavaScriptでURLやらパスやらを取得する方法

URL取得方法 技術

Web制作の時にページごと違う処理をさせたいこと、ありますよね?
そんな時にはURLやパスなどを取得して、そのページで処理をさせると思います。

今回はそれをご紹介いたします!

フローとしては

URL、パス取得
⬇︎
ページの判定
⬇︎
ページごとに処理を変える

といったものになります。

JavaScriptでページの判定をするときは基本的に「Location」オブジェクトを使用します。

実際のコード(取得したいもの一覧)

プロトコルを取得

location.protocol

ドメイン、ホストを取得

location.host
location.hostname

ポート番号を取得

location.port

ページのパスを取得

location.pathname

パラメーターを取得

location.search

ページ内リンクを取得

location.hash

これでURIを取得することができます。

このサイトでの一例

このサイトの記事一覧ページはこんな感じ。

URL取得方法

そこで location.protocol をします。

URL取得方法

「https:」が取得できました。

「SSL対応しているとき/していないとき」の判定に使えそうですね!

次は location.host、location.hostname をします。

URL取得方法

「tashumist.com」が取得できました。

次に location.pathname をします。

URL取得方法

「blog」が取得できました。

ページごとの処理ができるようになります。

次に location.search、 location.hash をします。

URL取得方法

通常はパラメータやページ内リンクを取得できますが、ここではURIに記述がなかったため空文字になっています。

location.port も同様です。

URL取得方法

なんとなく理解できましたでしょうか?

全てを画像で紹介!

パッと一目でわかるような図が自分でも欲しいと思ったので作成しました。
ぜひ参考にしてみてください!

URL取得方法

コメント

  1. aspibly より:

    [url=https://vsdoxycyclinev.com/]doxycycline 100mg tablets in canada[/url]

  2. OCCUSTYNC より:
  3. Vuntefe より:
  4. Prussysax より:
  5. OCCUSTYNC より:
  6. Prussysax より:
  7. OCCUSTYNC より:
  8. OCCUSTYNC より:
  9. OCCUSTYNC より:
  10. OCCUSTYNC より:
  11. OCCUSTYNC より:
  12. Rachel より:

    Its not my first time to pay a visit this web page, i am visiting this web site dailly and obtain fastidious information from here all the time.

  13. Thanks for your post. My partner and i have usually noticed that many people are
    eager to lose weight simply because wish to appear slim and also attractive.

    However, they do not often reaize that there are additional benefits to losijng weight also.
    Doctors state that overweight people come acrross a variety of health
    conditions that can be instantly attributed to their own excess weight.

    Thankfully that people who’re overweight as well as suffering from various
    disseases can reduce the sverity of their particular illnesses byy losing weight.
    It is eazsy to see a continuous but notable improvemewnt in health
    while even a bit of a amount of fat reduction is attained.

  14. Prussysax より:
  15. I do not know if it’s just me or if perhaps everyone else encountering issues with your blog.
    It appears as if some of the written text within your posts are running off the screen. Can someone else
    please comment and let me know if this is happening to them
    as well? This might be a issue with my browser because I’ve had this happen before.
    Cheers

  16. Lindsay より:

    It’s truly a nice and useful piece of information. I’m glad that you shared this helpful info with us.
    Please keep us informed like this. Thanks for sharing.

  17. Prussysax より:
  18. Leah Pedroza より:

    Its like you read my mind! You appear to grasp a
    lot approximately this, such as you wrote the guide in it or something.
    I think that you simply could do with a few % to force
    the message home a bit, however other than that, this is excellent blog.
    A great read. I will definitely be back.

  19. Buy web traffic より:

    Its such as you learn my thoughts! You appear to know
    a lot about this, like you wrote the book in it or something.
    I believe that you simply could do with a few percent to force the message house a little bit, however other than that, that
    is great blog. A fantastic read. I will definitely be back.

  20. Samantha より:

    My brother recommended I would possibly like this website.
    He used to be entirely right. This post truly made my day.
    You can not believe just how so much time I had spent for this info!
    Thank you!

  21. Rodger より:

    Definitely consider that which you stated. Your favourite justification seemed to
    be at the internet the easiest factor to be aware of.
    I say to you, I definitely get irked at the same time as other
    people think about issues that they just do not recognize about.

    You managed to hit the nail upon the top and outlined out the whole
    thing without having side effect , people can take a signal.
    Will likely be back to get more. Thanks

  22. inukiller より:

    I just like the helpful information you supply to your
    articles. I will bookmark your blog and check once more here regularly.
    I’m reasonably sure I will be informed many new stuff right here!
    Best of luck for the next!

  23. OCCUSTYNC より:
タイトルとURLをコピーしました