3

Estava precisando pegar o conteúdo de um iframe (que estava no mesmo domínio na mesma página) com html(), porém sem sucesso.

Ai vi que existia um método chamado contents(), e deu certo usando ele.

Porquê uma deu e outra não?

Eu tentei ler sobre isso, mas não entrou na cabeça...

1 Resposta 1

7

Podemos observar na documentação de cada método que:

  • .contents()

    Recolhe os filhos de cada elemento do conjunto de elementos combinados, incluindo nós de texto e de comentário.

    E também a nota:

    O método .contents() também pode ser usado para obter o documento de conteúdo de um iframe, se o iframe está no mesmo domínio que a página principal.

  • .html()

    Obtém o conteúdo HTML do primeiro elemento no conjunto de elementos combinados ou define o conteúdo HTML de cada elemento correspondente.

Sumário

Essencialmente, o método .contents(), está atento às necessidades especiais de uma iframe e faz uso da sua propriedade contentDocument para extrair o conteúdo se o elemento for efetivamente uma iframe. O método .html() não realiza tais verificações e/ou uso de propriedades especiais dos elementos.

Para saberes em detalhe, continua a ler...

A iframe

Para sabermos a razão de o método .contents() ser capaz de recolher o que está dentro da iframe e o método .html() não, precisamos analisar diversos detalhes sobre como tudo funciona:

W3C - 5. XHTML Abstract Modules

Podemos observar na documentação para os módulos de abstração, particularmente na secção 5.13 sobre o módulo iframe que o mesmo tem dois tipos de implementações: DTD e XML Schema. O relevante para este caso é a implementação em DTD que nos apresenta a seguinte estrutura para o módulo iframe:

<!-- ...................................................................... -->
<!-- XHTML IFrame Module  ................................................. -->
<!-- file: xhtml-iframe-1.mod

     This is XHTML, a reformulation of HTML as a modular XML application.
     Copyright 1998-2005 W3C (MIT, ERCIM, Keio), All Rights Reserved.
     Revision: $Id: xhtml-iframe-1.mod,v 4.0 2001/04/02 22:42:49 altheim Exp $ SMI

     This DTD module is identified by the PUBLIC and SYSTEM identifiers:

       PUBLIC "-//W3C//ELEMENTS XHTML Inline Frame Element 1.0//EN"
       SYSTEM "http://www.w3.org/MarkUp/DTD/xhtml-iframe-1.mod"

     Revisions:
#2000-10-22: added #PCDATA to <iframe> content model as per HTML 4
     ....................................................................... -->

<!-- Inline Frames

        iframe

     This module declares the iframe element type and its attributes,
     used to create an inline frame within a document.
-->

<!-- Inline Frames .................................... -->

<!ENTITY % iframe.content  "( #PCDATA | %Flow.mix; )*" >
<!ENTITY % iframe.qname  "iframe" >
<!ELEMENT %iframe.qname;  %iframe.content; >
<!ATTLIST %iframe.qname;
      %Core.attrib;
      longdesc     %URI.datatype;           #IMPLIED
      src          %URI.datatype;           #IMPLIED
      frameborder  ( 1 | 0 )                '1'
      marginwidth  %Pixels.datatype;        #IMPLIED
      marginheight %Pixels.datatype;        #IMPLIED
      scrolling    ( yes | no | auto )      'auto'
      height       %Length.datatype;        #IMPLIED
      width        %Length.datatype;        #IMPLIED
>

<!-- end of xhtml-iframe-1.mod -->

E voltando à página anterior, podemos ler:

Quando este módulo é utilizado, o elemento iframe é adicionado ao conjunto de conteúdo em linha, tal como definido pelo Módulo de texto.

E isto essencialmente responde à pergunta, qualquer elemento de texto não tem nós filhos, logo, o método .html() não consegue recolher nada dos mesmos.

Já o método .contents(), pelo fato de recolher seja o que for que esteja dentro do elemento, recolhe o que se encontra dentro da iframe para um objeto. Isto permite-nos posteriormente aceder à informação presente no objeto resultante.

Exemplos

$('#sample1').click(function() {
  // devolve um objeto, mesmo só existindo texto na DIV
  alert($("div").contents());
});

$('#sample2').click(function() {
  // devolve um objeto, e depois "undefined" porque não existem nós para poder trabalhar
  alert($("div").contents().html());
});

$('#sample3').click(function() {
  // recolhe um objeto, e devolve o seu texto
  alert($("div").contents().text());
});

$('#sample4').click(function() {
  // devolve texto pois está a trabalhar num nó
  alert($("div").html());
});

$('#sample5').click(function() {
  // devolve texto
  alert($("div").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>A minha div é muito bonita!</div>
<p>
  <button id="sample1">.contents()</button>
  <button id="sample2">.contents().html()</button>
  <button id="sample3">.contents().text()</button>
  <button id="sample4">.html()</button>
  <button id="sample5">.text()</button>
</p>
<em>clica nos botões para usar os métodos descritos nos mesmos.</em>

Mas o que faz o jQuery

Falta saber o que se passa no código do jQuery para justificar a capacidade do .contents() em relação à iframe, onde para o efeito observamos o código do mesmo, particularmente a linha 3040 até 3044:

contents: function( elem ) {
    return jQuery.nodeName( elem, "iframe" ) ?
        elem.contentDocument || elem.contentWindow.document :
        jQuery.merge( [], elem.childNodes );
}

Facilmente observamos que o método .contents() faz uma análise ao elemento onde se encontra a trabalhar para ver se o mesmo é uma iframe, e em caso afirmativo, vai invocar a propriedade contentDocument do elemento iframe, cuja mesma é responsável por devolver o conteúdo da iframe.

Nota: contentWindow.document é uma equivalência para IE8.

Já o método .html() está completamente alheio aos requisitos especiais de uma iframe, conforme podemos apurar no código fonte do jQuery da linha 5842 até 5882:

html: function( value ) {
    return access( this, function( value ) {
        var elem = this[ 0 ] || {},
            i = 0,
            l = this.length;

        if ( value === undefined ) {
            return elem.nodeType === 1 ?
                elem.innerHTML.replace( rinlinejQuery, "" ) :
                undefined;
        }

        // See if we can take a shortcut and just use innerHTML
        if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
            ( support.htmlSerialize || !rnoshimcache.test( value )  ) &&
            ( support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
            !wrapMap[ (rtagName.exec( value ) || [ "", "" ])[ 1 ].toLowerCase() ] ) {

            value = value.replace( rxhtmlTag, "<$1></$2>" );

            try {
                for (; i < l; i++ ) {
                    // Remove element nodes and prevent memory leaks
                    elem = this[i] || {};
                    if ( elem.nodeType === 1 ) {
                        jQuery.cleanData( getAll( elem, false ) );
                        elem.innerHTML = value;
                    }
                }

                elem = 0;

            // If using innerHTML throws an exception, use the fallback method
            } catch(e) {}
        }

        if ( elem ) {
            this.empty().append( value );
        }
    }, null, value, arguments.length );
},

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .