Tuesday, 21 June 2016

Get IP, OS name and Browser Name using JQuery - JavaScript

  • Here i create one html file, in the click event of button, i called some simple javascript and jquery code for get IP address of current system, operating system name and browser name of system in pop up,
  • you can use this code in your login page of web-site, and get all details of users that login in your created system,you can also store these details and login time also and manage users by perfect security,
  • just copy and paste this code in your html page and hit the run,

Here is the code : 

<html>
    <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://l2.io/ip.js?var=myip"></script>
        <!-------- this link is for get ip in myip name variable  --------->
    </head>
    <body>
        <div class="row">
            <div class="col-md-4 col-md-offset-5" style="margin-top: 25%">
                <input type="button" name="LoginButton" id="LoginButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal" value="Click Me!" style="width: 150px;">
            </div>
        </div>
        <div class="modal fade " id="myModal" role="dialog">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header" align="center">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Get OS Name,Browser Name AND IP</h4>
                    </div>
                    <div class="modal-body">
                        <span>Your Operation System Name : </span><b><span id="OSsystem"></span></b><br/>
                        <span>Your Browser Name : </span><b><span id="BrowserName"></span></b><br/>
                        <span>Your IP Address : </span><b><span id="IPaddress"></span></b><br/>
                    </div>
                    <div class="modal-footer" align="center">
                        <a href="http://www.promptwebsolution.com">www.promptwebsolution.com</a>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        $("#LoginButton").click(function () {
            //------------------------------------  To Get Browser Name------------------------>
            if (navigator.userAgent.search("MSIE") >= 0) {
                var browser = "InternetExplorer";
            } else if (navigator.userAgent.search("Chrome") >= 0) {
                var browser = "Chrome";
            } else if (navigator.userAgent.search("Firefox") >= 0) {
                var browser = "Firefox";
            } else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
                var browser = "Safari";
            } else if (navigator.userAgent.search("Opera") >= 0) {
                var browser = "Opera";
            }
            //-------------------------------------  To get OS ------------------------------------>
            var OSName = "Unknown OS";
            if (navigator.appVersion.indexOf("Win") != -1)
                OSName = "Windows";
            if (navigator.appVersion.indexOf("Mac") != -1)
                OSName = "MacOS";
            if (navigator.appVersion.indexOf("X11") != -1)
                OSName = "UNIX";
            if (navigator.appVersion.indexOf("Linux") != -1)
                OSName = "Linux";
            var ip = myip;
            $("#OSsystem").html(OSName);
            $("#BrowserName").html(browser);
            $("#IPaddress").html(ip);

        });
    </script>
</html>


ENJOY : )   
Code By :-  RAJA MAHIYARIYA MAHER(tHuNdEr^fR0G)



Related Articles

1 comment:

  1. Thanks @NIDA. we will lunch a new blogger site only for developers and designers.
    www.promptwebsolution.com

    ReplyDelete

Prompt Web Solution. Powered by Blogger.