window.addEventListener('load',... 沒有在 Safari 上觸發？

Question

我需要在加載后重定向頁面並從 URL 獲取參數。 我可以通過單擊按鈕來完成。

但我想自動重定向頁面（無需用戶輸入）。 我正在使用window.addEventListener('load', () => handleClick())並且它在 Chrome 上運行良好。 但是在 Safari（桌面和移動設備）上，它並不總是會觸發（只是有時會觸發 - 並非總是如此）。

我可以通過添加alert('Beginning');看到這一點alert('Beginning'); 在處理程序中 - 在 Chrome 上，頁面加載后會自動觸發，但在 Safari 上不會。

我該如何解決這個問題？

謝謝！

const handleClick = async (event) => {

  alert('Beginning'); //For debugging


  const stripe = await stripePromise;
  const { error } = await stripe.redirectToCheckout({
    param,
  });
}

if (typeof window !== `undefined`) {
const param = new URLSearchParams(window.location.search).get('param');
}

const Page = () => {

  if (typeof window !== `undefined`) {
  window.addEventListener('load', () => handleClick())
  }

  return (
    <section >

      <button role="link" onClick={handleClick}> //Only for fallback
      Press
    </button>

    </section>
  );
};

export default Page;

Answer 1

load事件可能不是很可靠，因為在加載 DOM 之前您的組件可能不會被掛載。 相反，您可以使用 React 組件的生命周期方法在您的組件掛載到頁面時做出響應。 例如：

function Component() {
  useEffect(() => alert(1), []);

  return (
    <h1>hello world!</h1>
  );
}

您可以在文檔中找到有關 Effect 鈎子的更多信息。 將它與一個空數組一起使用使它像componentDidMount()用於類組件。

Answer 2

我強烈建議您避免使用諸如window.addEventListener或document.addEventListener偵聽器直接引用 DOM。 事實上，這就是為什么您使用 React 而不是 jQuery 來創建虛擬 DOM 而不是直接向真實 DOM 收費並降低 Web 性能的原因。

在 React 中，你有React 鈎子來實現你想要做的事情。 它們公開了一堆觸發某些事件的生命周期方法。 在您的情況下， useEffect符合您的要求。 這個鈎子類似於componentDidMount()和componentDidUpdate() ：

通過使用這個 Hook，你告訴 React 你的組件需要在渲染后做一些事情。 React 會記住您傳遞的函數（我們將其稱為“效果”），並在執行 DOM 更新后稍后調用它。 在這個效果中，我們設置了文檔標題，但我們也可以執行數據獲取或調用其他一些命令式 API。

由於 Strapi 支付和 Safari 移動（需要等待頁面加載）的需要，我混合了鈎子和您的方法，以確保在加載頁面時觸發效果。

應用於您的代碼：

const Page = () => {

  useEffect(() => {
     if (typeof window !== `undefined`) { window.addEventListener('load', () => handleClick()) }
  }, []);

  return (
    <section >

      <button role="link" onClick={handleClick}> //Only for fallback
      Press
    </button>

    </section>
  );
};

export default Page;

基本上，一旦加載 DOM 樹，代碼將觸發useEffect函數，它將執行您的handleClick函數。 作為參數傳遞的空數組 ( [] ) 稱為deps ； 意味着你只觸發一次效果。 當然，它適用於所有瀏覽器，因為它是 React 特性。

Answer 3

如果您只想在加載頁面中觸發一個函數並將其重定向到另一個 url，您可以使用這樣的自動調用函數

(function(){
alert('Beginning');
if (typeof window !== 'undefined') {
    const param = new URLSearchParams(window.location.search).get('param');
}
if (param !== 'undefined' && param !== null $$ param!==[]){
    window.location.href = 'your_new_url_string?param='+param;
}
})();