Как перенаправить страницу в iframe с помощью jQuery

Question

На моем веб-сайте у меня есть сценарий jQuery, который исчезает в теле страницы, а затем, когда пользователь нажимает на относительную ссылку, тело исчезает и перенаправляет пользователя на новую страницу и сценарий затем начинается снова.

Мой коллега сообщил мне, что было бы лучше, если бы основной контент был помещен в iframe, чтобы прекратить обновление всего тела при смене страниц, но проблема в том, что когда пользователь нажимает на относительную ссылку, iframe исчезает но вместо новой страницы, ориентированной на iframe, она просто открывает страницу.

Как исправить это? Я думаю, что ошибка возникает после строки $("body").fadeIn(2000);.

<script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
    <script type="text/javascript"> 
    $(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; 
     } 
    }); 
    </script> 

    <a href="competition.html" class="transition" target="iframe">Home</a> 

    <iframe src="main.html" name="iframe" seamless="seamless" width="800" height="800"> 
    </iframe> 

Answer 1

вы не можете изменить расположение окна Iframe, потому что много раз это не разрешено. Из-за соображений безопасности некоторые веб-сайты установить X-Frame-Options для SAMEORIGIN вы можете проверить это, просто изменить

//your syntax is wrong here see below for correct 

window.location = linkLocation

в

//correct way to change the location of iframe window 

window.frames['yourframeName'].location=linkLocation

и <a> ' s link href to http://www.google.com

Теперь посмотрите на ошибку в консоли.

Следовательно, ваш синтаксис неверен, вы не меняете местоположение вашего iframe, вы меняете суматоху своей главной страницы (окна), которая содержит целевой iframe. Таким образом, исправление для вашей работы -

function redirectPage() { 
     $('iframe').attr('src',linkLocation); 
     $('iframe').fadeIn() 
    } 

Answer 2

Использование document.getElementById("iframe").src изменить атрибут ГКЗ фрейма, и установив его на щелкнули ссылку HREF.

Также вы должны получить HREF помощью $(this).attr("href");

<script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("body").css("display", "none"); 
     $("body").fadeIn(2000); 
     $(".transition").click(function (event) { 
      event.preventDefault(); 
      linkLocation = $(this).attr("href"); 
      $("iframe").fadeOut(1000, redirectPage(linkLocation)); 
     }); 

     function redirectPage(url) { 
      document.getElementById("iframe").src = url; 
     } 
    }); 
    </script> 

    <a href="competition.html" class="transition" target="iframe">Home</a> 

    <iframe src="main.html" id="iframe" name="iframe" seamless="seamless" width="800" height="800"> 
    </iframe>