Poniendo esto en la parte superior de mi publicación para un poco más de claridad:

El objetivo general aquí es crear una función para banners dinámicos en los que pueda ingresar un código de animación javascript personalizado a través de una fuente de datos dinámica en forma de hoja de Google. Mi objetivo es trabajar con algunas ideas simplemente para descubrir qué es factible, y una vez que tenga una mejor comprensión de eso, me concentraré en las cuestiones de implementación y seguridad.

Estoy tratando de usar el objeto Función para tomar una cadena de js de un archivo separado y convertirlo en código ejecutable. Sin embargo, me encontré con un problema en el que la cadena que se pasa al objeto Función intenta usar un objeto global en el archivo host y parece haber un problema con la cadena que no detecta el objeto global. No he usado mucho la función, por lo que es probable que haya algunos matices aquí que simplemente no conozco.

Esto es difícil de explicar, por lo que esperamos que los fragmentos de código a continuación ofrezcan claridad:

Objeto global:

 const tl = gsap.timeline({paused: true, repeat: 0});

Cadena JS:

 object.jsInject = "const jsInjectContainer = document.getElementById('js-inject'); const headlineText = 'test headline'; const headline = document.createElement('h1'); headline.style.visibility = 'hidden'; headline.innerHTML = headlineText; jsInjectContainer.appendChild(headline); tl.to(headline, 1, {autoAlpha: 1}, 'start');";

Parte problemática de la cadena JS:

 tl.to(headline, 1, {autoAlpha: 1}, 'start');

Función que toma la cadena y devuelve una nueva función:

 function jsIfyString(string) { return new Function(string); }

Ejecutando la nueva función:

 const jsStringFunction = jsIfyString(object.jsInject); jsStringFunction();

Todo esto da como resultado un ReferenceError: tl no está definido, lo que supongo que tiene algo que ver con cuándo y cómo se ejecuta la nueva función. ¿Alguien puede ofrecer una idea de esto y cómo podría arreglarlo (si es posible)?