如何保持脚本标签在网页上的位置？

Question

我正在使用脚本标签将小部件添加到我的 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;

Answer 1

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

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

因此在 Booking.js 中添加 id 以获得 div，例如：

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

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

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

现在你应该在这个 div 里面有了 Booksy 按钮，你可以使用样式改变它的位置。

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

像以前一样
在任何地方添加自定义按钮
使用样式使书本按钮不可见。在 SCSS 中，这类似于：

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

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

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

这样就可以了。

如何保持脚本标签在网页上的位置？

How to maintain script tag position on webpage?

script-tag

reactjs

next.js