title: How to stop an empty iframe triggering a load event on injection?
body: <p>I'm <a href="http://css-tricks.com/snippets/html/post-data-to-an-iframe/" rel="noreferrer">using an empty frameto handle pseudo-asynchronous form submission</a>. For those that aren't familiar with the technique, the idea is to reference the frame's <code>name</code> attribute in the form's <code>target</code> attribute, such that the URI of the form's <code>action</code> resolves in the frame and the user experience isn't interrupted.</p>
  
  <p>To feedback to the user I need to use script to listen for the <code>load</code> or <code>error</code> events on the form, and because this effectively makes the whole UX script-dependent, I'm only injecting the frame and adding the form's target reference via script.</p>
  
  <p>The problem is that the frame will trigger a load event as soon as it's injected into the page: <a href="http://jsfiddle.net/barney/NcZrA/" rel="noreferrer">default behaviour</a>.</p>
  
  <p>I can mitigate this either with jQuery's <code>one</code> method and <code>e.stopImmediatePropagation()</code> (<a href="http://jsfiddle.net/barney/GvvTZ/" rel="noreferrer">here</a>), or I can inject the frame and <em>then</em> bind the events (<a href="http://jsfiddle.net/barney/NcZrA/" rel="noreferrer">here</a>). But both of these options are really counter-intuitive — the code certainly needs commenting to avoid looking like a mistake.</p>
  
  <p><strong>TL;DR: Is there any way an iframe can be modified or qualified to stop it firing an erroneous load event on injection in the first place?</strong></p>
  
  <p>What I've tried</p>
  
  <ol>
  <li>No <code>src</code> attribute</li>
  <li><code>src</code> set to <code>about:blank</code> (which the above is implicit for)</li>
  <li><code>src</code> set to <code>#</code></li>
  <li><code>src</code> set to <code>javascript:void 0</code></li>
  <li><code>src</code> set to empty data-URI <code>data:text/plain;base64,;</code></li>
  <li><code>srcdoc</code> set to empty or near-empty string</li>
  </ol>