NextJs脚本组件应隐藏在特定页面上

d5vmydt9 于 2023-06-22 发布在其他

关注(0)|答案(3)|浏览(123)

在我的React/NextJS应用程序中，我添加了一个新组件来显示FreshDesk小部件。
这个组件应该只显示在一些特定的页面登录后，但当我从应用程序注销的小部件仍然可见，直到我刷新页面
该组件
从'next/script'导入脚本;

const FreshDesk = () => {
  const { freshDesk } = useConfig();
  return (
    <>
    {console.log(freshDesk)}
      <Script
        src={`https://widget.freshworks.com/widgets/${freshDesk}.js`}
        strategy="lazyOnload"
      />

      <Script id="my-script" strategy="afterInteractive">
        {` window.fwSettings={
                'widget_id':${freshDesk},
              };
              !function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
            `}
      </Script>
    </>
  );
};

export default FreshDesk;

当它需要的时候，它被称为<FreshDesk />。
登录页面没有小部件调用，但一旦我注销，小部件仍然在那里，直到我刷新，不知道该怎么做。

next.js

来源：https://stackoverflow.com/questions/71826832/nextjs-script-component-should-hide-on-a-specific-page

3条答案

按热度按时间

dgjrabp21#

看起来您可以使用FreshworksWidget("destroy")来销毁小部件。
来源
我建议您添加以下useEffect（免责声明：我不知道图书馆，所以这可能不会完美地工作）

useEffect(()=>{
  // create the widget if the script is loaded already
  if(window.FreshworksWidget){
     window.FreshworksWidget("boot");
  }
  // when unmounting the component, destroy the FreshworksWidget
  return ()=>{
    if(window.FreshworksWidget){
       window.FreshworksWidget("destroy");
    }
  }
  
}, []);

赞(0）回复(0）举报 2023-06-22

bfrts1fy2#

决定通过展示我发现对我有效的解决方案来回答我自己的问题。
我所做的是在login组件中添加以下代码

useEffect(() => {
    if (document.querySelector('#launcher-frame')) {
      document.querySelector('#launcher-frame').style.display = 'none';
    }
}

在组件中，我使用了一个小部件

useEffect(() => {
    if (document.querySelector('#launcher-frame')) {
      document.querySelector('#launcher-frame').style.display = 'block';
    }
  }, []);

这样，我只是隐藏它从我的登录页面，但显示其他地方

赞(0）回复(0）举报 2023-06-22

r6l8ljro3#

销毁freshwork小部件的最好方法是这样的。我用的是Angular14，它对我很有效

import { Component, OnInit, Renderer2, Inject  } from '@angular/core';
import { DOCUMENT } from '@angular/common';

 constructor(
    private _renderer2: Renderer2,  @Inject(DOCUMENT) private _document: Document) { }

ngOnDestroy() {
    let script = this._renderer2.createElement('script');
    script.type = "text/javascript";
    script.text = `      
         if(window.FreshworksWidget){
          window.FreshworksWidget("destroy")
         }
   `;
    this._renderer2.appendChild(this._document.body, script)
    }

赞(0）回复(0）举报 2023-06-22

我来回答

NextJs脚本组件应隐藏在特定页面上

3条答案

相关问题

热门标签

最新问答