JS 获取iframe中的元素|极客笔记

JS 获取iframe中的元素

在网页开发中，有时候我们会将一个网页嵌套在另一个网页中，这种嵌套的方式通常会使用<iframe>标签来实现。<iframe>标签可以使一个网页在另一个网页中显示，这种技术主要用于实现一些广告位展示、视频播放、网站的应用插件等。

然而，当我们想要对嵌套在<iframe>标签中的元素进行操作时，就会遇到一些困难。本文将详细介绍如何使用JavaScript来获取<iframe>中的元素。

1. 通过iframe的contentWindow属性获取iframe中的文档对象

要获取<iframe>中的元素，首先需要获取<iframe>的文档对象。通过iframe元素的contentWindow属性，可以访问到iframe的window对象，从而获取到iframe中的document对象。

const iframe = document.getElementById('myIframe');
const iframeDoc = iframe.contentWindow.document;

上面的代码中，我们首先通过getElementById方法选中了id为myIframe的<iframe>元素，然后通过contentWindow属性获取到iframe的document对象，将其赋值给iframeDoc变量。

2. 通过iframe的contentDocument属性获取iframe中的文档对象

除了使用contentWindow属性外，还可以使用contentDocument属性来获取<iframe>中的文档对象。这种方式更为简洁，但在某些情况下可能会存在兼容性问题。

const iframe = document.getElementById('myIframe');
const iframeDoc = iframe.contentDocument;

上述代码中，我们同样通过getElementById方法获取到id为myIframe的<iframe>元素，然后直接使用contentDocument属性获取到iframe的文档对象，赋值给iframeDoc变量。

3. 使用iframe的querySelector方法获取元素

当我们获取到<iframe>的文档对象之后，就可以使用类似于获取普通文档中元素的querySelector方法来获取<iframe>中的元素了。

const iframe = document.getElementById('myIframe');
const iframeDoc = iframe.contentDocument;
const iframeElement = iframeDoc.querySelector('#iframeElementId');

在上述代码中，我们通过querySelector方法选中了id为iframeElementId的元素，将其赋值给iframeElement变量。这样我们就成功获取到了<iframe>中的指定元素。

4. 示例：在iframe中修改元素内容

下面我们来演示一个具体的示例，通过JavaScript在<iframe>中修改一个元素的内容。

假设我们有一个包含<iframe>的父页面，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Page</title>
</head>
<body>
    <iframe src="child.html" id="myIframe"></iframe>
</body>
</html>

其中，child.html是嵌套在<iframe>中的子页面，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Child Page</title>
</head>
<body>
    <div id="content">Hello, I am inside iframe</div>
</body>
</html>

现在我们想要通过JavaScript在<iframe>中将<div>元素的内容修改为"Hello, I am changed"，我们可以这样做：

const iframe = document.getElementById('myIframe');
const iframeDoc = iframe.contentDocument;
const iframeElement = iframeDoc.querySelector('#content');
iframeElement.textContent = 'Hello, I am changed';

运行以上代码后，<div>元素的内容会被修改为"Hello, I am changed"。

通过以上示例，我们学会了如何使用JavaScript来获取<iframe>中的元素，并且可以看到在父页面中操作<iframe>中的元素并不困难。