iframe のコンテンツを切り替える際に iframe 内が真っ白になってしまう。
切換え先のページのロードが重たければ、白い画面がしばらく表示されることになるのだが、なんとかならんか〜と考えてみた。
結論から言うと、iframe を div タグ内に入れて、div タグをフェードイン／フェードアウトさせればフワフワっとページを切り替えることが出来る。
フェードインは iframe の loaded イベントで行う。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" language="javascript">
var index = 0;
var pages = new Array("aaaa.html", "bbbb.html");
function frameChange(){
$('#contents').animate({ opacity: 0 }, 500, function () {
$('#contents').css("visibility", "hidden");
main.location.href = pages[index];
index++;
index = index % 2;
});
}
function loaded(){
$('#contents').css("visibility", "visible");
$('#contents').animate({ opacity: '1' }, 800, function () {
});
}
</script>
</head>
<body style="background-color:Black;">
<input type="button" value="切替" onclick="frameChange()">
<div id="contents">
<iframe name="main" id="main" scrolling="no" onload="loaded();"/>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿