title: How can I check if an iframe is loaded or not? And how can I interact with the elements within the iframe?
body: <p>I've approached this much. Now, I see the inner document.</p>
  
  <pre><code>var ifrm = document.getElementsByClassName("css-axxz1")[0].children[0];
  var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
  console.log(doc);
  doc.onload = function(){
      alert("hi");
  };     
  </code></pre>
  
  <p>However, I see nothing there.</p>
  
  <p><a href="https://i.stack.imgur.com/3TObY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3TObY.png" alt="enter image description here"></a></p>
  
  <p>So, I added <code>onload</code> to make sure it loads completely.</p>
  
  <pre><code>var ifrm = document.getElementsByClassName("css-axxz1")[0].children[0];
  var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
  console.log(doc);
  doc.onload = function(){
      alert("hi");
  };     
  
  </code></pre>
  
  <p>But the result is the same. It's an empty document. And the alert doesn't show up.</p>
  
  <p>And I'd like to add a click listener to the button element in the iframe. Then, get the value of the input element in the iframe.</p>
  
  <p>But the problem is, the button doesn't have ID. But it has class names.</p>
  
  <pre><code>&lt;button color="#A13354" data-qa="ok-button-visible deep-purple-ok-button-visible" class="button__Buttoewzc s2sWPP"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>How can I implement these?</p>