JS操作iframe里的dom(实例讲解)

在JavaScript中，操作iframe内的DOM元素需要确保几个前提条件：iframe已经加载完成，且你有权限访问iframe内的内容（即iframe和父页面需要同源，或者iframe的`sandbox`属性允许父页面访问）。

以下是一个简单的实例，展示了如何在父页面中访问并操作iframe内的DOM元素。

首先，假设你有一个HTML文件（我们称之为`parent.html`），它包含一个iframe，iframe加载的是另一个HTML文件（`child.html`）。

### parent.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
<script>
window.onload = function() {
    // 确保iframe加载完成
    var iframe = document.getElementById('myIframe');
    if (iframe.contentWindow && iframe.contentWindow.document) {
        // 等待iframe的DOM加载完成
        iframe.contentWindow.onload = function() {
            // 现在可以安全地访问iframe的DOM了
            var childDoc = iframe.contentWindow.document;
            // 假设我们要修改iframe中一个id为'targetElement'的元素的文本
            var targetElement = childDoc.getElementById('targetElement');
            if (targetElement) {
                targetElement.textContent = '这是从父页面修改的内容';
            }
        };
    }
};
</script>
</head>
<body>
<iframe id="myIframe" src="child.html"></iframe>
</body>
</html>

### child.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<div id="targetElement">原始内容</div>
</body>
</html>

在这个例子中，`parent.html`包含了一个iframe，该iframe加载了`child.html`。在`parent.html`的JavaScript中，我们首先检查iframe是否加载完成，并等待其`contentWindow.document`（即iframe的文档对象）加载完成。一旦这些条件满足，我们就可以安全地访问并修改iframe内的DOM元素了。

注意：如果`child.html`和`parent.html`不在同一个域下，由于同源策略的限制，你将无法直接访问iframe内的DOM元素。在这种情况下，你可能需要使用`window.postMessage`方法来进行跨域通信。