5 秒后自动按下小部件的下一步按钮

Question

我的网站上有以下加载预订系统的小部件。 有没有办法在加载 5 秒后按下一步按钮？

<!-- Practice Better Booking Widget: start -->
<style>.better-inline-booking-widget{position:relative;overflow:hidden}.better-inline-booking-widget iframe{position:absolute;top:0;left:0;width:100%;height:100%}</style>

<div class="better-inline-booking-widget" data-url="https://my.practicebetter.io" data-course="63bdc7debc7ce781dd1860e0" data-hash="600ad6742a9c2416e0768660" data-theme="54a288" data-theme-accent="d74b33" style="width:100%;max-width:550px;height:800px;" data-scrollbar-visible="false"></div>

<script type="text/javascript" src="https://cdn.practicebetter.io/assets/js/booking.widget.js"></script>
<!-- Practice Better Booking Widget: end -->

我试图添加setTimeout(document.getElementsByName("Next").click(),5000); 没有成功

Answer 1

由您的 JavaScript 呈现的按钮实际上包含在i-frame中。 i 帧遵循同源策略。 这意味着如果您想在托管 i 框架的页面中通过 JavaScript 与 i 框架的内容（包括按钮）进行交互，它们都需要位于同一域中。 如果它们在同一个域中，那么这就是您单击带有 JavaScript 的按钮的方式。

setTimeout(() => {
    let button = document.querySelector('.better-inline-booking-widget iframe').contentWindow.document.querySelector('button');
    button.click();  // This will throw an error unless the site is the same domain as the iframe
}, 5000);