页面加载后插入的JavaScript无法执行，GTM数据层推送问题求助

问题根源 #

当你通过innerHTML把script标签插入到动态生成的div中时，浏览器出于安全机制，不会自动执行这些脚本——这是浏览器默认的防注入策略，避免恶意脚本被意外执行。

可行解决方案 #

方案1：用MutationObserver监听通知div，直接执行推送代码

不需要插入script标签，检测到目标div出现后，直接调用dataLayer.push：

// 创建MutationObserver实例监听通知容器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 匹配目标通知div
      if (node.classList?.contains('notification-small') && node.classList.contains('notification-type-message')) {
        // 直接推送数据到dataLayer
        dataLayer.push({
          event: "workflowStep",
          workflowName: "deposit",
          workflowStepNumber: 1,
          workflowStepName: "depositReceived",
          workflowCompleteFlag: 1,
          transactionId: "123"
        });
        // 如果只需要监听一次，执行后断开监听
        observer.disconnect();
      }
    });
  });
});

// 开始监听初始的通知容器
observer.observe(document.querySelector('.small-notifications-wrapper'), {
  childList: true,
  subtree: true
});

方案2：动态创建script元素并插入DOM

如果一定要用script标签的方式，不要把脚本写在div的HTML字符串里，而是单独创建script元素：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.classList?.contains('notification-small') && node.classList.contains('notification-type-message')) {
        // 创建独立的script元素
        const script = document.createElement('script');
        script.textContent = `
          dataLayer.push({
            event:"workflowStep",
            workflowName: "deposit",
            workflowStepNumber: 1,
            workflowStepName: "depositReceived",
            workflowCompleteFlag: 1,
            transactionId: "123"
          });
        `;
        // 插入到body中执行
        document.body.appendChild(script);
        // 执行后可移除脚本元素，避免冗余
        script.remove();
        observer.disconnect();
      }
    });
  });
});

observer.observe(document.querySelector('.small-notifications-wrapper'), {
  childList: true,
  subtree: true
});

方案3：修改消息服务的插入逻辑（若有权限）

如果能修改消息服务插入div的代码，不要用innerHTML包含script标签，而是先创建div，再创建script元素并append到div中：

// 示例：消息服务的插入逻辑应该改成这样
const notificationDiv = document.createElement('div');
notificationDiv.className = 'notification-small notification-type-message';

const script = document.createElement('script');
script.textContent = `
  dataLayer.push({
    event:"workflowStep",
    workflowName: "deposit",
    workflowStepNumber: 1,
    workflowStepName: "depositReceived",
    workflowCompleteFlag: 1,
    transactionId: "123"
  });
`;

notificationDiv.appendChild(script);
document.querySelector('.small-notifications-wrapper').appendChild(notificationDiv);

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