Angular 11中如何实现ASP.NET引入外部script加载第三方徽章的等效功能

方案一：直接复刻逻辑，不依赖外部脚本（最推荐） #

你拿到了原脚本的完整源码，完全可以自己实现对应逻辑，既避免第三方脚本的安全风险，也不会遇到document.write覆盖页面内容的问题：

1. 组件类中处理iframe安全地址：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-epn-badge',
  templateUrl: './epn-badge.component.html',
  styleUrls: ['./epn-badge.component.css']
})
export class EpnBadgeComponent implements OnInit {
  badgeIframeSrc: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {
    // 对应原参数 IDC,grey，可根据需求自行修改
    const badgeId = 'IDC';
    const style = 'grey';
    const rawSrc = `https://www.europetnet.org/epn-badge/epn-badge.php?id=${badgeId}&style=${style}`;
    // 信任目标地址，避免Angular安全拦截
    this.badgeIframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(rawSrc);
  }

  ngOnInit(): void {}
}

2. 模板文件（epn-badge.component.html）写对应结构：

<div id="epnbadgeiframewrapper">
  <iframe id="epnbadgeiframe" [src]="badgeIframeSrc"></iframe>
</div>

3. 样式文件（epn-badge.component.css）补全原脚本定义的样式：

#epnbadgeiframewrapper {
  height: auto;
}

#epnbadgeiframe {
  border: medium none;
  width: 205px;
  height: 35px;
}

方案二：兼容原外部脚本的实现 #

如果必须使用原外部脚本，需要解决页面加载完成后调用document.write会清空整个页面的问题，同时保证原脚本的参数匹配逻辑正常运行：

1. 模板中预留徽章插入容器：

<div id="epnBadgeContainer"></div>

2. 组件类中动态加载脚本，临时重写document.write方法：

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-epn-badge',
  templateUrl: './epn-badge.component.html',
  styleUrls: ['./epn-badge.component.css']
})
export class EpnBadgeComponent implements OnInit {
  constructor(
    private renderer2: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    const badgeContainer = this.document.getElementById('epnBadgeContainer');
    // 暂存原生document.write方法
    const originWrite = document.write;
    // 临时重写，把脚本输出的内容写入到预留容器
    document.write = (content: string) => {
      badgeContainer.insertAdjacentHTML('beforeend', content);
    };

    // 创建脚本标签
    const script = this.renderer2.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://www.europetnet.org/epn-badge.js?IDC,grey';
    // 脚本加载完成/失败后都要恢复原生document.write，避免影响页面其他功能
    script.onload = script.onerror = () => {
      document.write = originWrite;
    };

    // 把脚本插入到预留容器，保证原脚本可以正常匹配到自身的src参数
    this.renderer2.appendChild(badgeContainer, script);
  }
}

注：执行第三方外部脚本存在安全风险，优先选择方案一

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