如何从iframe中仅获取ID为mydata的div代码？

很简单，你不需要先获取整个页面的HTML，直接定位到iframe里ID为mydata的div元素，再取它的outerHTML就可以了。这里给你两种实用的写法：

方式一：链式调用（简洁版） #

const targetDivHtml = document.getElementById("iframe_id").contentWindow.document.getElementById("mydata").outerHTML;

方式二：分步编写（更易读，方便调试） #

如果你需要调试或者追求更高的代码可读性，可以拆成几步来写：

// 先拿到iframe对应的window对象
const iframeWindow = document.getElementById("iframe_id").contentWindow;
// 获取iframe内部的document对象
const iframeDoc = iframeWindow.document;
// 定位到目标div并取出它的HTML代码
const targetDivHtml = iframeDoc.getElementById("mydata").outerHTML;

重要提醒 #

• 必须保证iframe和当前页面是同域的（协议、域名、端口都完全一致），不然浏览器的同源策略会阻止你访问iframe内的DOM元素，代码会直接报错。
• 如果iframe是动态加载的，一定要等它加载完成后再执行这段代码，比如监听load事件：

const iframe = document.getElementById("iframe_id");
iframe.addEventListener('load', function() {
  const targetDivHtml = this.contentWindow.document.getElementById("mydata").outerHTML;
  // 在这里处理你拿到的div代码就好啦
});

内容的提问来源于stack exchange，提问作者user9597092