Aquí es mi situación.

Tengo un archivo llamado iframe.html, que contiene el código de una imagen de la presentación de diapositivas.
El código es algo así como

<html>
  <head>
    <!-- Have added title and js files (jquery, slideshow.js) etc. -->
  </head>

  <body>
    <!-- Contains the images which are rendered as slidehow. -->
    <!-- have hierarchy like 'div' inside 'div' etc. -->
  </body>
</html>

Los usuarios pueden utilizar el código de inserción para agregar el pase de diapositivas para sus blogs o sitios web (pueden ser de diferentes dominios). Digamos que un usuario tiene para incrustar la presentación en index.html, se pueden agregar añadiendo las siguientes líneas:

<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>

Esto traerá el completar el código HTML de iframe.html a index.html, ahora necesito una manera de acceder a los elementos en el iframe para ajustar algunas de sus propiedades.

Como en el código de la anchura y la altura del iframe son establecidos por el usuario a algunos revisión dimensiones. Me gustaría ajustar el tamaño de la presentación de diapositivas (imágenes y contenidos) para el tamaño del iframe contenedor. ¿Cuál es la mejor manera de hacer esto?

He intentado sin éxito acceder a las iframe componentes de index.html por algo como

$('#iframe').contents();

pero sale el error:

TypeError: No se puede llamar método ‘contenidos’ null

Así, creo que para aplicar la lógica en iframe.html donde la presentación de diapositivas debe comprobar la anchura y la altura de los padres y el conjunto de su altura en consecuencia.

Estoy bastante confundido, espero que mi pregunta tiene sentido para la mayoría. Por favor, siéntase libre de pedir más explicaciones. Su ayuda es muy apreciada.

  • Posible problema que es visible en su descripción es que usted agregue jQuery.js en iframe.html y no index.html pero escribir el código dentro de index.html
  • He añadido el jQuery.js archivo iframe.html, y no index.html
  • Si index.html no tiene una referencia a jquery.js no puede usar $() sintaxis en los scripts que están allí (JavaScript referencias aisladas a la ventana o frame).
  • Creo que podría estar en lo correcto. Tengo este trabajo el uso de la solución acepté (con javascript). Pero, cuando yo uso la consola del navegador y escriba en $ lo devuelven function. Creo que el jQuery carga en el iframe pueda ser accesible fuera así.
InformationsquelleAutor Ajit S | 2013-04-19

10 Comentarios

  1. 55

    Esta línea va a recuperar todo el código HTML de la trama. Mediante el uso de otros métodos en lugar de innerHTML puede atravesar DOM del interior del documento.

    document.getElementById('iframe').contentWindow.document.body.innerHTML

    Cosa a recordar es que esto sólo funcionará si la fuente de marco está en el mismo dominio. Si es desde un dominio diferente, cross-site-scripting (XSS) la protección de la patada en.

    • Gracias. El iframe está en el mismo dominio. El código anterior devuelve undefined.
    • qué navegador y versión estás usando?
    • también me hizo cometer un error en la secuencia de comandos – document.innerHTML está vacío, mientras que document.body.innerHTML no lo es.
    • He probado esto en FF 20 y Chrome 26.0.14, y la versión de jQuery 1.7.1
    • Estoy confundido, la pregunta para jQuery – importante, ya que necesito encontrar todos los de cierta clase dentro del iframe y el cambio es CSS
    • Yo no puedo conseguir que los elementos de valor, lo que se ha escrito en el cuadro de entrada.
    • Estoy de acuerdo en que la respuesta no acaba de ir todo el camino en términos de «uso de jQuery» como el OP especificado. Creo que quiere algo como esto: var innerDocAsJQueryObject = $(document.getElementById("iframe").contentWindow.document); Entonces usted puede fácilmente cambiar el CSS de los elementos dentro del iframe, como este: innerDocAsJQueryObject.find(".yourClass").css("background-color", "purple");
    • la u perdió la pregunta – iframe fuente de archivos local, su solución devuelve cadena vacía
    • ¿dónde dice en la pregunta, que sistema de ficheros local, en lugar de http se utiliza?

  2. 42

    Prueba este código:

    $('#iframe').contents().find("html").html();

    Esto devolverá todo el código html en su iframe. En lugar de .find("html") puede utilizar cualquier selector desea, por ejemplo: .find('body'),.find('div#mydiv').

    • Sólo una nota, que esto no funcionará si el iframe documento está alojado en otro dominio o de un mismo dominio, pero diferente número de puerto.
    • no va a funcionar de todos modos – en la pregunta anterior se puede ver que el src para el iframe es el archivo local
    • me ayudó mucho tiempo!
  3. 6
    var iframe = document.getElementById('iframe');
      $(iframe).contents().find("html").html();
  4. 2

    Si usted tiene Div de la siguiente manera en una Iframe

     <iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"
    
         <div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or
    
         <form id="form1" runat="server">        
           <div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">          
    
                Some Text
    
            </div>
         </form>
     </iframe>

    A continuación, usted puede encontrar el texto de los Div utilizando el código siguiente

    var iContentBody = $("#ifrmReportViewer").contents().find("body");
    var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();
    
    var divInnerFormText = iContentBody.find("#divInnerForm").text();

    Espero que esto ayude a alguien.

    • no hay ninguna div dentro de iframe – iframe tiene local src
  5. 2

    esto funciona para mí, porque lo que funciona bien en ie8.

    $('#iframe').contents().find("html").html();

    pero si te gusta usar javascript de lado para jquery que usted puede usar como este

    var iframe = document.getElementById('iframecontent');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var val_1 = innerDoc.getElementById('value_1').value;
  6. 0

    Apenas para la referencia del bien. Esto es cómo hacerlo con JQuery (útil, por ejemplo, cuando usted no puede hacer una consulta por elemento de identificación):

    $('#iframe').get(0).contentWindow.document.body.innerHTML
    • que no funciona cuando src es el archivo local
  7. 0

    Esta puede ser otra solución si jquery es cargado en iframe.html.

    $('#iframe')[0].contentWindow.$("html").html()
  8. 0

    ¿Por qué no tratar de Ajax, echa un código de la parte 1 o la parte 2 (el uso de comentarios).

    JS:

    $(document).ready(function(){ 
    	console.clear();
    /*
        //PART 1 ERROR
        //Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null".  Both frames are sandboxed and lack the "allow-same-origin" flag.
    	console.log("PART 1:: ");
    	console.log($('iframe#sandro').contents().find("html").html());
    */
    	//PART 2
    	$.ajax({
    		url: $("iframe#sandro").attr("src"),
    		type: 'GET',
    		dataType: 'html'
    	}).done(function(html) {
    		console.log("PART 2:: ");
    		console.log(html);
    	});
    
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <html>
    <body>
    <iframe id="sandro" src="https://jsfiddle.net/robots.txt"></iframe>
    </body>
    </html>

    • Inusual, pero que buena idea!
    • esto está mal – la pregunta era acerca de local src y no src=»jsfiddle.net/robots.txt«
  9. -2
    $('#iframe').load(function() {
        var src = $('#iframe').contents().find("html").html();
        alert(src);
    });
    • por favor, añada descripción: ¿por qué esto va a ayudar?

Dejar respuesta

Please enter your comment!
Please enter your name here