javascript NextJS：当网站URL有参数unload-script时，卸载脚本

ljsrvy3e 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(125)

bounty将在5天后过期。回答此问题可获得+150声望奖励。Steve希望引起更多人关注此问题。

我正在使用webdriver测试我们的网站。当webdriver向下滚动时，一个内部通信部件会被烘焙到屏幕截图中。我已经尝试通过CSS隐藏内部通信，但这失败了，并出现javascript错误：Cannot read properties of null (reading 'style').
对讲机按网段加载。
Segment由NextJS加载，在/pages/document.tsx中使用以下内容：

<script
    type="text/partytown" dangerouslySetInnerHTML={{ __html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="xxxxx";;analytics.SNIPPET_VERSION="4.15.3";analytics.load("xxxx");analytics.page();}}();` }} />

如果webdriver加载了一个带有参数的网站URL，例如www.example.com?no-segment，是否有方法告诉NextJS卸载Segment脚本

EDIT：/pages/_document.tsx现在是：

import { Partytown } from '@builder.io/partytown/react';
import { Head, Html, Main, NextScript } from 'next/document'
import { ServerStyleSheetDocument } from 'next-sanity/studio'
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
 
const router = useRouter();
const [isUnloadSegment, setIsUnloadSegment] = useState(false);

useEffect(() => {
  if (router.query['no-segment'] !== undefined) {
    setIsUnloadSegment(true);
  }
}, [router.query]);

export default class Document extends ServerStyleSheetDocument { 
  render() {   
    return (
      <Html lang="en">
        <Head>
          <Partytown debug={false} forward={['dataLayer.push']} />
          <style dangerouslySetInnerHTML={{
            __html: `@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-Regular.woff2') format('woff2');font-weight: normal;font-style: normal;font-display: swap;}@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-Medium.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap;}@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-SemiBold.woff2') format('woff2'),;font-weight: 600;font-style: normal;font-display: swap;}@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-Italic.woff2') format('woff2');font-weight: normal;font-style: italic;font-display: swap;}`}} />
        </Head>
        <body>
          <Main />
          <NextScript />
          {!isUnloadSegment && (
          <script
              type="text/partytown" dangerouslySetInnerHTML={{ __html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="piQWMo5agM7Jcwm9g4sJA1rhBfZfeAB3";;analytics.SNIPPET_VERSION="4.15.3";analytics.load("piQWMo5agM7Jcwm9g4sJA1rhBfZfeAB3");analytics.page();}}();` }} />
          )}
        </body>
      </Html>
    )
  }
}

但是本地网站产生了一个错误：
TypeError: Cannot read properties of null (reading 'useContext')

JavaScript

来源：https://stackoverflow.com/questions/75751575/nextjs-unload-a-script-when-the-website-url-has-a-parameter-unload-script

1条答案

按热度按时间

c3frrgcw1#

我有一个解决方案。请尝试它是否对你有效！！
首先从Router URL查询**“no-segment”**可用性，并将其存储在状态中，以便您可以使用它添加条件，如下所示：

const router = useRouter();
const [isUnloadSegment, setIsUnloadSegment] = useState(false);

useEffect(() => {
  if (router.query['no-segment'] !== undefined) {
    setIsUnloadSegment(true);
  }
}, [router.query]);

之后，你可以添加条件，因为你说你的脚本在/pages/document.tsx中，所以它可以是：

{!isUnloadSegment && (
  <script
    type="text/partytown" dangerouslySetInnerHTML={{ __html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="xxxxx";;analytics.SNIPPET_VERSION="4.15.3";analytics.load("xxxx");analytics.page();}}();` }} />
)}

编辑的下一部分：

这里你将如何在类组件中编码。

import { Partytown } from '@builder.io/partytown/react';
import { Head, Html, Main, NextScript } from 'next/document';
import { ServerStyleSheetDocument } from 'next-sanity/studio';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

class Document extends ServerStyleSheetDocument {
  constructor(props) {
    super(props);

    this.state = {
      isUnloadSegment: false,
    };
  }

  componentDidMount() {
    const { query } = useRouter();
    if (query['no-segment'] !== undefined) {
      this.setState({ isUnloadSegment: true });
    }
  }

  render() {
    const { isUnloadSegment } = this.state;

    return (
      <Html lang="en">
        <Head>
          <Partytown debug={false} forward={['dataLayer.push']} />
          <style
            dangerouslySetInnerHTML={{
              __html: `@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-Regular.woff2') format('woff2');font-weight: normal;font-style: normal;font-display: swap;}@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-Medium.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap;}@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-SemiBold.woff2') format('woff2'),;font-weight: 600;font-style: normal;font-display: swap;}@font-face {font-family: 'Poppins';src: url('/fonts/Poppins-Italic.woff2') format('woff2');font-weight: normal;font-style: italic;font-display: swap;}`,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          {!isUnloadSegment && (
            <script
              type="text/partytown"
              dangerouslySetInnerHTML={{
                __html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="piQWMo5agM7Jcwm9g4sJA1rhBfZfeAB3";;analytics.SNIPPET_VERSION="4.15.3";analytics.load("piQWMo5agM7Jcwm9g4sJA1rhBfZfeAB3");analytics.page();}}();`,
              }}
            />
          )}
        </body>
      </Html>
    );
  }
}

export default Document;

希望这将在您的情况下工作得很好。

赞(0）回复(0）举报 2023-03-21

我来回答

javascript NextJS：当网站URL有参数unload-script时，卸载脚本

1条答案

相关问题

热门标签

最新问答