如何在Angular中执行动态HTML与JavaScript代码？

方案1：手动提取并执行JavaScript代码 #

Angular的安全机制会过滤并阻止动态HTML中的<script>标签自动执行，所以可以先提取脚本内容单独执行：

• 用DomSanitizer.bypassSecurityTrustHtml()处理HTML字符串，绑定到组件的[innerHTML]上
• 通过正则或临时DOM元素提取HTML里的脚本内容
• 用eval()或动态创建<script>标签执行代码（注意仅信任API返回内容时使用）

代码示例：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

htmlContent: SafeHtml;
apiResponse = '<div>Hello</div><script>alert("test")</script>';

ngOnInit() {
  // 处理HTML安全校验
  this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(this.apiResponse);
  
  // 提取并执行脚本
  const scriptMatch = this.apiResponse.match(/<script>([\s\S]*?)<\/script>/);
  if (scriptMatch?.[1]) {
    // 方式1：使用eval执行
    eval(scriptMatch[1]);

    // 方式2：创建script标签插入页面执行
    const script = document.createElement('script');
    script.textContent = scriptMatch[1];
    document.body.appendChild(script);
    document.body.removeChild(script); // 执行完成后移除标签
  }
}

方案2：用Renderer2规范操作DOM执行脚本 #

使用Angular官方推荐的Renderer2操作DOM，替代直接操作document：

• 先将处理后的HTML插入指定容器
• 从容器中提取脚本内容，动态创建脚本标签执行

代码示例：

import { Renderer2, ElementRef, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer, private renderer: Renderer2) {}

@ViewChild('contentContainer') contentContainer: ElementRef;
apiResponse = '<div>Hello</div><script>alert("test")</script>';

ngAfterViewInit() {
  // 插入HTML到容器
  const safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.apiResponse);
  this.renderer.setProperty(this.contentContainer.nativeElement, 'innerHTML', safeHtml);
  
  // 提取并执行容器内的脚本
  const scripts = this.contentContainer.nativeElement.querySelectorAll('script');
  scripts.forEach(scriptEl => {
    const newScript = this.renderer.createElement('script');
    newScript.textContent = scriptEl.textContent;
    this.renderer.appendChild(document.body, newScript);
    this.renderer.removeChild(document.body, newScript);
  });
}

模板中需添加容器：

<div #contentContainer></div>

方案3：将JS逻辑转为Angular组件/指令（推荐） #

如果API返回的脚本是特定交互逻辑（如按钮点击、表单验证），建议和后端协商拆分内容：

• API返回HTML结构+逻辑配置（如元素ID、事件类型、动作参数）
• 在Angular中通过组件、指令或服务实现对应逻辑，避免直接执行动态脚本

示例API返回格式：

{
  "html": "<button id=\"testBtn\">Click Me</button>",
  "actions": [
    {
      "elementId": "testBtn",
      "event": "click",
      "action": "alert",
      "params": ["Button clicked"]
    }
  ]
}

Angular中实现逻辑：

ngAfterViewInit() {
  this.apiData.actions.forEach(action => {
    const el = this.contentContainer.nativeElement.querySelector(`#${action.elementId}`);
    if (el) {
      this.renderer.listen(el, action.event, () => {
        if (action.action === 'alert') {
          alert(action.params[0]);
        }
        // 可扩展其他动作逻辑
      });
    }
  });
}

该方案无XSS风险，完全符合Angular架构规范。

方案4：用iframe加载内容 #

将API返回的HTML+JS放入iframe中，iframe会自动执行内部脚本：

• 动态创建iframe元素，通过srcdoc直接加载内容，或生成Blob URL加载

代码示例：

import { Renderer2, ElementRef, ViewChild } from '@angular/core';

constructor(private renderer: Renderer2) {}

@ViewChild('iframeContainer') iframeContainer: ElementRef;
apiResponse = '<div>Hello</div><script>alert("test")</script>';

ngAfterViewInit() {
  const iframe = this.renderer.createElement('iframe');
  // 直接用srcdoc加载内容
  iframe.srcdoc = this.apiResponse;
  // 也可以用Blob URL方式
  // const blob = new Blob([this.apiResponse], {type: 'text/html'});
  // iframe.src = URL.createObjectURL(blob);
  this.renderer.appendChild(this.iframeContainer.nativeElement, iframe);
}

模板中添加容器：

<div #iframeContainer></div>

注意：需调整iframe的样式（如边框、宽高）以适配页面。

关键注意事项 #

• 安全风险：动态执行脚本存在XSS攻击风险，必须确保API返回内容完全可信
• 版本适配：不同Angular版本的DomSanitizer和Renderer2可能存在细微差异，需按需调整
• 性能优化：大量动态创建元素和执行脚本时，需注意页面性能损耗

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