Jquery и Ajax для динамической загрузки IFrame

Question

У меня есть скрипт, который динамически загружает фреймы внутри веб-страницы. Вы можете увидеть демо здесь: DEMO

Я хочу использовать jquery для достижения аналогичного результата, но с хорошим эффектом скольжения и внешними ссылками, которые загружают iframe в другой div. В основном, у меня есть 10 ссылок на странице. Когда ссылка нажата, я хочу, чтобы окно iframe загружало новый контент и применял эффект к переходу. Кто-нибудь знает какие-либо плагины, которые существуют для этого? Я не достаточно опытен, чтобы написать сценарий с нуля, поэтому любая помощь будет высоко ценится!

Answer 1

Изменено на основе комментариев ...

Учитывая страницу как

<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>

Попробуйте что-то вроде ниже

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

Я использую следующее:

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

Answer 3

Вы можете анимировать iframe с помощью jQuery или анимировать содержимое iframe.

Недостатком работы с iframe является то, что они не позволяют скрипту в родительском объекте взаимодействовать со скриптом, работающим внутри iframe. Это называется междоменным ограничением для защиты от вредоносных скриптов из разных доменов.

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

Answer 4

jQuery имеет встроенный эффект slide . Вы можете достичь того, что ищете, используя два iframe (назовите их старыми и новыми) и используя эффект слайда для перехода между ними.