如何在模板中运行嵌入脚本？解决Instagram嵌入组件加载空白问题

这个问题我之前在做Angular项目的时候也碰到过！核心原因就是Angular的安全机制和动态脚本执行的限制，我来给你一步步讲怎么解决：

问题根源 #

Angular的DomSanitizer会默认对通过[innerHtml]插入的内容做安全过滤，而且直接插入的<script>标签不会自动执行——这就是为什么你只看到空白区块，Instagram的embed.js根本没跑起来，自然没法渲染内容。

具体解决步骤 #

1. 信任Instagram嵌入代码的HTML安全 #

首先得告诉Angular：这个第三方嵌入代码是安全的，别过滤它。我们需要用DomSanitizer的bypassSecurityTrustHtml方法处理嵌入代码：

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

@Component({
  selector: 'app-instagram-embed',
  templateUrl: './instagram-embed.component.html',
  styleUrls: ['./instagram-embed.component.css']
})
export class InstagramEmbedComponent implements OnInit, AfterViewInit {
  instagram_embeded_code: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    // 替换成你实际的Instagram嵌入代码
    const rawEmbedCode = `
      <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/YOUR_POST_LINK/" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
        <!-- 这里是Instagram提供的嵌入内容 -->
      </blockquote>
    `;
    // 标记内容为安全HTML
    this.instagram_embeded_code = this.sanitizer.bypassSecurityTrustHtml(rawEmbedCode);
  }

2. 手动加载并初始化Instagram脚本 #

因为[innerHtml]里的脚本不会执行，我们得在组件里动态创建脚本标签，加载完成后主动触发Instagram的渲染逻辑：

ngAfterViewInit(): void {
    // 先检查脚本是否已经加载过，避免重复插入
    const existingScript = document.querySelector('script[src="//www.instagram.com/embed.js"]');
    
    if (!existingScript) {
      const script = document.createElement('script');
      script.src = '//www.instagram.com/embed.js';
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);

      // 脚本加载完成后，调用Instagram的渲染方法
      script.onload = () => {
        if (window.instgrm) {
          window.instgrm.Embeds.process();
        }
      };
    } else {
      // 如果脚本已经存在，直接触发渲染
      if (window.instgrm) {
        window.instgrm.Embeds.process();
      }
    }
  }
}

3. 模板代码保持不变 #

你的模板代码不用改，还是原来的写法：

<div class="instagram_here" [innerHtml]="instagram_embeded_code"></div>

额外注意事项 #

• 确保你的Instagram嵌入代码里的data-instgrm-permalink是有效的帖子链接，不然即使脚本执行了也渲染不出内容。
• 重复加载脚本的问题：上面的代码已经做了检查，避免多次添加同一个脚本标签，节省资源。
• 安全风险：使用bypassSecurityTrustHtml时，一定要确保嵌入代码来自可信来源（比如官方Instagram生成的代码），防止XSS攻击。

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