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

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

frameElement property (window)

Browser support:

Returns a reference to the frame or iframe element that hosts the current window in the parent document.

The frameElement property is useful if the current document is placed in a frame or iframe element and you need access to the host frame element. If you need the parent window (host window) instead of the host frame element, use the parent property. In that case, if the current document is placed within a subframe (a frame within a frame) and you need to access the topmost ancestor window, use the top 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. In that case, 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.frameElement;

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 placed within a frame or iframe element, the value refers to the host frame element, else the value is null.

Default: this property has no default value.

Example HTML code 1:

The frameElement property is used to get the container frame and frameset settings inside the mainFrame.htm file:

Code

topFrame.htm

mainFrame.htm

<frameset rows="110,*" cols="*" border="10px">
    <frame src="topFrame.htm" name="topFrame" scrolling="No"/>
    <frame src="mainFrame.htm" name="mainFrame"/>
</frameset>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Contents of the top frame</h1>
    May contain menu items or a logo.
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function AddRow (statTable, element, attr, attrValue) {
            if (attrValue == null)
                attrValue = element.getAttribute (attr);

            var row = document.createElement ("tr");
            var nameCell = document.createElement ("td");
            var valueCell = document.createElement ("td");
            nameCell.innerHTML = attr;
            valueCell.innerHTML = attrValue;

            row.appendChild (nameCell);
            row.appendChild (valueCell);
            statTable.appendChild (row);
        }

        function CreateFramesetStat () {
            var statTable = document.getElementById ("frameset_stat");
            var frameSet = window.frameElement.parentNode;

            AddRow (statTable, frameSet, "border");
            AddRow (statTable, frameSet, "borderColor");
            AddRow (statTable, frameSet, "frameBorder");
            AddRow (statTable, frameSet, "frameSpacing");
            AddRow (statTable, frameSet, "cols");
            AddRow (statTable, frameSet, "rows");
        }

        function CreateTopFrameStat () {
            var statTable = document.getElementById ("topframe_stat");
            var frame = parent.frames['topFrame'].frameElement;

            AddRow (statTable, frame, "noResize", frame.noResize);
            AddRow (statTable, frame, "scrolling");
        }

        function CreateMainFrameStat () {
            var statTable = document.getElementById ("mainframe_stat");
            var frame = window.frameElement;

            AddRow (statTable, frame, "noResize", frame.noResize);
            AddRow (statTable, frame, "scrolling");
        }

        function CreateStat () {
            CreateFramesetStat ();
            CreateTopFrameStat ();
            CreateMainFrameStat ();
        }

    </script>
</head>
<body onload="CreateStat ()">
    <table> 
        <thead>
            <tr>
                <th>Frameset</th>
                <th>Top frame</th>
                <th>Main frame</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="frameset_stat">
                        </tbody>
                    </table>
                </td>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="topframe_stat">
                        </tbody>
                    </table>
                </td>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="mainframe_stat">
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>