在不加载的情况下将函数附加到 Window - React & Next.js

Question

问题

我有一个外部脚本使用它在一个React Next.js项目。https://app.lemonsqueezy.com/js/checkout.js

但是，当使用next/link组件从其他页面打开页面时，脚本无法正常运行。我认为原因是上述脚本附加到基于onLoad函数的窗口，并且在Next.js中，onLoad在从另一个页面导航时不会触发。

所以我需要一种方法来手动附加功能的窗口使用next/script组件。

相应的checkout JS在他们的脚本中有类似这样的东西。

function i() {
window.LemonSqueezyCheckout ||
(window.LemonSqueezyCheckout = new t());
}
window.addEventListener
? window.addEventListener("load", i)
: window.attachEvent && window.attachEvent("onload", i);

所以我尝试使用next/script组件添加到窗口，但它不起作用。

<Script src="https://app.lemonsqueezy.com/js/checkout.js"
onLoad={() => {
// Attach to window when loaded
window.LemonSqueezyCheckout = new t()
}} />

现场演示

https://nextjs-djqrvw.stackblitz.io

最小繁殖

https://stackblitz.com/edit/nextjs-djqrvw?file=pages%2Fnext.js

预期结果脚本函数应该附加到窗口，即使从其他页面使用next/link点击。一旦连接上。点击弹出窗口将打开一个实际的弹出窗口，而不是导航到另一个页面。

如有任何帮助，不胜感激。

Answer 1

我使用的自定义脚本团队推出了一个新的修复，其中包括该函数的刷新。所以现在我可以使用下面的代码来修复它。

import Script from "next/script";
export default function Page() {
function lemonLoaded() {
window.createLemonSqueezyCheckout();
}
return (
<>
<Script
src="https://app.lemonsqueezy.com/js/checkout.js"
strategy="lazyOnload"
onLoad={() => {
lemonLoaded();
}}
/>
</>
);
}