如何在Next.js的特定子域中隐藏脚本。

huangapple
go评论100阅读模式
英文:

how i can hide Script in specific subDomain in nextjs

问题

  1. 在_document页面中，我有一个用于聊天窗口的脚本，我需要在任何子域名中隐藏该脚本，
  3. 示例：
  5. `domain.com` >> 允许该脚本 ,,,
  7. `*.domain.com` >> 禁止该脚本 
  9. `*.domain.com/*` >> 禁止该脚本 
  11. ```jsx
  12. import { Html, Head, Main, NextScript } from 'next/document'
  13. const Document = () => {
  14.   return (
  15.     <Html lang="en">
  16.       <Head>
  17.         <script src="//code.jivosite.com/widget/id" async></script> // 这是脚本
  18.       </Head>
  19.       <body>
  20.         <Main />
  21.         <NextScript />
  22.       </body>
  23.     </Html>
  24.   )
  25. }
  26. export default Document;
英文:

in the _document page, i have A Script for chat window and i need to hide the Script in any subDomain ,

example:

domain.com >> allow the Script ,,,,

*.domain.com >> disallow the Script

*.domain.com/* >> disallow the Script

  1. import { Html, Head, Main, NextScript } from &#39;next/document&#39;
  2. const Document = () =&gt; {
  3.   return (
  4.     &lt;Html lang=&quot;en&quot;&gt;
  5.       &lt;Head&gt;
  6.         &lt;script src=&quot;//code.jivosite.com/widget/id&quot; async&gt;&lt;/script&gt; // this is the script
  7.       &lt;/Head&gt;
  8.       &lt;body&gt;
  9.         &lt;Main /&gt;
  10.         &lt;NextScript /&gt;
  11.       &lt;/body&gt;
  12.     &lt;/Html&gt;
  13.   )
  14. }
  15. export default Document;

答案1

得分: 1

我刚刚通过检查主机值来确定它是域名还是子域名，然后将结果传递给文档的props来解决了这个问题。

  1. import { Html, Head, Main, NextScript } from 'next/document'
  2. import NextDocument from "next/document"
  3. import { domain } from '@/config/constants';
  5. const Document = ({ isSubDomain }: any) => {
  7.   return (
  8.     <Html lang="en">
  9.       <Head>
  10.         {!isSubDomain && <script src="//code.jivosite.com/widget/id" async></script>}
  11.       </Head>
  12.       <body>
  13.         <Main />
  14.         <NextScript />
  15.       </body>
  16.     </Html>
  17.   )
  18. }
  20. Document.getInitialProps = async (ctx: any) => {
  21.   const initialProps = await NextDocument.getInitialProps(ctx);
  22.   let isSubDomain = ctx?.req?.headers?.host?.replace(`.${domain}`, "") ? true : false
  23.   return { ...initialProps, isSubDomain };
  24. };
  26. export default Document;
英文:

I have just resolved this issue by examining the host value to determine whether it is a domain or a subdomain, and then passing the result to the props of the Document.

  1. import { Html, Head, Main, NextScript } from &#39;next/document&#39;
  2. import NextDocument from &quot;next/document&quot;
  3. import { domain } from &#39;@/config/constants&#39;;
  5. const Document = ({ isSubDomain }: any) =&gt; {
  7.   return (
  8.     &lt;Html lang=&quot;en&quot;&gt;
  9.       &lt;Head&gt;
  10.         {!isSubDomain &amp;&amp; &lt;script src=&quot;//code.jivosite.com/widget/id&quot; async&gt;&lt;/script&gt;}
  11.       &lt;/Head&gt;
  12.       &lt;body&gt;
  13.         &lt;Main /&gt;
  14.         &lt;NextScript /&gt;
  15.       &lt;/body&gt;
  16.     &lt;/Html&gt;
  17.   )
  18. }
  20. Document.getInitialProps = async (ctx: any) =&gt; {
  21.   const initialProps = await NextDocument.getInitialProps(ctx);
  22.   let isSubDomain = ctx?.req?.headers?.host?.replace(`.${domain}`, &quot;&quot;) ? true : false
  23.   return { ...initialProps, isSubDomain };
  24. };
  26. export default Document;

huangapple
  • 本文由 发表于 2023年6月22日 20:33:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76531957.html
  • next.js
  • node.js
  • reactjs
  • server-side-rendering
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定