Wix自定义JavaScript仅页面刷新触发，如何实现首次加载执行？

问题根源 #

Wix属于单页应用（SPA），页面渲染机制和普通静态页面不同，window.onload、DOMContentLoaded这类原生DOM事件无法精准匹配Wix页面元素完全渲染完成的时机，导致代码仅在刷新时触发。

解决方法 #

1. 使用Wix官方页面生命周期钩子onReady

这是Wix推荐的页面初始化触发时机，会在页面所有元素渲染完成后自动执行，直接替换原有代码逻辑：

$w.onReady(function () {
  const mystring = document.querySelectorAll('#comp-id p span');
  for (const taglines of mystring) {
    const words = taglines.innerHTML.split(', ');
    for (let i = 0; i < words.length; i++) { // 声明局部变量i，避免全局污染
      const swords = words[i].replace(/\s+/g, '-').toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
      words[i] = `<a href="http://example.com/${swords}" class="menuintag">${words[i]}</a>`;
    }
    taglines.innerHTML = words.join(' ');
  }
});

• 注意：确保#comp-id是Wix编辑器中对应组件的正确ID（可在组件右侧属性面板查看复制），避免拼写错误导致元素无法选中。

2. 处理动态加载内容（如数据库/Repeater组件）

如果目标文本来自Repeater或数据库动态加载，需要配合对应组件的加载事件：

$w.onReady(function () {
  // 监听Repeater组件的项加载完成事件
  $w('#repeaterId').onItemReady(($item, itemData) => {
    const taglines = $item('#comp-id p span');
    if (taglines) {
      const words = taglines.innerHTML.split(', ');
      for (let i = 0; i < words.length; i++) {
        const swords = words[i].replace(/\s+/g, '-').toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
        words[i] = `<a href="http://example.com/${swords}" class="menuintag">${words[i]}</a>`;
      }
      taglines.innerHTML = words.join(' ');
    }
  });
});

3. 调试排查

• 在$w.onReady开头加入日志，确认代码是否触发：

  $w.onReady(function () {
    console.log("页面已加载，开始执行自定义逻辑");
    // 其余代码...
  });
  

• 打开浏览器开发者工具（F12）的Console面板，查看是否有报错信息，排查元素选择器错误、变量未声明等问题。

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