Embedded Files
Olá pessoal, ja ouviram que não é possível trabalhar com um iframe se o mesmo não retorna nada no pelo evento message ou se não possui alguma integração com as nossas plataformas? ... falso!
A continuação venho compartilhar com vocês uma maneira de acessar ao conteúdo de certos iframes sem precisar de integrações ou de um retorno pelo evento message, isto será possível com o uso do método contentDocument, este método retorna o objeto “Document” de um iframe caso o mesmo cumpra com a política da mesma origem.
Como saber se meu iframe é apto para esta solução?
Como saber se meu iframe é apto para esta solução?
Para descobrir a resposta desta pergunta devemos entender mais sobre política da mesma origem:
Same Origin Policy
É um mecanismo de segurança que proíbe que um documento ou script de uma origem possa interagir com um recurso de origem diferente, para verificar se duas URLs têm a mesma origem as duas devem coincidir em protocolo, host e port (caso for especificado).
Agora entendendo melhor sobre a política da mesma origem podemos aplicá-la para saber se o nosso iframe pode utilizar o método contentDocument, logo, temos duas possibilidades para que o iframe seja apto para usar este método:
Iframe com atributo src: Quando o Iframe possui src ele deve cumprir com a política da mesma origem:
Na imagem acima podemos ver em vermelho o protocolo e em roxo o host coincidindo entre o src do iframe e a url atual, o que nos permite dizer que cumprem com a política da mesma origem!
Iframe sem atributo src: Quando o Iframe não possui src podemos assumir que o iframe é local, logo, não precisamos fazer nenhuma verificação para que contentDocument funcione, a seguir um exemplo de iframe sem src:
Na prática para verificar se um iframe é apto para o uso de contentDocument basta aplicar o método ao seletor do iframe, e se este devolver null, quer dizer que não cumpre com a política da mesma origem, logo, não é apto para esta solução.
Como incorporar contentDocument ao nosso código?
Como incorporar contentDocument ao nosso código?
Vamos supor que queremos mostrar no console o valor de um input localizado dentro de um iframe, logo a estrutura para capturar o valor dessa tag seria:
Agora que compreendemos melhor como incorporar contentDocument ao nosso código a seguir tem um par de exemplos usando contentDocument no seguinte site. O objetivo é implementar Enhanced Conversion no primeiro formulário do site e capturar o clique nos botões de contato que estão no iframe do rodapé da página.
EC para o Formulário:
Captura de click nos botões de contato:
Observações:
Observações:
Recomendo utilizar o EventListener load ao invés de DOMContentLoaded para acionar o código via gtag.js nesta situação, pois ele é acionado assim que a página foi completamente carregada. O DOMContentLoaded trabalha apenas quando o documento principal for carregado, desconsiderando outros objetos “Document” secundários como, neste caso, os <iframes>. Portanto, ao trabalhar com os seletores de um <iframe> o EventListener load é a escolha mais adequada.
Caso a implementação for feita por GTM o acionador equivalente é Window Loaded.
Existem situações excepcionais onde o iframe onde aplicamos contentDocument demora tanto para carregar que ele carrega até mesmo depois da chamada do evento 'load', isto pode quebrar o nosso código gerando varios bugs, caso você se depare com esta situação pode utilizar esta versão do código utilizando setInterval para dibrar este problema, na prática após a chamada de 'load' setInterval vai checar continuamente se o seletor do nosso iframe existe, e só quando exista vai rodar o código, segue abaixo um exemplo com o código mostrado acima de "Captura de click nos botões de contato":
Referências:
Referências:
Page updated
Google Sites
Report abuse