Angular 10 二次更新IFrame内容时报标识符已声明语法错误

错误根源 #

两次调用iframeDoc.write写入带const x=1的脚本时，iframe的全局作用域没有被清空，const声明的变量不允许重复定义，因此第二次写入时抛出语法错误。

可用修复方案 #

• 方案一：替换变量声明关键字
  将脚本中的const/let声明替换为支持重复声明的var：

iframeDoc.write(`DDD<script>var x=1;</script>`);

该方案改动最小，适合脚本逻辑简单、没有变量冲突风险的场景。

• 方案二：每次写入前重置iframe上下文
  先将iframe的src设置为about:blank触发重载，完全清空之前的全局上下文后再写入新内容，修改组件代码如下：

onBtnClick():void{
  this.getIframeDoc().subscribe(iframe => {
    // 重置iframe触发重载
    iframe.src = 'about:blank';
    const handleLoad = () => {
      this.apiService.getHTMLString().subscribe(htmlStr => {
        const doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.open();
        doc.write(htmlStr);
        doc.close();
        // 移除临时监听避免内存泄漏
        iframe.removeEventListener('load', handleLoad);
      });
    };
    iframe.addEventListener('load', handleLoad);
  }).unsubscribe();
}

该方案可以彻底解决变量、样式、DOM残留的问题，适合业务逻辑复杂的场景。

• 方案三：脚本逻辑封装到局部作用域
  将所有脚本逻辑包裹在立即执行函数（IIFE）中，避免变量泄漏到全局作用域：

iframeDoc.write(`DDD<script>(function(){
  const x=1;
  // 其他原有脚本逻辑
})();</script>`);

该方案不需要改动iframe的加载逻辑，同时可以避免全局变量污染，适合可以修改写入的HTML脚本内容的场景。

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