inyectar una función de javascript dentro de un Iframe

En este enlace (versión archivada) describe cómo inyectar código a partir de una secuencia de comandos en un iframe:

function injectJS() {
  var iFrameHead = window.frames["myiframe"].document.getElementsByTagName("head")[0];
  var myscript = document.createElement('script');
  myscript.type = 'text/javascript';
  myscript.src = 'myscript.js'; //replace this with your SCRIPT
  iFrameHead.appendChild(myscript);
}

Que está bien, pero lo que si quiero insertar un objeto de la función dentro de un iframe y conseguir que se ejecuta en el iframe contexto? Digamos que tengo:

function foo () {
    console.log ("Look at me, executed inside an iframe!", window);
}

y quiero insertar foo del código dentro de un iframe? (la función foo podría ser algo cargado dinámicamente, no puedo simplemente se envuelve en la cita)

Yo, ingenuamente, trató:

var scriptFooString = "<script>" + foo.toString() + "</script>"

para obtener el código dentro de la función, pero

  • No sé cómo insertar en el iframe de la CABEZA (tal vez con jquery?)
  • No sé si es la forma correcta de
  • No sé lo que pasa cuando si la función es mucho más complejo que el
  • No sé lo que ocurre con la doble y única cita en scriptFooString

Cualquier sugerencia?

2 Kommentare

  1. 35

    Primero de todo, sólo se puede lograr esto si el marco y la página que muestra se encuentra dentro del mismo dominio (Debido a la cruz-las reglas de dominio)

    segundo, usted puede manipular dom y objetos de ventana de la trama directamente a través de JS:

    frames[0].window.foo = function(){
       console.log ("Look at me, executed inside an iframe!", window);
    }

    para obtener su marco de un DOMElement objeto se puede utilizar:

    var myFrame = document.getElementById('myFrame');
    
    myFrame.contentWindow.foo = function(){
           console.log ("Look at me, executed inside an iframe!");
    }

    Tenga en cuenta que el ámbito en el foo NO se cambia, por lo que la ventana está siendo el padre de la ventana, etc. dentro de foo.

    Si quieres inyectar un poco de código que se ejecuta en el contexto de otro marco que se podría insertar una etiqueta de secuencia de comandos, o eval es:

    frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }');

    Aunque el consenso general es nunca usar eval, creo que es una mejor alternativa que el DOM inyección si usted REALMENTE necesita para lograr esto.

    Así que en tu caso se podría hacer algo como:

    frames[0].window.eval(foo.toString());
    • Ok, pero si he de ejecutar la función de los padres de la ventana con frames[0].window.foo();, es ejecutado en la ventana padre contexto. La inserción en la cabeza que se ejecuta con el iframe contexto, estoy equivocado? (consulte jsfiddle.net/7rEXT)
    • El problema no es el contexto, pero el ámbito de aplicación. Cuando usted hace la función foo, es en el ámbito actual creo, por lo de la ventana es la ventana principal y no los marcos etc. Usted todavía tiene que usar myFrame.contentWindow o frames[0].window dentro de la función para acceder al ámbito correcto. Si usted necesita inyectar una etiqueta de secuencia de comandos, puede anexar a través de DOM.
    • He actualizado mi respuesta para adaptarse mejor a tu consulta. Aunque debo decir que si usted necesita para hacer algo como esto, las posibilidades son que usted complicar las cosas, y que lo están haciendo mal, o que se podría estar haciendo más inteligentes.
    • Necesito ejecutar dinámicamente los plugins cargados (con requirejs) en una caja de arena. ¿Conoces una forma mejor de hacerlo?
  2. 1

    Aquí está mi solución. Estoy usando jquery para insertar el contenido, a continuación, el uso de eval para ejecutar la secuencia de comandos de etiquetas en el contexto de ese iframe:

        var content = $($.parseHTML(source, document, true));
        $("#content").contents().find("html").html(content);
        var cw = document.getElementById("content").contentWindow;
        [].forEach.call(cw.document.querySelectorAll("script"), function (el, idx) {
            cw.eval(el.textContent);
        });

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...