In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > top (window)

top property (window)

Browser support:

Returns a reference to the topmost ancestor window object in the window hierarchy.

The top property is useful if the current document is placed within a subframe (a frame within a frame) and you need to access the topmost ancestor window.
If you need the immediate parent window use the parent property.
To get the host frame or iframe element instead of the parent window, use the frameElement property.
If you need to walk downwards in the frame window hierarchy, use the contentWindow property. It returns the window object that belongs to a frame or iframe element.

The properties mentioned above can be used when the window hierarchy is created by frame elements. If a document opens a page in a new browser window (for example by an anchor element or the open method), then the opener property can be used in the child document to access the parent window object.

Note that because of security restrictions, the contents of a document can be accessed from another document only if the two documents are located in the same domain.

Syntax:

object.top;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

If the current document is in a frame or iframe element the value refers to the topmost ancestor window, else it refers to the current window.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the top property. See the contents of the frameChain.htm and the subFrame.htm files too.

Code

frameChain.htm

subFrame.htm

<body style="background-color:#FFFFFF;">
    <h1>The main window</h1>
    <iframe src="frameChain.htm" style="width:400px; height:200px;"></iframe>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fddfa8;">
    <h2>Frame containing another frame</h2>
    <iframe src="subFrame.htm" style="width:300px; height:100px;"></iframe>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function ChangeTopMostBG () {
            var ancestor = null;
            if (window.top) {
                ancestor = window.top;
            }
            else {
                var ancestor = window;
                while (ancestor.parent) {
                    ancestor = ancestor.parent;
                }
            }
            ancestor.document.body.style.backgroundColor = "#6F0000";
        }
    </script>
</head>
<body style="background-color:#e2c4f6;">
    <h3>The sub-frame</h3>
    <button onclick="ChangeTopMostBG ()">Change topmost background</button>
</body>
</html>