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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > contentDocument (applet, frame, iframe, object)

contentDocument property (applet, frame, iframe, object)

Browser support:

8

Retrieves the document generated by a frame or iframe element.

Note: Internet Explorer supports the contentDocument property from version 8, use the cross-browser contentWindow property and the document property of the returned window object in earlier versions.

The contentDocument property can be used in the host window to access the document object that belongs to a frame or iframe element.

In that case, if you need to walk upwards in the frame window hierarchy, use the parent and top properties.

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.
Furthermore, in Google Chrome, the contentDocument and the contentWindow.document properties cannot be used to access local files ('file:' protocol).

Syntax:

object.contentDocument;

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

This property is read-only.

Possible values:

Reference to the document object. If there is no document, the returned value is null.

Default: this property has no default value.

Example HTML code 1:

This example shows how to access the document of an iframe:

Code

frame.htm

<head>
    <script type="text/javascript">
        function SetFrameBGToRed () {
            var italicTag = document.createElement ("i");
            italicTag.innerHTML = "Italic text";

            var frame = document.getElementById ("myFrame");
            var frameDoc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
            frameDoc.body.style.backgroundColor = "red";
        }
    </script>
</head>
<body>
    <button onclick="SetFrameBGToRed ()">Set frame background to red</button>
    <iframe id="myFrame" src="frame.htm" width="250px" height="250px"></iframe>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>Contents of the frame</h1>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to enable content editing in an iframe element:

Code

editable.htm

<head>
    <script type="text/javascript">
        var editorDoc;
        function InitEditable () {
            var editor = document.getElementById ("editor");

            if (editor.contentDocument)
                editorDoc = editor.contentDocument;
            else
                editorDoc = editor.contentWindow.document;
            
            var editorBody = editorDoc.body;

                // turn off spellcheck
            if ('spellcheck' in editorBody) {   // Firefox
                editorBody.spellcheck = false;
            }

            if ('contentEditable' in editorBody) {
                    // allow contentEditable
                editorBody.contentEditable = true;
            }
            else {  // Firefox earlier than version 3
                if ('designMode' in editorDoc) {
                        // turn on designMode
                    editorDoc.designMode = "on";                
                }
            }
        }

        function ToggleBold () {
            editorDoc.execCommand ('bold', false, null);
        }
    </script>
</head>
<body onload="InitEditable ();">
    First, write and select some text in the editor.
    <br />
    <iframe id="editor" src="editable.htm"></iframe>
    <br /><br />
    You can toggle the bold/normal state of the selected text with this button:
    <br />
    <button onclick="ToggleBold ();">Bold</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Editable content example</title>
    <meta charset="utf-8" />
</head>
<body>
    Some text in the editor.
</body>
</html>