主页 / coding / 问题 / 79490246
Accepted
volume one
Asked: 2025-03-07 01:44:04 +0800 CST

如何在 Vue 3 中等待外部脚本准备就绪？

  • 772

我正在尝试将 Google Pay 作为组件集成到应用程序中。我需要在执行任何操作之前加载 Google Pay Javascript 文件。这就是我正在做的事情：

onMounted(()=>{
  const scripts = [
    "https://pay.google.com/gp/p/js/pay.js",
  ];

  // Append the pay.js script to the <head> tag
  scripts.forEach(script => {
    let tag = document.createElement("script");
    tag.setAttribute("src", script);
    tag.setAttribute("async", true);
    
    document.head.appendChild(tag);
  });

  //Check if Google Pay exists
  function isGooglePayReady(){
    if('google' in window && Object.keys(window.google).length) {
      loadGooglePay()
    }
}

// Have to currently use a setTimeout to wait for script to load
setTimeout(()=> isGooglePayReady(), 500);

我将超时设置为500任意值，因为我不知道https://pay.google.com/gp/p/js/pay.js脚本加载需要多长时间。

除了使用函数之外，有没有更好的方法来等待脚本加载并准备就绪setTimeout()？

javascript

1 个回答

  1. Best Answer

    setTimeout()是的，您可以监听脚本的事件，以确保在执行您的函数load之前脚本已经完全加载，而不是使用。loadGooglePay()

      const scriptUrl = "https://pay.google.com/gp/p/js/pay.js";

  // Check if script already exists to avoid duplicate loading
  if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
    const script = document.createElement("script");
    script.setAttribute("src", scriptUrl);
    script.setAttribute("async", true);

    script.onload = () => {
      if (window.google) {
        loadGooglePay(); // Call your Google Pay initialization function here
      }
    };

    script.onerror = () => {
      console.error("Failed to load Google Pay script.");
    };

    document.head.appendChild(script);
  } else {
    // Script already loaded, initialize immediately
    if (window.google) {
      loadGooglePay();
    }
  }
});

    解释：

    1. 使用onload事件：这确保loadGooglePay()仅在脚本完全加载后运行。
    2. 防止重复脚本加载：在添加新脚本之前，首先检查该脚本是否已经存在。
    3. 处理错误：如果脚本加载失败，它会记录一条错误消息。
    4. 立即初始化：如果脚本已经加载（例如，由于热重新加载），它会loadGooglePay()立即调用。

    这种方式比之前更加可靠setTimeout()，可以保证脚本只加载一次，提高效率

    • 3

相关问题