Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Window frameElement Property
The HTML DOM Window frameElement property returns the HTML element that contains or embeds the current window, such as <iframe>, <embed>, or <object>. If the window is not embedded within another element (i.e., it's the top-level window), this property returns null.
This property is commonly used to determine whether a page is running inside a frame or as a standalone window, and to access properties of the parent element when embedded.
Syntax
Following is the syntax for accessing the frameElement property −
window.frameElement
Return Value
The frameElement property returns −
The HTML element (like
<iframe>,<embed>, or<object>) that embeds the current windownullif the window is not embedded or if cross-origin security restrictions apply
Example − Basic frameElement Check
Following example demonstrates how to check if the current window is embedded −
<!DOCTYPE html>
<html>
<head>
<title>frameElement Property Check</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Frame Element Check</h2>
<button onclick="checkFrameElement()">Check if Embedded</button>
<p id="result"></p>
<script>
function checkFrameElement() {
var result = document.getElementById("result");
if (window.frameElement) {
result.innerHTML = "This window is embedded in: " + window.frameElement.tagName;
result.style.color = "green";
} else {
result.innerHTML = "This window is NOT embedded (top-level window)";
result.style.color = "red";
}
}
</script>
</body>
</html>
The output displays whether the current window is embedded or running as a top-level window −
Frame Element Check [Check if Embedded] This window is NOT embedded (top-level window)
Example − Accessing Parent Frame Properties
Following example shows how to access and modify properties of the embedding element −
<!DOCTYPE html>
<html>
<head>
<title>Parent Frame Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Frame Element Properties</h2>
<button onclick="showFrameInfo()">Show Frame Info</button>
<button onclick="changeFrameSize()">Change Frame Size</button>
<div id="info" style="margin-top: 15px; padding: 10px; background: #f0f0f0;"></div>
<script>
function showFrameInfo() {
var info = document.getElementById("info");
if (window.frameElement) {
var frame = window.frameElement;
info.innerHTML =
"<strong>Frame Information:</strong><br>" +
"Tag Name: " + frame.tagName + "<br>" +
"Width: " + (frame.width || frame.style.width || "auto") + "<br>" +
"Height: " + (frame.height || frame.style.height || "auto") + "<br>" +
"Source: " + (frame.src || "N/A");
} else {
info.innerHTML = "<em>No frame element found - this is a top-level window</em>";
}
}
function changeFrameSize() {
if (window.frameElement) {
window.frameElement.style.width = "400px";
window.frameElement.style.height = "300px";
document.getElementById("info").innerHTML = "<strong>Frame size changed to 400x300 pixels</strong>";
} else {
document.getElementById("info").innerHTML = "<em>Cannot change size - not in a frame</em>";
}
}
</script>
</body>
</html>
This example shows how to retrieve frame information and modify the embedding element's properties when the page runs inside a frame.
Example − Complete Iframe Implementation
Following example demonstrates a complete setup with an iframe and the frameElement property −
<!DOCTYPE html>
<html>
<head>
<title>Complete frameElement Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Parent Window</h2>
<p>This is the parent window containing an iframe below:</p>
<iframe id="childFrame" width="100%" height="200"
srcdoc="<!DOCTYPE html><html><head><title>Child</title></head><body style='font-family: Arial; padding: 10px; background: #e8f4fd;'><h3>Iframe Content</h3><button onclick='checkParent()'>Check frameElement</button><p id='output'></p><script>function checkParent(){var out=document.getElementById('output');if(window.frameElement){out.innerHTML='Found parent iframe with ID: '+window.frameElement.id;out.style.color='green';}else{out.innerHTML='No parent frame found';out.style.color='red';}}</script></body></html>">
</iframe>
<p style="margin-top: 15px;">Click the button inside the iframe to test the frameElement property.</p>
</body>
</html>
The iframe content can access its parent frame element through window.frameElement −
Parent Window This is the parent window containing an iframe below: ??????????????????????????????????????? ? Iframe Content ? ? [Check frameElement] ? ? Found parent iframe with ID: childFrame ? ??????????????????????????????????????? Click the button inside the iframe to test the frameElement property.
Security Considerations
The frameElement property is subject to same-origin policy restrictions. If the iframe content and parent window are from different domains, accessing frameElement may return null or throw a security error to prevent cross-site scripting attacks.
Common Use Cases
The frameElement property is commonly used for −
Responsive iframe sizing − Adjusting the parent iframe size based on content
Communication validation − Verifying if the page is embedded before attempting parent-child communication
Security checks − Ensuring the page is running in the expected embedded context
Style inheritance − Applying styles to the parent frame element from within the iframe
Browser Compatibility
The frameElement property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 5.5+. However, cross-origin restrictions may vary between browsers.
Conclusion
The window.frameElement property provides access to the HTML element that embeds the current window. It returns the embedding element for same-origin scenarios and null for top-level windows or cross-origin restrictions. This property is essential for iframe communication and responsive embedded content.
328 Views
