通过Google Optimize原生JS为动态页面卡片加文本时的循环重复问题

问题原因 #

动态页面会持续加载新卡片元素，加上Google Optimize可能重复触发代码执行，导致每次执行都会给所有匹配的图片（包括已处理过的）重复添加文本，最终出现无限循环的重复内容。

解决方案 #

1. 给已处理元素添加标记（简单高效） #

修改代码，通过自定义属性标记已处理的图片，确保每个图片只被处理一次：

var images = document.querySelectorAll(".car-card .car-card__image:not([data-text-added])");

images.forEach(function(image){ 
  image.before("Hello world");
  // 添加标记，避免重复处理
  image.setAttribute("data-text-added", "true");
});

• 用:not([data-text-added])选择器过滤掉已处理的图片
• 处理完成后给图片添加data-text-added属性，后续执行时会自动跳过

2. 使用MutationObserver监听动态新增元素（适合持续加载场景） #

如果页面会不断动态加载新卡片，用MutationObserver监听DOM变化，只处理新增的未标记图片：

// 处理图片的通用函数
function processImages(targetNode = document) {
  const images = targetNode.querySelectorAll(".car-card .car-card__image:not([data-text-added])");
  images.forEach(img => {
    img.before("Hello world");
    img.setAttribute("data-text-added", "true");
  });
}

// 先处理页面已有的图片
processImages();

// 监听DOM新增节点，处理动态加载的图片
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // 如果新增节点是图片本身
        if (node.classList.contains("car-card__image")) {
          processImages(node);
        } 
        // 如果新增节点是容器，查找内部的图片
        else {
          processImages(node);
        }
      }
    });
  });
});

// 监听页面主体的DOM变化（可替换为卡片容器选择器以提升性能）
observer.observe(document.body, { childList: true, subtree: true });

3. 调整Google Optimize触发条件 #

检查Google Optimize实验的触发设置：

• 选择页面加载完成作为触发条件，而非可能重复触发的“元素可见”等条件
• 确保实验只在符合目标的页面上触发一次，避免代码重复执行

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