동적으로 IFrame을로드하는 Jquery와 Ajax

Question

웹 페이지에서 iframe을 동적으로로드하는 스크립트가 있습니다. 여기에서 데모를 볼 수 있습니다 : DEMO

비슷한 rseult를 얻기 위해 jquery를 사용하고 싶지만 좋은 슬라이딩 효과와 다른 div에서 iframe을로드하는 외부 링크를 사용하고 싶습니다. 기본적으로 한 페이지에 10 개의 링크가 있습니다. 링크를 클릭하면 iframe 창에서 새 내용을로드하고 전환 효과를 적용합니다. 누구든지이 플러그인이 있는지 알고 있습니까? 나는 처음부터 스크립트를 작성하기에 충분한 경험이 없기 때문에 어떤 도움을 주시면 감사하겠습니다!

Answer 1

은

당신은 jQuery를 사용하여 iframe이 애니메이션을 할 수 있습니다 또는 애니메이션을 할 수

function loadFrame() { 
    var j$ = jQuery.noConflict(); 
    var frames = j$('.frameToChange'); 

    frames.each(function(index) { 
     j$(this).slideDown('fast'); 
     j$(this).attr('src', j$(this).attr('link')); 
    }); 
} 

Answer 2

jQuery에는 slide 효과가 내장되어 있습니다. 두 개의 iframe (이전 및 이전이라고 부름)을 사용하고 슬라이드 효과를 사용하여 두 프레임 사이를 전환하여 원하는 것을 얻을 수 있습니다.

Answer 3

아래의 식으로 뭔가를 시도

<input type="button" value="Load Frames" id="submit" name="submit" onclick="loadFrame()" /> 
<iframe class="frameToChange" link="http://www.apple.com" style="display: none" ></iframe> 
<iframe class="frameToChange" link="http://www.google.com" style="display: none" ></iframe> 

같은 페이지를 감안할 때 ... 의견에 따라 변경됨 iframe의 내용

iframe을 사용하여 수행하는 단점은 부모 스크립트가 iframe 내부에서 실행되는 스크립트와 통신하는 것을 허용하지 않는다는 것입니다. 다른 도메인의 악의적 인 스크립트로부터 보호하기 위해 도메인 간 제한이라고합니다.

iframe의 콘텐츠를 애니메이션으로 만들려면 iframe 내부에서로드되는 페이지의 일부로 애니메이션을 구현해야합니다. 그렇지 않으면 iframe 자체를 애니메이션화하기 위해 jQuery에는 이미 here으로 설명 된 몇 가지 기본 애니메이션 기능이 있습니다.

Answer 4

나는 다음과 같은 사용

:

$('iframe').load(function() { 
    $(this).animate({ 
     'height': this.contentWindow.document.body.scrollHeight + 'px' 
    }); 
});