0

Necesito guardar el contenido del siguiente código:

"<iframe src='info/info_template'></iframe>";

Lo que quiero, en jquery, es coger el html que hay en src=info/info_template y guardarlo en una variable, ya sea en html o en texto, me da igual.

Espero que alguien me pueda ayudar. Gracias.

1
  • Hiciste dos preguntas muy parecidas ayer, en una obtuviste varias respuestas, la otra la respondí con algo que debería servirte, ¿no te funcionó? ¿tuviste problemas al implementarla? Si las respuestas en las otras preguntas no te sirven, deberías dejar comentarios aclarando por qué no te sirven para que la gente pueda ayudarte en lugar de crear nuevas preguntas parecidas. Lee Cómo preguntar y completa el recorrido de bienvenida para aprender más sobre el funcionamiento general del sitio
    – Alvaro Montoro
    Commented el 5 jul. 2018 a las 13:51

2 respuestas 2

1

Si el iframe está en el mismo dominio, como parece ser el caso, imaginemos que tu documento dice:

<iframe id="el_iframe" src="info/info_template"></iframe>

En ese caso puedes capturar el contenido HTML como:

var iframeDocument = document.getElementById('el_iframe').contentDocument;
var iframeHTML = iframeDocument.body.innerHTML;

o bien

var iframeText = iframeDocument.body.innerText;

Si no te funciona contentDocument puedes probar usando

var iframeDocument = document.getElementById('el_iframe').contentWindow.document;

EDIT:

Si el iframe o su fuente están definidos en una variable al estilo:

var info = "<iframe src='info/info_template'></iframe>";

Puedes seguir el flujo antes descrito insertando el iframe en tu página. Te dejé un plunkr con el ejemplo:

https://plnkr.co/edit/QVLk3BV7mptzQ01cybqp?p=preview

EDIT2

Lo anterior se puede hacer perfectamente con ajax (te dejé otro plunkr de ejemplo)

var info = '<iframe src="iframe.html"></iframe>';
var iframe_url=jQuery(info).attr('src');

jQuery.ajax({
            method: 'get',
            url: iframe_url,
            dataType: 'html'
        }).then(function (iframeHTML) {
            document.getElementById('editor').innerText = iframeHTML;
            document.getElementById('iframe_html').innerHTML = escapaHTML(iframeHTML);
        });

Al usar este enfoque el contenido te llega completo: <html>...</html> en vez de sólo el contenido del body.

Ten en cuenta que un llamado ajax es asíncrono. En el ejemplo, todo lo que quieras hacer con la respuesta de la petición debe ocurrir dentro del bucle definido por .then(function(iframeHTML) { .... });. Afuera del bucle no existe la variable iframeHTML y aunque la asignaras a una variable global, no estará definida correctamente antes de que la promesa se resuelva.

(una excepción a esto sería usar async/await + babel, pero en serio, en serio, no vamos a entrar en ese tema en esta respuesta)

Ojo

si quieres usar el contenido HTML del iframe, y tratarlo como texto (por ejemplo ponerlo en un elemento <pre> para mostrar el código fuente) tienes que escapar el contenido, por ejemplo reemplazando < por &lt; y > por &gt;. Hay otros caracteres que no debieras meter en un textarea sin escapar, pero creo que está fuera del alcance de esta pregunta. Esto te lo digo porque si insertas el HTML del iframe, su contenido se aplica a la página principal. Los scripts no se ejecutan, pero los estilos, por ejemplo, sí se aplican si no los escapas:

El iframe tiene un estilo que define font-weight:bold; en todo el documento. Si dice:

document.getElementById('iframe_html').innerHTML = escapaHTML(iframeHTML);

Pusieras en cambio:

document.getElementById('iframe_html').innerHTML = iframeHTML;

Esto provocaría que la importación del contenido del iframe afectara el estilo del documento principal.

2
  • Esto funcionaría si estuviera el <iframe> en el mismo código. Pero yo lo tengo así: var info = "<iframe src='info/info_template'></iframe>"; Está así dentro de cñodigo jquery. Solución?
    – Esther
    Commented el 5 jul. 2018 a las 13:06
  • Bueno... una opción sería insertarlo haciendo jQuery(info).attr('id','el_iframe').appendTo('body') y ya lo tienes en tu documento. Voy a editar la respuesta
    – ffflabs
    Commented el 5 jul. 2018 a las 13:36
0

Puedes usar $.get

$.get('info/info_template', function (data) {
    // data contains your html
});

Fuente

12
  • Me da error, esto lo hago en medio de un script, puede venir el fallo por ahí? Necesito ese valor dentro de un script y dentro de un for.
    – Esther
    Commented el 5 jul. 2018 a las 11:59
  • ¿Que fallo te da?
    – JDev
    Commented el 5 jul. 2018 a las 12:40
  • Si lo hago como tu, me imprime todo el valor de data, pero no el de ese get, sino el de otro (lo estoy haciendo dentro de otro igual). Pero si lo hago asi: var dt; $.get('info/info_template', function (data) { // data contains your html dt = data; }) Así me imprime undefined. Alguna solución?
    – Esther
    Commented el 5 jul. 2018 a las 12:46
  • ¿el del otro? No entiendo a que te refieres.
    – JDev
    Commented el 5 jul. 2018 a las 12:47
  • Donde hago lo que me has dicho, el código ya está dentro de otra function(data) de un $.ajax
    – Esther
    Commented el 5 jul. 2018 a las 12:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.