When using jQuery to interact with an <iframe>'s content, you must first verify that the <iframe> content has fully loaded. This can be achieved by listening for the `load` event on the <iframe>. Next, use jQuery's `.contents()` method to access the document object of the <iframe>. Be aware that due to the browser's same-origin policy, this operation is only permitted if the parent page and the page loaded by the <iframe> share the same domain.

Here is a specific example:

Suppose you have a page containing an <iframe> with the ID "myIframe", and this <iframe> and the parent page are on the same domain. You want to reference the document object of the <iframe> from the parent page and modify its content.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <iframe id="myIframe" src="iframe-content.html" onload="iframeLoaded()"></iframe>
    <script>
        function iframeLoaded() {
            var iframeDoc = $('#myIframe').contents();

            // Now you can use iframeDoc to manipulate the <iframe>'s DOM.
            // For instance, change the background color of the body inside the <iframe>.
            iframeDoc.find('body').css('background-color', 'lightblue');
        }
    </script>
</body>
</html>
```

In this example, we first ensure the <iframe> content has loaded completely by attaching the `iframeLoaded` event handler to the <iframe> element. Within the `iframeLoaded` function, we retrieve the document object of the <iframe> using jQuery's `$('#myIframe').contents()`. Subsequently, we locate the `<body>` tag within the <iframe>'s document using the `.find('body')` selector and modify its background color via the `.css()` method.

This approach is particularly useful when you need to control the content or styling of the <iframe> from the parent page.

How do I refer to the document object of an < iframe > from the parent page, using jQuery?

1个答案

你的答案