js 获取iframe中的dom|极客笔记

js 获取iframe中的dom

在web开发中，我们经常会使用iframe标签来嵌入其他网页或内容。但是有时候我们需要在父页面中操作iframe内部的DOM元素，这就需要我们使用JavaScript来获取iframe中的DOM。

什么是iframe？

iframe是HTML中的一个标签，用来在一个网页中嵌入另一个网页或内容。通过iframe，我们可以在当前页面中展示其他页面的内容，这种技术被广泛应用于网页嵌套、广告展示等场景。

以下是一个简单的iframe示例：

<iframe src="https://www.example.com" width="600" height="400"></iframe>

上面的代码会在当前页面中展示一个宽度为600px、高度为400px的iframe，该iframe加载的内容是https://www.example.com。

如何通过JavaScript获取iframe中的DOM？

要通过JavaScript获取iframe中的DOM，我们首先需要获取到iframe元素，然后再通过iframe元素的contentDocument属性或contentWindow属性来访问iframe内部的内容。

通过contentDocument属性获取

contentDocument是iframe元素的一个属性，它返回一个代表iframe内部文档的Document对象。通过contentDocument，我们可以像操作普通页面一样操作iframe内部的DOM元素。

以下是通过contentDocument获取iframe内部的DOM元素的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get DOM from iframe</title>
</head>
<body>
    <iframe id="myFrame" src="https://www.example.com" width="600" height="400"></iframe>

    <script>
        var iframe = document.getElementById("myFrame");
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

        // 操作iframe内部的DOM
        var innerBody = innerDoc.body;
        innerBody.style.backgroundColor = "lightblue";
    </script>
</body>
</html>

在上面的示例中，我们获取了id为”myFrame”的iframe元素，并通过contentDocument属性获取了它的内部文档。然后我们可以继续操作iframe内部的DOM元素，比如改变内部body的背景颜色。

通过contentWindow属性获取

除了contentDocument属性，还可以使用contentWindow属性来访问iframe内部的窗口对象。通过contentWindow，我们也可以获得iframe内部的DOM元素。

以下是通过contentWindow获取iframe内部的DOM元素的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get DOM from iframe</title>
</head>
<body>
    <iframe id="myFrame" src="https://www.example.com" width="600" height="400"></iframe>

    <script>
        var iframe = document.getElementById("myFrame");
        var innerWin = iframe.contentWindow;

        // 操作iframe内部的DOM
        var innerDiv = innerWin.document.createElement("div");
        innerDiv.textContent = "Hello from parent page!";
        innerWin.document.body.appendChild(innerDiv);
    </script>
</body>
</html>

在上面的示例中，我们获取了id为”myFrame”的iframe元素，并通过contentWindow属性获取了它的内部窗口对象。然后我们创建了一个新的div元素，将其添加到iframe内部的body中。

注意事项

同源策略：在使用JavaScript获取iframe内部的DOM时，需要注意同源策略。如果iframe的源与父页面的源不同，那么将无法直接访问iframe内部的内容。在某些情况下，可以通过postMessage等手段进行跨域通信。
加载完成：在操作iframe内部的DOM之前，需要确保iframe已经完全加载完成。可以通过监听iframe的load事件来确保在加载完成后再进行操作。