如何维护网页上的脚本标签位置？答案

【问题标题】：How to maintain script tag position on webpage?如何维护网页上的脚本标签位置？
【发布时间】：2022-04-15 21:56:38
【问题描述】：

我正在使用脚本标记将小部件添加到我的 Next.js 应用程序。我已经为这个小部件创建了一个部分组件，但是当我运行应用程序时，它呈现在我的页脚下方，但它应该作为一个部分组件呈现在上面。有人可以帮我解决这个问题吗？

您将在下面看到问题的屏幕截图、我的index.js、脚本组件和我希望渲染它的组件。另一位用户询问了question related to the same issue。有没有人知道怎么解决？

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import Header from './src/components/Header'
import Services from './src/components/Services'
import Portfolio from './src/components/Portfolio'
import ContactCard from './src/components/ContactCard'
import Booking from './src/components/Booking'

export default function Home() {
  return (
    <div className="container-fluid">
      <Head>
        <title>Dr Cut TheBarber Show</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />       
      </Head>
      <main className="main">
       <Header />
       <Services />
       <Portfolio />
       <ContactCard />
       <Booking />
      </main>

      <footer className="footer text-center">
        <a
          className="text-decoration-none text-dark"
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
      </div>
    
  )
}

Booksy.js

import script from 'next/script';
//import Script from 'next/script'
import { useEffect } from 'react';
const Booksy = () =>{
    useEffect(() => {
        const script = document.createElement('script');
        script.src="https://booksy.com/widget/code.js?id=17618&country=es&lang=es";
        script.async = true;
        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script);
        }
    }, [])
  return script
}

export default Booksy;

Booking.js

import Booksy from "./Booksy";

function Booking () {
    return (
        <div className="page-section">
            
                <Booksy />

        </div>
    )
}
export default Booking;

【问题讨论】：

标签： reactjs next.js script-tag

【解决方案1】：

缺少此 Booksy 小部件的文档存在一些问题，但我遇到了同样的问题，这是解决方案。

这个脚本总是在你要放置它的地方创建按钮。因此，如果您想在特定位置创建元素并在其中放置脚本。然后你就可以通过定位这个元素来改变位置。

所以在Booking.js 中添加id 以获得div 之类的：

<div id="booksy" className="page-section">

并修改您将安装脚本的位置，如：

document.getElementById('booksy').appendChild(script)

现在您应该在 div 中拥有 Booksy 按钮，您可以使用样式更改它的位置。

此外，如果您想要 Booksy 的自定义按钮，技巧如下：

像以前一样
在任何地方添加您的自定义按钮
使用样式使 booksy 按钮不可见。在 SCSS 中是这样的：

#booksy {
   .booksy-widget-container {
        display: none !important;
   }
}

使用 Javascript 使 onClick 您的自定义按钮在不可见的 Booksy 按钮上触发 click()：

const openBooksy = () => {
    const button = document.querySelector(
      '#booksy > .booksy-widget-container > .booksy-widget-button'
    )
    button.click()
}

这样就可以了。

【讨论】：