0

I have a functionality in my system that transcripts from voice to text using an external library.
This is what the library renders:
What I need is really simple: to get the text from the generated textareas.
The textareas are rendered without any name or id, so I can only access them by class in the Google Chrome console. Whenever I try to get them by class in my javascript code, I get an array of [0] elements.

I think that the problem is that this library renders a new #document and I'm not able to get it's content in my $(document).ready function because it scopes the 'parent' document. How it renders.
Any thoughts on this? Thank you.

knchr
  • 3
  • 3
  • It sounds like you need to determine when the iframe has loaded. Try https://stackoverflow.com/questions/751435/detecting-when-iframe-content-has-loaded-cross-browser. – mykaf Nov 23 '20 at 16:10

1 Answers1

0

I hope the code below helps.

// Get you iframe by Id or other way
let iframe = document.getElementById("myFrame");

// After iframe has been loaded
iframe.onload= function() {   
    // Get the element inside your iframe
    // There are a lot of ways to do it
    // It is good practice to store DOM objects in variables that start with $
    let $elementByTag = iframe.contentWindow.document.getElementsByTagName("p")[0];
    let $elementById = iframe.contentWindow.document.getElementById("elementId");
    let $elementByClass = iframe.contentWindow.document.getElementsByClassName("classHere");
    let $elementBySelector = iframe.contentWindow.document.querySelector("#dad .classname");
    
    // After get the element extract the text/html
    let text = $element.innerText
    let html = $element.innerHTML
};
Fernando Nunes
  • 26
  • 3