title: How to get reference to elements of an iframe?
body: <p>Basically a survey from SurveyMonkey is loading on my webpage in an iframe.That survey has 'Done' button which needs to be clicked when you have filled up the survey. Now when i inspect console by right-clicking on page anywhere except survey pop up and execute this statement:</p>
  
  <pre><code>document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");
  </code></pre>
  
  <p>The result i get is:</p>
  
  <pre><code>HTMLCollection []
  </code></pre>
  
  <p>But when i inspect on survey popup and write the same statement in console i get the following result:</p>
  
  <pre><code>HTMLCollection [button.btn.small.done-button.survey-page-button.user-generated.notranslate]
  </code></pre>
  
  <p>Basically i want to add an event when 'Done' button will be pressed but the problem is i cannot get reference to this button simply by passing its class because it loads after few seconds later when my html page is loaded.</p>
  
  <p>I have even written a function to alert me 'Hi' when 'Done' button shows up button it is of no value.Here is the code:-</p>
  
  <pre><code> $('.btn small done-button survey-page-button user-generated notranslate').on('load',function(){alert('hi'); console.log("survey-loaded");});
  </code></pre>
  
  <p>Following is the html of 'Done' button:</p>
  
  <pre><code>&lt;button type="submit" class="btn small done-button survey-page-button user-generated notranslate"&gt;DONE&lt;/button&gt;
  </code></pre>