window.addEventListener('load'，...不能在Safari上触发? [英] window.addEventListener('load',... not firing on Safari?

问题描述

加载后，我需要重定向页面并从URL获取参数.我可以通过单击按钮来完成.

I need redirect page after it load and get param from URL. I can do by button click.

但是我想要自动重定向页面(无用户输入).我正在使用window.addEventListener('load', () => handleClick())，它在Chrome上运行良好.但是在Safari(台式机和移动版)上，它并不总是会触发(仅有时会触发-并非总是触发).

But I want redirect page automatic (without user input). I am use window.addEventListener('load', () => handleClick()) and it work well on Chrome. But on Safari (desktop and mobile) it not always fire (only sometimes it fire - not always).

我可以通过在处理程序中添加alert('Beginning');来看到这一点-在Chrome上，页面加载后会自动触发，但在Safari上则不会.

I can see this by add alert('Beginning'); in handler - on Chrome this fire automatic after page load, but not on 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;

推荐答案

我强烈建议您避免使用诸如window.addEventListener或document.addEventListener之类的侦听器直接引用DOM.实际上，这就是为什么您使用React而不是jQuery来创建虚拟DOM而不是直接向真实DOM收费并降低Web性能的原因.

I strongly advise that you avoid referencing the DOM directly using listeners such as window.addEventListener or document.addEventListener. In fact, this is why you are using React and not jQuery, to create a virtual DOM instead of charging the real DOM directly and reducing the web performance.

在React中，您具有反应钩子以实现您要执行的操作.它们公开了一堆触发某些事件的生命周期方法.就您而言， useEffect 符合您的要求.该钩子类似于componentDidMount()和componentDidUpdate():

In React, you have React hooks to achieve what you are trying to do. They expose a bunch of lifecycle methods that trigger some events. In your case, useEffect fits your requirements. This hook is similar to componentDidMount() and componentDidUpdate():

通过使用此Hook，您告诉React您的组件需要执行 渲染后的东西. React会记住您传递的功能 (我们将其称为效果")，并在之后 执行DOM更新.为此，我们设置了文档标题， 但是我们也可以执行数据获取或调用其他命令 API.

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our "effect"), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

由于Strapi付款和Safari移动版的需要(需要等待页面加载)，我混合了使用钩子和您的方法来确保在加载页面时触发效果.

Due to the needs of Strapi payments and Safari mobile (needs to wait for the page load) I've mixed the hook and your approach to ensure that the effect is triggered when the page is loaded.

应用于您的代码:

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功能，因此可以在所有浏览器中使用.

Basically, the code will trigger the useEffect function once the DOM tree is loaded and it will execute your handleClick function. The empty array ([]) passed as an argument is called deps; means that you are triggering the effect only once. Of course, it will work in all browsers since it's a React feature.

这篇关于window.addEventListener('load'，...不能在Safari上触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！