如何在Wix网站通过URL触发页面按钮点击

问题原因 #

Wix的Button组件并未提供click()方法来模拟用户点击操作，所以你尝试的$w('#b2').click()会直接报错，这是组件本身的限制导致的。

可行实现方案 #

既然已经封装了showBox函数处理容器的显示/隐藏逻辑，直接调用该函数即可实现需求，无需绕路模拟按钮点击。修改后的代码可同时支持按钮点击和URL参数触发两种场景：

import wixLocation from 'wix-location'; // 必须导入Wix位置模块

function getUrlParameter(name) {
  const results = new RegExp('[?&]' + name + '=([^&#]*)').exec(wixLocation.url);
  return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

$w.onReady(function() {
  const buttons2 = [$w('#b1'), $w('#b2')];
  const boxes2 = [$w('#G1'), $w('#G1e')];

  // 绑定按钮点击事件
  buttons2.forEach((button, index) => {
    button.onClick(() => {
      showBox(index, boxes2);
    });
  });

  // 处理URL参数触发逻辑
  const triggerTarget = getUrlParameter('trigger');
  // 通过参数值直接指定要激活的容器
  if (triggerTarget === 'b1') {
    showBox(0, boxes2); // 对应b1关联的第一个容器
  } else if (triggerTarget === 'b2') {
    showBox(1, boxes2); // 对应b2关联的第二个容器
  }
});

function showBox(index, boxes) {
  boxes.forEach((box, boxIndex) => {
    boxIndex === index ? box.expand() : box.collapse();
  });
}

关键说明 #

1. 导入模块：Wix的wix-location需要显式导入才能使用，否则无法读取当前URL参数。
2. 参数优化：将原有的trigger=click改为更明确的trigger=b1或trigger=b2，可以精准指定要显示的容器，扩展性更强。
3. 逻辑复用：直接调用已有的showBox函数，保证按钮点击和URL触发的行为完全一致，避免重复编写切换逻辑。

使用示例 #

• 显示container1（对应Button1）：访问页面时携带URL参数 ?trigger=b1
• 显示container2（对应Button2）：访问页面时携带URL参数 ?trigger=b2

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