javascript - 如何在 setTimeout 后在 AMP 页面上显示弹出窗口

Question

在经过一定时间后，我试图让弹出窗口出现在 AMP 页面上，但在控制台中出现错误 - [amp-script] Blocked 1 attempts to modify DOM element attributes or styles. For variable-sized <amp-script> containers, a user action has to happen first.。但是我需要在用户的页面上显示没有任何操作的弹出窗口。关于我该怎么做的任何想法？

  <style amp-custom>
    .ampPopup {
      display: none;
    }

    .ampPopup.open {
      display: block;
    }
  </style>
  
  <amp-script layout='container' script='time-script' className='sample'>
    <section className='ampPopup'>
      <h1>Popup</h1>
    </section>

    <p>...</p>
    <p>...</p>
    <p>...</p>
  </amp-script>

  <script id='time-script' type='text/plain' target='amp-script'>
    const el = document.querySelector('.ampPopup');
    const elClose = document.querySelector('.ampPopupClose');

    setTimeout(() => {
      el.classList.add('open');

      elClose.addEventListener('click', function() {
        el.classList.remove('open');
      });
    }, 3000);
  </script>

我在这里使用 amp-script，但也许这不是最佳方式。

Answer 1

我发现解决这个问题的解决方案 -沙盒

该解决方案正在使用amp-user-notification