如何在Practice Better预订组件加载5秒后自动点击Next按钮？

问题根源 #

你之前的代码setTimeout(document.getElementsByName("Next").click(),5000);存在两个核心问题：

1. 参数传递错误：setTimeout的第一个参数需要传入函数，而你直接执行了click()，导致按钮被立即点击，而非等待5秒触发。
2. iframe跨域限制：该预订组件通过动态生成的iframe加载，主页面DOM无法直接访问iframe内部元素（受浏览器同源策略约束）。

可行解决方案 #

方案一：监听组件官方加载事件（优先尝试）

部分第三方组件会在加载完成后触发自定义事件，你可以监听Practice Better组件的加载完成事件，再启动定时器：

// 监听组件加载完成的自定义事件
document.addEventListener('practicebetter:widget:loaded', function() {
  setTimeout(() => {
    const iframe = document.querySelector('.better-inline-booking-widget iframe');
    if (iframe) {
      try {
        // 获取iframe内的Next按钮并执行点击
        const nextBtn = iframe.contentDocument.getElementsByName('Next')[0];
        nextBtn?.click();
      } catch (err) {
        console.log('无法操作iframe元素：浏览器同源策略限制');
      }
    }
  }, 5000);
});

方案二：监听iframe加载事件（备用）

如果没有官方自定义事件，可通过MutationObserver监听组件容器，等待iframe生成后再监听其加载状态：

const widgetContainer = document.querySelector('.better-inline-booking-widget');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const iframe = widgetContainer.querySelector('iframe');
    if (iframe && !iframe.dataset.loadTracked) {
      iframe.dataset.loadTracked = 'true';
      iframe.addEventListener('load', () => {
        setTimeout(() => {
          try {
            const nextBtn = iframe.contentDocument.getElementsByName('Next')[0];
            nextBtn?.click();
          } catch (err) {
            console.error('自动点击失败：', err);
          }
        }, 5000);
      });
      observer.disconnect();
    }
  });
});

observer.observe(widgetContainer, { childList: true });

关键注意事项 #

• 同源策略限制：如果你的网站域名与practicebetter.io不同，浏览器会阻止主页面访问iframe内部DOM，此时上述代码会触发权限错误。这种情况下，需联系Practice Better官方支持，确认是否提供自动跳转API或绕过限制的方案。
• 确保代码放在组件脚本之后加载，或用DOMContentLoaded事件包裹，保证操作的元素已存在于页面中。

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