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

Question

我目前正在尝试将第三方脚本添加到我的 Next.js 应用程序中。该脚本直接在脚本标记下方插入一个 iframe。所以我需要精确控制脚本标签在页面上的位置。
我目前正在使用 next/script因为常规脚本标签会阻止 iframe 呈现。但是，next/script标签似乎根据使用的策略重新定位脚本:使用 beforeInteractive 策略将脚本插入头部。 afterInteractive 和lazyOnload 将其插入页面底部附近的某个位置。
如果我有以下内容:

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

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

Answer 1

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

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 加载之前移动的脚本，但它似乎与我正在使用的脚本一起工作。