Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to use window and window location in javascript?

JavaScript Window - The Browser Object Model


The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

  • The Window Object
  • The window object is supported by all browsers. It represents the browser's window.
  • Global functions are methods of the window object.
  • Even the document object (of the HTML DOM) is a property of the window object: window.document.getElementById("header");.
  • document.getElementById("header");



Examples window :-

File Name:- index.php

<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>


Some other methods:

  • window.open() - open a new window
  • window.close() - close the current window
  • window.moveTo() -move the current window
  • window.resizeTo() -resize the current window



    • Window Screen

    The window.screen object contains information about the user's screen.
    The window.screen object can be written without the window prefix.

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth

    • Examples window screen width :-

    File Name:- index.php

    <body>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML =
    "Screen width is " + screen.width;
    </script>
    </body>


    Examples window screen height :-

    File Name:- index.php

    <body>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML =
    "Screen height is " + screen.height;
    </script>
    </body>


    Window Location :

    The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

    Some examples:

  • window.location.href returns the href (URL) of the current page
  • window.location.hostname returns the domain name of the web host
  • window.location.pathname returns the path and filename of the current page
  • window.location.protocol returns the web protocol used (http:// or https://)
  • window.location.assign loads a new document


    • Window Location Href :-

    The window.location.href property returns the URL of the current page.

    File Name:- index.php

    <body>
    <p>Display the entire URL of the current page.</p>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML =
    "Page location is: " + window.location.href;
    </script>
    </body>


    Window Location Assign :-

    The window.location.assign() method loads a new document.

    File Name:- index.php

    <head>
    <script>
    function newDoc() {
    window.location.assign("http://www.gmaxlifesciences.com")
    }
    </script>
    </head>
    <body>
    <input type="button" value="Load new document" onclick="newDoc()">
    </body>


    Window Location Hostname :-

    File Name:- index.php

    <head>
    <script>
    function newDoc() {
    window.location.assign("http://www.gmaxlifesciences.com")
    }
    </script>
    </head>
    <body>
    <input type="button" value="Load new document" onclick="newDoc()">
    </body>


    Window Location Pathname :-

    The window.location.pathname property returns the pathname of the current page.

    File Name:- index.php

    <body>
    <p>Display the path name of the current URL.</p>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML =
    "Page path is: " + window.location.pathname;
    </script>
    </body>


    Window Location Protocol :-

    The window.location.protocol property returns the web protocol of the page.

    File Name:- index.php

    <body>
    <p>Display the protocol portion of the current URL.</p>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML =
    "Page protocol is: " + window.location.protocol;
    </script>
    </body>


    How to get screen size and execute some script on screen size.

    File name : index.php

    <script type="text/javascript">

    var width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;

    if (width > 500) {
    //<![CDATA[
    LSM_Slot({
    adkey: '68d',
    ad_size: '728x90',
    slot: 'slot28415'
    });
    //]]>
    }
    </script>



    <script type="text/javascript">
    var width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;



    if (width < 500) {

    //document.write('<scr' + 'ipt type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=386133869"></scr' + 'ipt>');
    <br>

    }</script>

    <script src="//ads.lfstmedia.com/getad?site=92184" type="text/javascript"></script>

    <script type="text/javascript">


    var width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;



    if (width > 500) {
    //<![CDATA[
    LSM_Slot({
    adkey: '68d',
    ad_size: '728x90',
    slot: 'slot28415'
    });
    //]]>
    }
    </script>



    </script>



    <script type="text/javascript">
    var width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;



    if (width < 500) {

    //document.write('<scr' + 'ipt type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=386133869"></scr' + 'ipt>');
    <br>

    }</script>











    </div>
    <div class="mobad">
    <!--
    <script type="text/javascript">
    atOptions = {
    'key' : '3df2178091dc47b565af8f67e1c22212',
    'format' : 'iframe',
    'height' : 250,
    'width' : 300,
    'params' : {}
    };
    document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnhtml.com/invoke.js"></scr' + 'ipt>');
    </script>
    -->
    </div>






    Previous Next


    Trending Tutorials


    PHP

    PHP

    100+ Tutorials
    oops

    PHP OOPs

    80+ Tutorial
    Codeigniter

    Codeigniter

    100+ Tutorial
    Laravel

    Laravel

    100+ Tutorials
    Node.js

    NODE.JS

    100+ Tutorials
    Javascript

    Javascript

    100+ Tutorials


    Review & Rating

    0.0 / 5

    0 Review

    5
    (0)

    4
    (0)

    3
    (0)

    2
    (0)

    1
    (0)

    Write Review Here


    Most Popular Tutorials

     Important Link