在 Chrome 控制台中访问 iframe 内部 HTML

当我们在网站中使用 <iframe> 标签嵌入其他网站时，我们可能需要访问嵌入到 iframe 内部的 HTML 内容。在 Chrome 开发者工具的控制台中，我们可以通过一些简单的方法来访问 iframe 内部的 HTML。

第一步：选中 iframe 元素

首先在网站中打开开发者工具，然后在页面中找到包含 iframe 的元素。然后在 Elements 面板中选择该元素。

第二步：获取 iframe 的内容窗口

在控制台中输入以下代码，获取 iframe 的内容窗口：

const iframe = document.querySelector('iframe');
const iframeWindow = iframe.contentWindow;

这里的 iframe 是刚刚选中的元素。 iframe.contentWindow 属性可以获取到 iframe 中的 window 对象，从而访问 iframe 内部的内容。

第三步：获取 iframe 内部的 HTML

使用以下代码，我们可以获取 iframe 内部的 HTML 内容：

const iframeContent = iframeWindow.document.firstElementChild.outerHTML;
console.log(iframeContent);

这里使用 outerHTML 属性来获取 HTML 内容。

完整代码片段

// 获取 iframe 的内容窗口
const iframe = document.querySelector('iframe');
const iframeWindow = iframe.contentWindow;

// 获取 iframe 内部的 HTML
const iframeContent = iframeWindow.document.firstElementChild.outerHTML;
console.log(iframeContent);

使用以上代码片段，我们可以在控制台中访问 iframe 内部的 HTML 内容。通过对 iframe 内部内容的访问，我们可以更好地了解嵌入网页的结构和样式，从而更好地调试问题或者做出相关决策。