当然可以！你完全不需要提前在页面body里嵌入iframe标签，用JavaScript动态创建并加载iframe就能实现同样的效果，下面是具体的实现方案：

核心思路 #

动态创建iframe元素，设置好目标页面的src，监听它的load事件（确保页面完全加载完成），然后在事件回调里访问iframe内部的DOM结构，提取你需要的#data元素。

原生JavaScript实现 #

// 1. 创建iframe元素
const iframe = document.createElement('iframe');
iframe.src = 'http://127.0.0.1/mypage.html';
iframe.id = 'my_iframe';
// 隐藏iframe，避免影响页面布局
iframe.style.display = 'none';

// 2. 监听加载完成事件，确保页面渲染完毕再获取DOM
iframe.addEventListener('load', function() {
  // 访问iframe内部的文档对象，获取目标元素
  const dataElement = this.contentDocument.getElementById('data');
  
  if (dataElement) {
    console.log('成功获取到内容:', dataElement.textContent);
    // 这里可以根据需求处理元素，比如提取HTML、修改内容等
  } else {
    console.log('未找到目标#data元素');
  }
});

// 3. 将iframe添加到页面中，触发加载流程
document.body.appendChild(iframe);

jQuery实现（如果你习惯用jQuery） #

// 1. 动态创建iframe并配置属性
const $iframe = $('<iframe>', {
  src: 'http://127.0.0.1/mypage.html',
  id: 'my_iframe',
  css: { display: 'none' }
});

// 2. 绑定加载完成事件
$iframe.on('load', function() {
  // 用jQuery的contents()方法访问iframe内部DOM
  const $data = $(this).contents().find('#data');
  
  if ($data.length > 0) {
    console.log('成功获取到内容:', $data.text());
  } else {
    console.log('未找到目标#data元素');
  }
});

// 3. 添加到页面触发加载
$('body').append($iframe);

重要注意事项 #

• 同源策略限制：这个方法只有当目标页面（http://127.0.0.1/mypage.html）和当前页面是同源的（协议、域名、端口完全一致）才能生效。如果跨域，浏览器会出于安全考虑阻止你访问iframe内部的DOM，这时候你需要用其他方案（比如CORS、服务器代理等）来解决。
• 必须等待load事件触发后再获取DOM：如果在iframe还没加载完就去访问内部元素，会得到null或空的结果，因为目标元素还没渲染出来。

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