JavaScript Get Local IP Address
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript get local IP address, in JavaScript, there is no direct method to get the local IP address but we can have it by network request to the website to have the IP address.
In this article, we are going to use two different methods.
- Using jQuery
- Using fetch() API
Step By Step Guide On JavaScript Get Local IP Address :-
Lets see both of the methods with examples.
Method 1 - Using jQuery
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript get local IP address </title>
<style>
body {
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript get local IP address </h3>
<div class="container">
<div class="ip_address">
</div>
<button id="btn">Get IP address</button>
</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$.getJSON("https://ipinfo.io", function(data){
$(".ip_address").text(data.ip) ;
})
})
})
</script>
</body>
</html
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- We created the <button> with an id.
- Created the <style> tag to add CSS to the HTML page.
- First add the <script> tag with the external link to add jQuery.
- To add JavaScript Create a <script> tag.
- Here we used jQuery. By using an external link we will able to get the IP by (data.ip).
- By clicking on the button we will able to get the local IP address.
Method 2 - using fetch() method
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript get local IP address </title>
<style>
body {
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript get local IP address </h3>
<script>
fetch('https://api.ipify.org/?format=json')
.then(results => results.json())
.then(console.log);
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Using the fetch() method then use console.log() to display it.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to get local IP address using JavaScript.
I hope this article on JavaScript get local IP address helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
