Angular 4中如何通过ID子串获取指定元素？

ADAL生成的adalRenewFrame开头的iframe，确实可以通过ID前缀来定位，下面给你几种适配Angular 4场景的可行实现方式：

1. 简洁原生JS方式（快速落地） #

直接用DOM选择器的属性匹配语法，[id^="xxx"]表示元素ID以指定字符串开头，一行就能定位到目标iframe：

// 定位并删除目标iframe
const adalRenewFrame = document.querySelector('iframe[id^="adalRenewFrame"]');
if (adalRenewFrame) {
  adalRenewFrame.remove();
}

你可以把这段代码放在acquireToken的成功/失败回调里，确保令牌获取流程结束后执行清理。

2. Angular 4 最佳实践（使用Renderer2） #

在Angular中直接操作document并非最佳实践（尤其是考虑SSR等场景），推荐用Renderer2来安全操作DOM：
首先在组件中注入所需依赖：

import { Component, Renderer2, ElementRef } from '@angular/core';
import { AdalService } from 'adal-angular'; // 假设你使用的是adal-angular包

@Component({
  selector: 'app-auth-component',
  templateUrl: './auth.component.html'
})
export class AuthComponent {
  constructor(
    private adalService: AdalService,
    private renderer: Renderer2,
    private elRef: ElementRef
  ) {}

  acquireTokenAndCleanFrame() {
    const resource = '你的API资源地址';
    this.adalService.acquireToken(resource)
      .subscribe(
        (token) => {
          // 处理获取到的令牌逻辑
          this.cleanAdalRenewFrame();
        },
        (error) => {
          // 处理错误逻辑，也建议清理iframe
          this.cleanAdalRenewFrame();
        }
      );
  }

  private cleanAdalRenewFrame(): void {
    // 获取当前文档下的所有iframe元素
    const iframes = this.elRef.nativeElement.ownerDocument.getElementsByTagName('iframe');
    // 倒序遍历避免删除元素后索引混乱
    for (let i = iframes.length - 1; i >= 0; i--) {
      const iframe = iframes[i];
      if (iframe.id?.startsWith('adalRenewFrame')) {
        this.renderer.removeChild(iframe.parentNode, iframe);
        break; // ADAL一般只会生成一个这类iframe，找到后直接跳出循环即可
      }
    }
  }
}

补充说明 #

正常情况下ADAL应该会自动清理这个renew iframe，但如果遇到特殊场景（比如网络异常、回调未触发），手动清理是完全可行的。上面两种方法都能精准定位到目标元素，不用担心动态ID的问题。

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