es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo cargar un script externo en un iframe que hará referencia al documento del iframe y no al documento principal.

Cómo cargar un script externo en un iframe que hará referencia al documento del iframe y no al documento principal.

28 Jul, 2023 Programación

Estoy utilizando un iframe para aislar el CSS de su contenido, lo cual funciona muy bien. Pero necesito que el iframe cargue un script externo, específicamente el script que estoy cargando es: https://web.squarecdn.com/v1/square.js

Puedes ver que este script externo llama a “document” con frecuencia. Necesito que haga referencia al documento de mi iframe y no al documento del HTML padre.

He intentado esto y no logra hacerlo:

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 está haciendo referencia al documento padre. Sé que está haciendo esto porque el script externo, por sí solo, carga otros scripts e iframes que se colocan en el HTML padre en lugar del iframe.

Necesito poder hacer esto en JavaScript puro. Gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cargar un script externo en un iframe y asegurarse de que hace referencia al documento del iframe, debe utilizar la propiedad contentWindow del elemento iframe.

    Aquí tienes un ejemplo de código:

    const createWebPaymentsNode = () => {
  const iFrame = document.createElement('iframe');
  const iFrameSrc = 'about:blank'; // o cualquier otra URL que desees establecer como src
  iFrame.src = iFrameSrc;
  iFrame.onload = () => {
    const iFrameDoc = iFrame.contentWindow.document;
    const scriptEl = iFrameDoc.createElement('script');
    scriptEl.type = 'text/javascript';
    scriptEl.src = 'https://web.squarecdn.com/v1/square.js';
    iFrameDoc.head.appendChild(scriptEl);
  };
  // agregar el iframe al HTML padre en algún lugar
  // ...
};

    El controlador de eventos onload para el elemento iframe espera a que el iframe cargue su contenido about:blank y luego recupera el documento del iframe utilizando la propiedad contentWindow.document. Luego crea un nuevo elemento script, establece su src como la URL del script externo y lo añade al elemento head del documento del iframe.

    De esta manera, cuando el script externo se ejecute y haga referencia al objeto document, estará haciendo referencia al objeto document del iframe, no al HTML padre.

Comments are closed.