부드러운 iFrame 탐색 수행

Question

내부에 탐색 기능이 포함 된 iFrame이 있습니다. 즉, 내부에서 탐색 할 때 iframe src가 변경된다는 의미입니다.

window.location = "new URL"; 

이 사용자 경험을 작업하는 동안 (iframe이 자신의 소스를 변경하면 나는 "점멸"/ "플래시"를 볼 수 있습니다) 특히 모바일 기기에, 정말 나쁜 : iframe이 내부의 탐색 코드는 무언가 같이가

나는 SRC가 변경되는 동안/iframe을 보여 크리스 Coyier가 탐색하는 동안, 부모에 PostMessage를 트리거 숨길 부모를 말함으로써, here 있었다 것과 유사한 무언가를 구현하기 위해 노력했다. 같은 뭔가가 (이 부모 PostMessage를 이벤트 내부) :

var $iFrame = $('iframe'); 

$iFrame.css({'visibility': 'hidden'}); 

$iFrame.load(function(){ 
    $iFrame.css({'visibility': 'visible'}); 
}); 

이 작동하지만 결과는 좋은 것은 아닙니다 - 나는 여전히 iframe이 숨겨져 보이지 될 때 나의 새로운 코드로이 "깜박"볼 수 있습니다.

내 3 번째 시도는 새로운 iFrame을 포함하고 첫 번째 시도를 숨기고 표시 할 때만 새 소스를 제공합니다. 이뿐만 아니라 결과를 개선되지 않았다 (! 모바일 장치에서)

var $iFrame = $('.iFrame1'); 
var $iFrame2 = $('.iFrame2'); 

$iFrame2.attr('src', encodeURIComponent(url)); 

$iFrame2.load(function(){ 
    $iFrame2.css({'visibility': 'visible'}); 
    $iFrame.css({'visibility': 'hidden'}); 
}); 

어떤 도움 부드러운 전환을 점점 많이 이해할 수있을 것이다!

Answer 1

문제가 정확하지 않은 경우 가시성이 아닌 불투명도를 변경할 수 있습니다. 이 변경으로 당신은 짧은 페이드 - 트랜지션을 줄 수 있습니다. 이것은 CSS 또는 jQuery를 사용하여 원하는대로 만들 수 있습니다.