Skip to main content
Version: v10.0.0

Dynamic Iframes

When loaded, the Hand Talk's plugin will do a scan in your entire webpage searching for iframes and adding the necessary listener to identify the content of one element. In cases that the iframe is built dynamically, it should be added a function addListenerToIframes to search again for iframes, or addListenersToIframe(iframe) for some specific iframe.

Check the quoted example.

In case you are updating the iframe's src that already has click listener, consider to remove the listener with the removeListenersFromIframes() method or removeListenersFromIframe(iframe) to some specific iframe. After the loading of the new content, add the listeners again.

About iframes​

  • ✅ The iframe will only work if it comes exclusively from the same source (same address). It has no relation to domain and subdomain.
  • ✅ For the Hand Talk plugin to perform a translation correctly, the content inserted inside the iframe must be constructed with semantic HTML elements.
  • ✅ The Hand Talk Plugin will not capture translatable elements (text and images) contained in the iframe implemented within another iframe. This type of content arrangement creates a technical limitation that prevents the plugin from functioning.
  • ✅ The origin of the content in the iframe must be the same as the contracted domain. Otherwise, a Cross-Origin Resource Sharing - CORS error will occur, preventing the translation of texts and images.

Example of compatibility with Dynamic Iframes​

Javascript​

var ht = new HT({
  // Change it to your access token
  token: "TOKEN"
});
// Wait 3 seconds and insert an iframe to the page
window.setTimeout(function() {
  // Creates a new iframe and add it to the page
  var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  // Defines the content of the iframe
  iframe.contentDocument.write("<div>Hello World!</div>");
  // Adds the listeners to the iframe
  ht.addListenersToIframe(iframe);
  // Or use
  // ht.addListenersToIframes();
  // To do a full scan again
}, 3000);

HTML​

<body>
  <!-- Takes the latest version of the Hand Talk Plugin-->
  <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
  <script>
    var ht = new HT({
      // Change it to your access token
      token: "TOKEN"
    });
    // Wait 3 seconds and insert an iframe to the page
    window.setTimeout(function() {
      // Creates a new iframe and add it to the page
      var iframe = document.createElement("iframe");
      document.body.appendChild(iframe);
      // Defines the content of the iframe
      iframe.contentDocument.write("<div>Hello World!</div>");
      // Adds the listeners to the iframe
      ht.addListenersToIframe(iframe);
      // Or use
      // ht.addListenersToIframes();
      // To do a full scan again
    }, 3000);
  </script>
</body>