如何使用从外部库加载的JavaScript变量与Next.js?

Question

我有一个Next.js与Typescript网站，我正试图安装广告。广告提供商提供了在我的网站上包含以下Javascript的说明:

<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('flexbar', 'MYTOKEN', 'placement:wwwmysitecom');
}
})();
</script>

库加载一个文件，如var _bsa={init:function(format...。所以在mainpages/_app。tsx文件中包含如下脚本和代码片段:

if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('flexbar', 'MYTOKEN', 'placement:wwwmysitecom');
} else {
console.log("bsa is undefined")
} 
return (
<>
<Script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></Script>

当我第一次加载页面时，我得到的日志消息是&;bsa is undefined&;。在monetization.js库加载后，我如何调用_bsa.init函数?

Answer 1

您正在获得undefined，因为浏览器应该发出获取JavaScript文件的请求。默认情况下，Next.js会提前加载脚本，但会在页面发生一些水合作用之后加载。因此，这里的解决方案是使用Script的onLoad函数，如下所示:

<Script
onLoad={() => {
_bsa.init("flexbar", "MYTOKEN", "placement:wwwmysitecom");
console.log(_bsa);
}}
src="//m.servedby-buysellads.com/monetization.js"
type="text/javascript"
/>

如果你想让它在加载和每次渲染后触发，也有onReady。