点击链接加载DOM元素触发“Variable has already been declared”错误的解决办法

问题原因 #

你遇到的报错本质是：你加载的目标URL内容中包含重复的变量声明代码。第一次点击加载时，这些变量会在当前作用域（通常是全局作用域）被声明；二次点击重新加载内容时，相同的变量声明语句再次执行——ES6的let/const不允许同一作用域内重复声明变量，即便在严格模式下，var重复声明也会触发语法错误，最终导致控制台报错。

你可能误以为重写DOM元素后，之前加载的代码就会被清除，但实际上JavaScript变量的生命周期和DOM元素无关，一旦在作用域中被声明，就会一直存在，直到作用域被销毁。

修复方案 #

1. 优化加载的目标内容（推荐）

直接修改你要加载的URL中的代码，将所有逻辑包裹在独立的函数作用域内，避免污染全局作用域：

// 把目标页面的代码改成自执行函数包裹
(function() {
  // 原来的变量声明和逻辑
  let contentData = '示例内容';
  // ...其他业务代码
})();

这样每次加载的代码都运行在独立的函数作用域中，变量不会和全局或之前加载的代码产生冲突，是最彻底的解决方式。

2. 替换DOM节点销毁旧作用域（无法修改目标内容时使用）

在加载新内容前，将#editor元素替换成一个全新的DOM节点，让之前加载的代码失去挂载载体，相关变量会被垃圾回收：

$('[data-source]').on('click', function(e) {
  e.preventDefault();
  const targetUrl = $(this).data('source');
  // 创建新的editor节点，替换旧节点
  const newEditor = $('<div id="editor"></div>');
  $('#editor').replaceWith(newEditor);
  // 加载内容到新节点
  newEditor.load(targetUrl);
});

3. 使用iframe隔离作用域（极端场景）

如果目标内容包含大量全局变量且完全无法修改，可以将#editor改为iframe，利用iframe的独立全局作用域避免冲突：

<!-- 先把原div改成iframe -->
<iframe id="editor"></iframe>

$('[data-source]').on('click', function(e) {
  e.preventDefault();
  const targetUrl = $(this).data('source');
  $('#editor').attr('src', targetUrl);
});

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