Actualmente estoy tratando de agregar un script de terceros a mi aplicación Next.js. El script inserta un iframe directamente debajo de la etiqueta del script. Así que necesito un control preciso sobre dónde se encuentra la etiqueta del script en la página.
Actualmente estoy usando next/script porque las etiquetas de script normales impiden que se represente el iframe. Sin embargo, la etiqueta next/script parece reubicar el script en función de la estrategia utilizada: el uso de la estrategia beforeInteractive inserta el script en el encabezado. afterInteractive y lazyOnload insértelo en algún lugar cerca de la parte inferior de la página.
Si tengo algo como lo siguiente:
<div id="script-container"> <Script id="script" async /* other attributes */ /> </div>¿Cómo me aseguraría de que la secuencia de comandos permanezca dentro del div del contenedor de secuencias de comandos cuando se carga la página?
Aquí está la solución un tanto hacky que se me ocurrió.
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> ) }Básicamente, agregue una función onLoad que mueva el script de regreso al contenedor. No estoy seguro de qué tan consistente es esta solución en general, ya que depende de que la secuencia de comandos se mueva antes de que se cargue el iframe, pero parece estar funcionando con la secuencia de comandos que estoy usando.