如何使用 Next Script 精确控制脚本标签的插入位置

我目前正在尝试将第三方脚本添加到我的 Next.js 应用程序中。该脚本会在脚本标签正下方插入一个 iframe。所以我需要精确控制脚本标签在页面上的位置。

我目前正在使用下一个/脚本 https://nextjs.org/docs/api-reference/next/script因为常规脚本标签会阻止 iframe 渲染。但是，那下一个/脚本 https://nextjs.org/docs/api-reference/next/script标签似乎根据所使用的策略重新定位脚本：使用 beforeInteractive 策略将脚本插入头部。 afterInteractive和lazyOnload将其插入到页面底部附近的某个位置。

如果我有类似以下内容：

<div id="script-container">
  <Script id="script" async /* other attributes */ />
</div>

当页面加载时，如何确保脚本保留在脚本容器 div 内？

这是我想出的有点古怪的解决方案。

import React, { useRef } from 'react'
import Script from 'next/script'

export const ScriptComponent = (props) => {
  const containerRef = useRef(null)

  function moveScript() {
    containerRef.current.appendChild(this)
  }

  return (
    <div ref={containerRef} id="script-container">
      <Script
        id="script"
        type="text/javascript"
        src="#url"
        async
        onLoad={moveScript}
      />
    </div>
  )
}

基本上添加一个 onLoad 函数，将脚本移回容器。我不确定这个解决方案的整体一致性如何，因为它取决于在加载 iframe 之前移动的脚本，但它似乎与我正在使用的脚本一起工作。