Skip to main content
Version: v12.0.0

Dynamic Iframes

When loaded, the Hand Talk Plugin scans the page for iframes and adds the necessary listeners to identify the content of an element. In the case of iframes that are built dynamically, the addListenersToIframes() function must be used to search for iframes again, or addListenersToIframe(iframe) for a specific iframe.

See the example below.

<body>
  <!-- Get 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({
      // Exchange it for your access token
      token: "TOKEN"
    });
    // After 3 seconds it creates an iframe
    window.setTimeout(function() {
      // Create the 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>");
      // Add the listeners to the iframe
      ht.addListenersToIframe(iframe);
      // To search for iframes and add listeners, use:
      // ht.addListenersToIframes();
    }, 3000);
  </script>
</body>

If you are updating the src of an iframe that already has click listeners, consider removing the listeners with the removeListenersFromIframes() or removeListenersFromIframe(iframe) methods for a specific iframe. After loading the new content, add the listeners again.

Notes about Iframes​

  • ✅ The iframe will only work if it is exclusively from the same source (same address). It has no relation to domain and subdomain.

  • ✅ In order for the Hand Talk Plugin to translate correctly, the content inserted into the iframe must be built with semantic HTML elements.

  • ✅ Hand Talk Plugin will not capture translatable elements (texts and images) contained in the iframe that are implemented inside another iframe. This type of content layout creates a technical limitation that prevents the plugin from working.

  • ✅ It is important to note that the content rendered in the iframe must have the same domain as the site in which it is inserted. Otherwise the Plugin will not work, as browsers apply a Cross-Origin Resource Sharing - CORS block which prevents the Plugin from interacting with the content, making translation impossible.