如何用Angular/原生JS在iframe中仅显示指定div？无需jQuery

核心限制：浏览器同源策略 #

你遇到的Blocked a frame with origin...错误是浏览器同源策略的强制限制——当iframe加载的是非自有远程网站（与你的页面域名、协议、端口任一不同），浏览器会完全禁止父页面访问iframe的DOM内容，不管用Angular、原生JS还是jQuery都绕不开这个安全机制。

可行实现思路（分场景） #

因为同源策略是硬限制，只有以下几种场景能实现你的需求：

1. 远程网站开放跨域权限 #

如果能联系到远程网站的开发者，可让对方做以下操作之一：

• 在远程网站的响应头添加Access-Control-Allow-Origin: http://localhost:4400，允许你的域名访问其DOM
• 或者通过postMessage机制，让iframe主动向父页面发送目标div的内容/位置信息，父页面再根据信息调整iframe显示（比如滚动到目标位置）

2. 服务器端代理提取内容（推荐） #

前端直接访问跨域iframe的DOM被禁止，可通过自己的服务器作为中间层绕过限制：

• 服务器请求远程网站的完整HTML
• 在服务器端解析HTML，提取出你需要的特定div内容
• 将提取后的内容返回给Angular页面，直接渲染（无需使用iframe）

Angular端示例代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-target-div',
  template: '<div [innerHTML]="targetDivContent"></div>'
})
export class TargetDivComponent {
  targetDivContent: string;

  constructor(private http: HttpClient) {
    // 调用自己的代理接口获取目标div内容
    this.http.get('/api/fetch-target-div', { responseType: 'text' })
      .subscribe(content => {
        this.targetDivContent = content;
      });
  }
}

3. 利用锚点滚动（仅适用于固定位置的div） #

如果远程网站的目标div有对应的URL锚点（比如http://example.com#target-div-id），可直接将iframe的src设置为带锚点的地址，iframe加载后会自动滚动到该div位置。但这种方法只能实现滚动，无法隐藏页面其他内容，且仅当div有固定锚点时有效。

关于contentWindow.document.body返回null的补充 #

除了跨域问题，还有可能是iframe未加载完成就调用了getBody()。即使无跨域，也需在iframe的load事件触发后再访问DOM：

@ViewChild('iframe', { static: true }) iframe: ElementRef;

ngAfterViewInit(): void {
  this.iframe.nativeElement.addEventListener('load', () => {
    // 非跨域场景下可正常访问
    console.log(this.iframe.nativeElement.contentWindow.document.body);
  });
}

但只要是跨域场景，这段代码仍会触发跨域错误，无法正常访问DOM。

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