Pular para o conteúdo principal
Versão: v9.0.0

Iframes Dinâmicos

Ao ser carregado, o Hand Talk plugin faz uma varredura na página buscando iframes e adicionando os listeners necessários para identificar o conteúdo de um elemento. Em casos de iframes que são construídos dinâmicamente, deve ser utilizada a função addListenersToIframes() para buscar novamente por iframes, ou addListenersToIframe(iframe) para um iframe especifico.

Veja o exemplo abaixo.

Caso esteja atualizando o src de um iframe que já possui os listeners de clique, considere remover os listeners com os métodos removeListenersFromIframes() ou removeListenersFromIframe(iframe) para um iframe especifico. Após o carregamento do novo conteúdo, adicione os listeners novamente.

Observações sobre Iframes​

  • ✅ O iframe só funcionará se for exclusivamente da mesma origem (mesmo enderenço). Não tendo relação com domínio e subdomínio.
  • ✅ Para que o Hand Talk plugin realize a tradução da maneira correta, o conteúdo inserido dentro do iframe deve ser construido com elementos HTML semânticos.
  • ✅ O Hand Talk Plugin não irá capturar elementos traduzíveis (textos e imagens) contidos no iframe implementados dentro de outro iframe. Nesse tipo de disposição do conteúdo cria uma limitação técnica que impede o funcionamento do plugin.
  • ✅ É importante observar que o conteúdo renderizado no iframe deve ter o mesmo domínio do site no qual está inserido. Caso contrário o Plugin não irá funcionar, pois os navegadores aplicam um bloqueio Cross-Origin Resource Sharing - CORS  que impede a interação do Plugin com o conteúdo, inviabilizando a tradução.

Exemplo de Compatibilidade com Iframes Dinâmicos​

Javascript​

var ht = new HT({
  // Troque por seu token de acesso
  token: "TOKEN"
});
// Aguarda 3 segundos e insere um iframe na página
window.setTimeout(function() {
  // Cria o iframe e adiciona na pagina
  var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  //Define o conteúdo do iframe
  iframe.contentDocument.write("<div>Olá mundo!</div>");
  // Adiciona os listeners no iframe
  ht.addListenersToIframe(iframe);
  // Ou utilize
  // ht.addListenersToIframes();
  // Para fazer a varredura na página inteira novamente
}, 3000);

HTML​

<body>
  <!-- Pega a ultima versão do plugin Hand Talk -->
  <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
  <script>
    var ht = new HT({
      // Troque por seu token de acesso
      token: "TOKEN"
    });
    // Após 3 segundos cria um iframe
    window.setTimeout(function() {
      // Cria o iframe e adiciona na pagina
      var iframe = document.createElement("iframe");
      document.body.appendChild(iframe);
      // Define o conteúdo do iframe
      iframe.contentDocument.write("<div>Olá mundo!</div>");
      // Adiciona os listeners no iframe
      ht.addListenersToIframe(iframe);
      // Para buscar iframes e adicionar os listeners, utilize:
      // ht.addListenersToIframes();
    }, 3000);
  </script>
</body>