JavaScript Tutorial/Location/Location

Материал из Web эксперт
Перейти к: навигация, поиск

Change location.href

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
if (top==self)
{
    var main_frame = "http://www.wbex.ru";
    var cur_url = self.location.href;
    var setframes = main_frame + "?" + cur_url;
    location.href = setframes;
}
//-->
</script>
</head>
<body>
</body>
</html>


Location

The Location object represents the current Web address displayed in the browser.

Properties and Methods of the Location Object

Property/Method Description hash Represents an anchor name in the URL that begins with the # character host Represents the hostname and port number of the URL hostname Represents the hostname part of the URL href Represents the complete URL pathname Represents the pathname part of the URL port Represents the port part of the URL protocol Represents the protocol part of the URL reload() Reloads the current URL replace() Loads a new Web page in the current browser search The search part of the URL, including the ? 



<html>
    <head>
    <title> Creating a Location object</title>
    </head>
    <body>
    <form name="form1">
    Click the button to get the current location value.
    <br><br><br>
    <input type="button" name="getLoc" value="Get Location"
       onClick="alert("The current location is: " + document.location)">
    <br>
    </form>
    </body>
    </html>


Location.assign()

Syntax



location.assign(URL)


Location.hash

The hash property refers to the anchor portion of the URL, including the hash symbol (#).

If the URL contains a pound sign (#), this returns the content after it (for example, http://www.wbex.ru/index#section1 has a hash equal to "#section1").



<html>
    <head>
    <title> Using the hash property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
          alert(document.location.hash);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.hash
    value of the following address:
    <br>
    http://www.wbex.ru
    <br><br>
    <input type="button" name="getLoc" value="Get hash value" onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.host

The host property represents the host portion of the URL.

This is composed of the hostname and the port number (if available).

for example, www.wbex.ru.



<html>
    <head>
    <title> Using the hash property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
         alert(document.location.host);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.host value of the following address:
    <br>
    http://www.wbex.ru
    <br><br>
    <input type="button" name="getLoc" value="Get host" onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.hostname

The hostname property represents the hostname portion of the URL.



<html>
    <head>
    <title> Using the hostname property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
         alert(document.location.hostname);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.hostname
    <br>
    http://www.wbex.ru
    <br>
    <input type="button" name="gethost" value="Get hostname" onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.href

The href property represents the entire URL string for the current page displayed in the browser.



<html>
    <head>
    <title> Using the href property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
         document.location.href ="http://www.wbex.ru";
    }
    -->
    </script>
    <form name="form1">
    Click the button to set the current location.href value of the following address:
    <br>
    http://www.wbex.ru
    <br><br>
    <input type="button" name="sethref" value="Set href" onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.pathname

The pathname property represents the pathname portion of the URL.

For example, the pathname for http://www.wbex.ru/pictures/index.htm is "/pictures/index.htm".



<html>
    <head>
    <title> Using the pathname property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
         alert(document.location.pathname);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.pathname value of the following address:
    <br>
    http://www.wbex.ru
    <br>
    <input type="button" name="getLoc" value="Get pathname" onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.port

The port property represents the port portion of the URL. This normally follows the hostname, but is not always available.

http://www.wbex.ru:8080/index.htm, the port is equal to 8080.



<html>
    <head>
    <title> Using the port property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
         alert(document.location.port);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.port value of the following address:
    <br>
    http://www.wbex.ru
    <br>
    <input type="button" name="getport" value="Get port" onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.protocol

The protocol property represents the protocol portion of the URL.

This is located in the beginning of the URL address (the text before ://).

For example, the protocol for http://www.wbex.ru is http: and the protocol for ftp://www.yourserver.ru is ftp:.



<html>
    <head>
    <title> Using the protocol property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
        alert(document.location.protocol);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.protocol value of the following address:
    <br>
    http://www.wbex.ru
    <br><br>
    <input type="button" name="getproto" value="Get protocol" ?onClick="show()">
    <br>
    </form>
    </body>
    </html>


Location.reload(false) to reload from the cache

The reload() method reloads the current page displayed in the browser.



<html>
    <head>
    <title> Using the reload method of the Location object</title>
    </head>
    <body>
    <form name="form1">
    Click the button to reload the current page.
    <br><br>
    Location.hash value: <input type="text" name="text1" size=20>
    <br>
    <input type="button" name="load" value="Reload page" onClick="document.location.reload(false)">
    <br>
    </form>
    </body>
    </html>


Location.reload() to reload from cache

The reload() method reloads the current page displayed in the browser.



<html>
    <head>
    <title> Using the reload method of the Location object</title>
    </head>
    <body>
    <form name="form1">
    Click the button to reload the current page.
    <br><br>
    Location.hash value: <input type="text" name="text1" size=20>
    <br>
    <input type="button" name="load" value="Reload page" onClick="document.location.reload()">
    <br>
    </form>
    </body>
    </html>


Location.reload(true) to reload from the server

The reload() method reloads the current page displayed in the browser.



<html>
    <head>
    <title> Using the reload method of the Location object</title>
    </head>
    <body>
    <form name="form1">
    Click the button to reload the current page.
    <br><br>
    Location.hash value: <input type="text" name="text1" size=20>
    <br>
    <input type="button" name="load" value="Reload page" onClick="document.location.reload(true)">
    <br>
    </form>
    </body>
    </html>


Location.replace()

Syntax



location.replace(URL)


Location replace in action

<html>
    <head>
        <title>You won"t be able to get back here</title>
    </head>
    <body>
        <P>You won"t be coming back here.</p>
        <script type="text/javascript">
            setTimeout(function () {
                location.replace("http://www.wbex.ru/");
            }, 1000);
        </script>
    </body>
</html>


Location.search

The search property represents the query portion of the URL, including the preceding question mark.

For example, the search for http://www.wbex.ru/search.htm?term=javascript is ?term=javascript.



<html>
    <head>
    <title> Using the search property of the Location object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function show(){
         alert(document.location.search);
    }
    -->
    </script>
    <form name="form1">
    Click the button to get the current location.search
    value of the following address:
    <br>
    http://www.wbex.ru
    <br><br>
    <input type="button" name="getsearch" value="Get search" onClick="show()">
    <br>
    </form>
    </body>
    </html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Location/Location&oldid=9217»