📅 最后修改于: 2023-12-03 15:01:11.764000 🧑 作者: Mango
IFrame contentWindow 属性返回一个对象，该对象表示 IFrame 窗口的窗口对象。
IFrame 是一种 HTML 元素，可以用来嵌入另一个 HTML 文档，甚至是一个完整的网页。IFrame 在 web 开发中非常常见，因为它可以让我们在一个网页中嵌入另一个网页或者文档，从而实现很多不同的功能，比如展示外部网页、加载动态内容，或者创建多窗口界面等等。
在开发过程中，我们经常需要对 IFrame 的内容进行操作，比如在父窗口中获取 IFrame 中的元素、修改 IFrame 的样式或者调用 IFrame 内部的 JavaScript 等等。这时，可以使用 contentWindow 属性来访问 IFrame 内部的窗口对象。
iframe.contentWindow
其中，iframe 是一个 IFrame 元素。
IFrame contentWindow 属性返回一个 DOM Window 对象，该对象表示 IFrame 内部的窗口对象。使用此对象，我们可以在父窗口中操作 IFrame 内部的内容，比如修改 IFrame 的属性、调用 IFrame 内部的 JavaScript 函数、获取 IFrame 内部的元素等等。
需要注意的是，IFrame contentWindow 属性只能在与 IFrame 元素同源的情况下使用。如果 IFrame 和父窗口不是同源的，那么访问 IFrame contentWindow 属性会抛出安全异常。
<!DOCTYPE html>
<html>
<head>
<title>IFrame contentWindow 示例</title>
</head>
<body>
<h1>这是父窗口</h1>
<iframe src="https://www.baidu.com" id="my-iframe"></iframe>
<script>
let iframe = document.getElementById("my-iframe");
let iframeWindow = iframe.contentWindow;
console.log(iframeWindow); // 输出 IFrame 内部的 window 对象
iframeWindow.document.body.style.backgroundColor = "red"; // 修改 IFrame 内部的样式
</script>
</body>
</html>
以上示例展示了如何使用 contentWindow 属性来获取 IFrame 中的窗口对象，以及如何在父窗口中通过修改 IFrame 内部的样式来进行操作。
需要注意的是，IFrame 中的内容是由远程服务器提供的，可能会包含一些恶意代码或者钓鱼网站等等。为了避免安全问题，我们应该尽量使用与 IFrame 同源的源站点，以及对 IFrame 内容进行筛选和验证。