Pular para o conteúdo principal
Versão: v12.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 dinamicamente, deve ser utilizada a função addListenersToIframes() para buscar novamente por iframes, ou addListenersToIframe(iframe) para um iframe especifico.

Veja o exemplo abaixo.

<body>
  <!-- Pega a última 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 página
      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>

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 específico. 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 construído 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. Esse 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.