gpt4 book ai didi

javascript - 使用 NextJS 动态添加变量到外部 js 脚本

转载 作者:行者123 更新时间:2023-12-01 00:11:08 24 4
gpt4 key购买 nike

我里面有这个外部hotjar脚本/static/js我的nextjs应用程序。

(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:<SITEID>,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

我已将此文件从 Head 内部导入到我的应用程序中_document.js的部分像这样: <script src={'/js/hotjar.js'} ></script>

问题:我的 Nextjs 应用程序当前正在临时环境和实时环境中运行,我想为这两个环境添加一个脚本。上面脚本中唯一的动态部分是 SITEID此处的值 h._hjSettings={hjid:<SITEID>,hjsv:6}; 。如何添加不同的SITEID s 用于配置文件中的不同环境并动态更改该值,因为该脚本在客户端运行?

最佳答案

编辑:
您可以使用 react-hotjar 并简单地

import { hotjar } from 'react-hotjar'; 
hotjar.initialize(hjid, hjsv);// Hotjar ID and Hotjar Snippet Version

否则你有两个选择:

选项 1
首先确保您的 package.json 启动脚本将设置环境变量,如下所示:

  "scripts": {
...
"start": "cross-env NODE_ENV=production node server.js",
...
}

然后创建 2 个 hotjar 脚本,例如 /js/prod_hotjar.js/js/staging_hotjar.js,其中包含适当的 SITEID .
然后在您的 _document.js 中检测当前环境,并使用如下内容呈现适当的脚本:

import Document, { Html, Head, Main, NextScript } from 'next/document'
const prod= process.env.NODE_ENV === 'production'

class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}

render() {
const url = prod ? "/js/prod_hotjar.js" : "/js/staging_hotjar.js"
return (
<Html>
<Head>
<script src={url} ></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument

选项 2
使用 dangerouslySetInnerHTML 进行如下操作:

import Document, { Html, Head, Main, NextScript } from 'next/document'
const dev = process.env.NODE_ENV === 'production'

class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}

render() {
const SITEID = prod ? 1234 : 4567 // or any other logic
return (
<Html>
<Head>
<script dangerouslySetInnerHTML={{__html: `(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:${SITEID},hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`}} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument

关于javascript - 使用 NextJS 动态添加变量到外部 js 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60057718/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com