title: How to redirect page into iframe using jQuery
body: <p>On my website I have a jQuery script which fades in the body of page, and then when a user clicks on a relative link the body fades out and redirects the user to the new page and the script then starts again.</p>
  
  <p>My colleague advised me it would be better to have the main content put into an iframe in order to stop having the whole body refreshing when changing pages, but the problem is that when a user clicks on a relative link the iframe fades out but instead of the new page targeting the iframe it just opens up the page.</p>
  
  <p>How do I fix this? I think the error occurs after the line <code>$("body").fadeIn(2000);</code>.</p>
  
  <pre><code>    &lt;script type="text/javascript" src="jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("body").css("display", "none");
          $("body").fadeIn(2000);
          $(".transition").click(function (event) {
              event.preventDefault();
              linkLocation = this.href;
              $("iframe").fadeOut(1000, redirectPage);
          });
  
          function redirectPage() {
              window.location = linkLocation;
          }
      });
      &lt;/script&gt;
  
      &lt;a href="competition.html" class="transition" target="iframe"&gt;Home&lt;/a&gt;
  
      &lt;iframe src="main.html" name="iframe" seamless="seamless" width="800" height="800"&gt;
      &lt;/iframe&gt;
  </code></pre>