HTML + JavaScript 非同期でIPアドレスを取得して表示してみた

Last updated at 2020-04-06Posted at 2020-01-22

ちょっとクライアントでIPアドレスを取得する必要があったので、
やり方を残しておきます。

今回はipinfo.ioのJSONP API使用してIPアドレスを取得しました。

ちなみにipinfo.ioは自分のIPアドレスを教えてくれるWebサービスです。

##JavaScript

$.ajax({
    url: "https://ipinfo.io",
    dataType: "jsonp",
    success: function(res){
         $(".ip-address").text(res.ip);
    }
});

##HTML

<p>
    あなたのIPは<a class="ip-address"></a>です。
</p>

こちらのスクリプトを実行するとIPアドレスが表示できると思います。

##まとめ

通常、IPアドレスはサーバで取得することが多いかと思いますが、
今回のようにクライアントでもIPアドレスを取得したい時に役立ちます。