如何为Thrive Architect弹窗潜在客户框输入字段设置自动聚焦？

你之前用window.onload失效的原因很明确：弹窗是页面初始加载完成后才动态渲染到DOM中的，初始加载时输入框根本不存在，所以focus()调用无效。针对Thrive Architect的渲染机制，给你几个可行的解决方案：

方法一：监听Thrive内置的弹窗打开事件 #

Thrive Architect的弹窗在显示时会触发thrive_lightbox_opened事件，我们可以监听这个事件来执行聚焦操作：

document.addEventListener('thrive_lightbox_opened', function() {
  // 加短延迟确保输入框完全渲染
  setTimeout(() => {
    const input = document.getElementById("inpt");
    if (input) input.focus();
  }, 100);
});

这个方法最贴合Thrive的原生逻辑，延迟时间可以根据实际加载速度调整（50-200ms都可以）。

方法二：用MutationObserver监听DOM变化 #

如果内置事件不生效，可以通过监听DOM变化来检测输入框是否被添加到页面中：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const input = document.getElementById("inpt");
    if (input && document.activeElement !== input) {
      input.focus();
      observer.disconnect(); // 找到元素后停止监听，避免重复触发
    }
  });
});

// 监听整个body的子元素变化
observer.observe(document.body, { childList: true, subtree: true });

这种方法通用性更强，不管弹窗是怎么触发的，只要输入框出现在DOM里，就会自动聚焦。

方法三：直接在弹窗的自定义JS中添加代码 #

Thrive Architect的弹窗设置里有“自定义JS”选项（一般在高级设置面板里），把聚焦代码直接放在这里：

const input = document.getElementById("inpt");
if (input) input.focus();

Thrive会在弹窗渲染完成后自动执行这里的代码，不需要额外的事件监听，是最简单的方案。

注意事项 #

• 确保输入框的IDinpt是唯一的，避免和页面其他元素ID冲突
• 测试时要覆盖弹窗的所有触发场景（自动弹出、按钮点击触发等）

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