在使用 jQuery 来操作 <iframe> 的内容时，首先需要确保 <iframe> 的内容已经加载完成。可以通过监听 <iframe> 的 `load` 事件来确保内容的加载。接下来，可以使用 jQuery 的 `.contents()` 方法来获取 <iframe> 的文档对象。这里需要注意，出于浏览器的同源策略，只有当父页面和 <iframe> 所加载的页面属于同一个域时，这种操作才是被允许的。

以下是一个具体的示例：

假设你有一个页面，页面中包含一个 <iframe>，其 ID 为 "myIframe"，并且此 <iframe> 和父页面位于同一域下。你想从父页面中引用 <iframe> 的文档对象，并修改其中的内容。

HTML 代码如下：

```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();

            // 现在你可以使用 iframeDoc 来操作 <iframe> 的 DOM 了
            // 例如，改变 <iframe> 里的 body 的背景颜色
            iframeDoc.find('body').css('background-color', 'lightblue');
        }
    </script>
</body>
</html>
```

在这个例子中，我们首先通过设置在 <iframe> 元素上的 onload 事件处理器 `iframeLoaded` 确保 <iframe> 的内容已经加载完成。然后，在 `iframeLoaded` 函数中，通过 jQuery 的 `$('#myIframe').contents()` 获取了 <iframe> 的文档对象。之后，我们通过 `.find('body')` 选择器找到了 <iframe> 文档中的 `<body>` 标签，并通过 `.css()` 方法修改了背景颜色。

这种方法非常适合在需要从父页面控制 <iframe> 内容或样式的情况下使用。

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

1个答案

你的答案