title: How do I test an iframe and get all the response headers?
body: <p>I am working on a webapp that can show url's in an iframe. But it also has the ability to first test the url before showing the url in an iframe. So before i show the iframe (set CSS rule to show the iframe element) i want to wait on the response. If i get an error or if i get a response header 'x-frame-options: DENY' i don't want to show the iframe and instead show an error message or something.</p>
  
  <p><strong>Consider this example</strong>:</p>
  
  <pre><code>const request = new XMLHttpRequest();
  request.open("GET", urlToTest, true);
  request.send();
  </code></pre>
  
  <p>Here i ALWAYS get a CORS issues. But this is expected, and testing this is not the same as what we actually want to do which is:</p>
  
  <pre><code>&lt;iframe id="webiframe" "src"="urlToTest&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><strong>Then i tried the following</strong>:</p>
  
  <p><code>this.webiframe</code> is a reference of the <code>&lt;iframe&gt;</code></p>
  
  <pre><code>this.webiframe.onload = function () {
      console.log('iframe ONLOAD');
  }.bind(this);
  this.webiframe.onerror = function () {
      console.log('iframe ONERROR');
  }.bind(this);
  this.webiframe.contentDocument.onreadystatechange = function () {
      this.iFrameEvent();
  }.bind(this);
  this.webiframe.contentDocument.addEventListener('DOMContentLoaded', this.iFrameEvent);
  this.webiframe.contentDocument.addEventListener('load', this.iFrameEvent);
  this.webiframe.contentDocument.addEventListener('onreadystatechange ', this.iFrameEvent);
  </code></pre>
  
  <p>But the event listeners that are added to the contentDocument are never called. The only event that is called is the onload event of the iframe reference.</p>
  
  <p><strong>So my question</strong>:</p>
  
  <p>Is it possible to get some information/testing of iframe when setting a 'src' attribute on it. More specifically if the url is working and if not, why it's not working through response headers?</p>