基于Stack Overflow方案获取同源iframe内容，如何仅显示table-wrap div并隐藏其余内容？

嘿，我明白你现在的困扰——想在自有域名的iframe里只展示.table-wrap这个div，其他内容都隐藏，但试了各种方法都没效果对吧？我来帮你捋清楚问题出在哪，以及怎么搞定它！

最常见的坑：操作时机不对 #

很多时候失败是因为你在iframe还没完全加载完就去操作它的DOM了，这时候.table-wrap元素根本还没渲染出来，自然找不到。所以第一步必须等iframe加载完成后再执行代码。

完整可行的代码方案 #

这里分两种情况，适配不同的依赖场景：

方案1：原生JavaScript（无依赖，推荐）

// 给iframe绑定加载完成事件
document.getElementById('iframeid').addEventListener('load', function() {
  // 获取iframe的window和document对象
  const iframeWin = this.contentWindow;
  const iframeDoc = iframeWin.document;

  // 隐藏body下所有子元素
  Array.from(iframeDoc.body.children).forEach(element => {
    element.style.display = 'none';
  });

  // 找到目标.table-wrap并显示，同时调整样式占满iframe
  const targetDiv = iframeDoc.querySelector('.table-wrap');
  if (targetDiv) {
    targetDiv.style.display = 'block';
    targetDiv.style.width = '100%';
    targetDiv.style.height = '100%';
    targetDiv.style.margin = '0';
    targetDiv.style.padding = '0';

    // 清理body的默认边距，避免留白
    iframeDoc.body.style.margin = '0';
    iframeDoc.body.style.padding = '0';
  }
});

方案2：使用jQuery（需iframe内也加载jQuery）

$('#iframeid').on('load', function() {
  const iframeWin = this.contentWindow;
  const $iframeBody = $(iframeWin.document.body);

  // 隐藏所有子元素
  $iframeBody.children().hide();

  // 显示目标div并调整样式
  const $targetDiv = $iframeBody.find('.table-wrap');
  if ($targetDiv.length) {
    $targetDiv.show().css({
      width: '100%',
      height: '100%',
      margin: '0',
      padding: '0'
    });
    $iframeBody.css({ margin: '0', padding: '0' });
  }
});

关键注意事项 #

• 同源策略检查：虽然你说部署在自有域名下，但要确保iframe的目标页面和你的父页面完全同域（协议、域名、端口都一致），否则浏览器会阻止你操作iframe的DOM，这时候就得用反向代理之类的方案绕开。
• 选择器准确性：确认.table-wrap的类名拼写完全正确，有没有嵌套在其他容器里？可以用iframe的开发者工具（右键iframe→检查）确认元素的真实选择器。
• 样式冲突：如果目标div本身有隐藏的样式，或者父容器有display:none，那光show()可能不够，得强制设置display:block !important（尽量少用!important，但必要时可以）。

内容的提问来源于stack exchange，提问作者digitalsuite.net