如何检测HTML元素是否由外部JavaScript文件创建？

原生JavaScript没有内置API可以直接返回DOM节点的创建脚本来源，但可以通过以下几种落地性强的方案实现区分：

方案1：劫持DOM操作API + 调用栈溯源（准确率最高） #

核心思路是重写原生DOM创建/插入方法，在节点生成时记录调用方的JS文件来源：

• 重写document.createElement、Element.appendChild、Element.insertBefore等会新增DOM节点的核心API
• 每次API被调用时通过new Error().stack获取调用栈，提取触发调用的JS文件URL
• 将节点和对应来源URL的映射关系存储在WeakMap中（避免污染原生DOM属性）
• 检测时匹配来源URL的域名，和预先维护的自有托管域名白名单对比即可判断是否为外部JS创建

示例代码：

// 配置自有托管域名白名单
const SELF_HOSTED_DOMAINS = new Set([
  'your-own-domain.com',
  'localhost',
  '127.0.0.1'
]);
// 存储节点和创建来源的映射
const nodeCreatorMap = new WeakMap();

// 劫持document.createElement
const originalCreateElement = document.createElement;
document.createElement = function (...args) {
  const newNode = originalCreateElement.apply(this, args);
  const callStack = new Error().stack;
  // 从调用栈中提取JS文件URL
  const urlMatches = callStack?.match(/https?:\/\/[^\s)]+/g);
  if (urlMatches && urlMatches.length >= 2) {
    // 下标0是当前劫持脚本的URL，取下标1为实际调用方URL
    const creatorScriptUrl = urlMatches[1];
    nodeCreatorMap.set(newNode, creatorScriptUrl);
  }
  return newNode;
};

// 检测方法
function isNodeCreatedByExternalScript(node) {
  const creatorUrl = nodeCreatorMap.get(node);
  if (!creatorUrl) return false; // 无来源可自行调整返回逻辑
  const urlObj = new URL(creatorUrl);
  return !SELF_HOSTED_DOMAINS.has(urlObj.hostname);
}

方案2：MutationObserver + 脚本执行时间窗口匹配（无API侵入） #

适合不想修改原生API的场景，准确率略低于方案1：

• 提前收集所有引入的外部script标签的src域名，生成外部脚本域名列表
• 用MutationObserver监听全局DOM的新增节点，记录每个节点的插入时间戳
• 监听所有script的load事件，记录每个外部脚本的执行时间窗口
• 若节点插入时间落在某外部脚本的执行窗口内，即可判定为该外部脚本创建

方案3：第三方组件特征匹配（性能最优） #

如果仅需要检测已知的第三方生成元素（如聊天机器人、广告iframe），可以直接用特征匹配：

• 维护常见第三方组件的特征库，包括固定id前缀、class名、自定义属性、src域名规则等
• 直接匹配节点特征即可快速判定来源，不需要做全链路追踪

注意事项 #

• 若外部脚本使用eval动态执行代码、或做了强混淆，调用栈可能无法提取到正确的URL，会降低检测准确率
• 跨域脚本未配置CORS时调用栈会隐藏完整URL，可给页面所有script标签添加crossorigin="anonymous"属性解决
• 劫持原生API时需保证返回值、参数逻辑和原生完全一致，避免影响页面原有功能

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