DOM Location Object Methods

DOM Location Object – Part 2

Forward: In this part of the series, we look at DOM Location Object Methods.

By: Chrysanthus Date Published: 31 Jul 2012

Introduction

This is part 2 of my series, DOM Location Object Methods. In this part of the series, we look at DOM Location Object Methods.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Accessing the Location Object Methods
You access the location object methods using the following syntax:

    location.method();

The assign() method
The assign() method loads a new document. After loading, to arrive at the previous document, you click the Back Button of the browser. Read and try the following code, clicking the button of the newly loaded page to see the effect of the assign() method.

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">
        function newdoc()
            {
                location.assign("page1.htm");
            }
    </script>
</head>
<body>
    <button type="button" onclick="newdoc()">Click</button>
</body>
</html>

The reload() Method
The reload method re-loads the current document. In other words the document is re-downloaded from the server and redisplayed as the previous same document; that Back button of the browser is not made active. Browsers have buttons that do this without DOM and ECMAScript. In Internet Explorer the name of the button that does this is, Refresh. In Firefox and Opera, the name of the button that does this is, Reload. In the following code, if the button in the page is clicked, the current document is reloaded, by DOM in the ECMAScript. Read and try the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">
        function refresh()
            {
                location.reload();
            }
    </script>
</head>
<body>
    <p>text text text</p>
    <button type="button" onclick="refresh()">Click</button>
</body>
</html>

The replace() Method
The replace method replaces the current document with a new one. The current document, which becomes the previous document is lost and its link does not go to the history directory of the browser, and the Back Button is not activated. The syntax for the replace() method is:

    location.replace(newURL)

The newURL is in quotes. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">
        function repl()
            {
                location.replace("page1.htm");
            }
    </script>
</head>
<body>
    <p>text text text</p>
    <button type="button" onclick="repl()">Click</button>
</body>
</html>

For the three location methods, only the assign method, develops a history item and have the Back Button activated. For the other two methods, the current document is replaced without any history item and the Back Button is not activated.

End of Series
This is the end of the series. I hope you appreciated it. The next series, you should read is titled, “DOM Windows and Related Objects”.

Chrys

Broad Network

Related Articles

DOM Location Object Methods

DOM Location Object – Part 2

Introduction

Related Links

Comments