jQuery를 사용하여 페이지를 iframe으로 리디렉션하는 방법

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

를 사용하여 HREF를 얻어야한다. 보안상의 이유로 일부 웹 사이트는 'X는 프레임이-옵션 그냥

//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> 변경이를 테스트 할 수 있습니다 SAMEORIGIN로 설정 s 링크 href to http://www.google.com

이제 콘솔에 오류가 표시됩니다.

따라서 구문이 잘못되었습니다. iframe의 위치를 ​​변경하지 않으면 대상 iframe이 포함 된 기본 페이지 (창)가 변경됩니다. 따라서 작업을 완료하기위한 수정은

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

Answer 2

사용 document.getElementById("iframe").src은 iframe 대응의 src 속성을 변경하고 클릭 링크 HREF로 설정합니다.

또한 당신은 많은 시간이 그것을 허용하지 않는다 때문에 iframe이 윈도우의 위치를 ​​변경할 수 없습니다 $(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>