您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
框架全屏与加载框架过渡的制作
发布时间：2015-03-06 11:40:37编辑：雪饮阅读（）
有时候我们需要使用一个网页来覆盖我们当前的网页，但若直接用js写入语句反而麻烦，需要将对方的网页重新在js中以字符串来布局，于是我们想到框架。可是框架默认不是全屏的，我们可以通过js来获取框架内部整体内容的大小，来实现全屏，但是对于比较大的网页我们无法立即捕捉其整体内容大小，毕竟加载是需要时间的，那么框架加载的时候就会有过渡。且看在下如何解决，若有不到之处还请多多指教。
代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload=function ceshi(){document.write('<iframe frameborder="0" onload="this.style.width=document.body.clientWidth,this.style.height=document.body.clientHeight" src="http://cs.63688011.com/topic/bpzl/?hs-xwy" style="display:none;" id="kj"></iframe><div id="jiazai" style="width:500px;height:200px;margin:50px auto;"><img src="http://4g.wgk86.com/images/0.jpg" /></div>');
function zifangfa(){
document.getElementById("kj").style.display="block";
document.getElementById("jiazai").style.display="none";
}
setTimeout(zifangfa,3000);}
</script>
</head>
<body>
<div>111</div>
</body>
</html>
从代码中我们可以看到，首先我们在网页onload的时候加载一个方法先将整个网页写入一个框架和一个图片覆盖掉之前的内容，然后隐藏框架（框架加载需要时间）。在没有加载出框架的这段时间里，我们使用一个过渡图片（当然若是为了更精确我们可以为其专门制作进度条），然后设置时间为等待3秒（加载时间应该也是可以获取的），3秒后框架加载完成我们让其显示，而过渡图片消失。
案例测试站点下载：
关键字词：框架全屏,过渡,雪饮个人博客
下一篇：指定某时间进行图片路径的调换