title: Achieve smooth iFrame navigation
body: <p>I have an iFrame with navigation inside of it, meaning the iframe src will be changed when navigating inside it. The navigation code inside the iFrame is something like:</p>
  
  <pre><code>window.location = "new URL";
  </code></pre>
  
  <p>While this is working the user experience is really bad, especially on mobile devices (I can see a "blink" / "flash" when iFrame changes his source)</p>
  
  <p>I tried to implement something similar to what Chris Coyier had <a href="http://css-tricks.com/prevent-white-flash-iframe/" rel="nofollow">here</a>, by triggering a postMessage to the parent while navigating, telling the parent to hide/show the iFrame while src is being changed. Something like (this is inside parent postMessage event):</p>
  
  <pre><code>var $iFrame = $('iframe');
  
  $iFrame.css({'visibility': 'hidden'});
  
  $iFrame.load(function(){
      $iFrame.css({'visibility': 'visible'});
  });
  </code></pre>
  
  <p>This will work, but the result is not better - I can still see this "blink" when the iFrame is being hidden-visible by my new code.</p>
  
  <p>My 3rd try included having a new iFrame and give it the new source, only when it loaded making it visible and hiding the first one. This did not improve the results as well:</p>
  
  <pre><code> var $iFrame = $('.iFrame1');
   var $iFrame2 = $('.iFrame2');
  
   $iFrame2.attr('src', encodeURIComponent(url));
  
   $iFrame2.load(function(){
       $iFrame2.css({'visibility': 'visible'});
       $iFrame.css({'visibility': 'hidden'});
   });
  </code></pre>
  
  <p>Any help getting a smoother transition (on mobile devices!) will be much appreciated!</p>