Estoy usando un iframe para aislar el CSS de su contenido. Que está funcionando muy bien. Pero necesito el iframe para cargar un script externo, específicamente el script que estoy cargando es: https://web.squarecdn.com/v1/square.js

Puede ver que este script externo llama a document a menudo. Necesito que haga referencia al documento de mi iframe, no al documento del HTML principal.

He intentado esto y no logra esto:

 const insertScriptToIframe = (doc, target, src, callback) => { var s = doc.createElement("script"); s.type = "text/javascript"; if(callback) { if (s.readyState){ //IE s.onreadystatechange = function(){ if (s.readyState == "loaded" || s.readyState == "complete"){ s.onreadystatechange = null; callback(); } }; } else { //Others s.onload = function(){ callback(); }; } } s.src = src; target.appendChild(s); } // add web payments script const createWebPaymentsNode = () => { const iFrame = document.createElement('iframe'); const context = iFrame.contentDocument; const frameHead = context.getElementsByTagName('head').item(0); insertScriptToIframe(context, frameHead, 'https://web.squarecdn.com/v1/square.js'); }

Agrega el script externo al iframe. Pero el script externo hace referencia al documento principal. Sé que está haciendo esto porque el script externo, en sí mismo, carga otros scripts e iframes que se colocan en el HTML principal, en lugar del iframe.

Necesito poder hacer esto en vanilla js. Gracias