网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js+iframe加载效果完成后才显示内容

关注我吧
 2011/9/2 14:44:58 阅读次数:8506

最近做因为有需要做iframe加载效果。就写了一个。感觉效果还行。主要是iframe加载完后才显示内容(兼容IE/FF/Safari )!下面我就把代码贴给大家看了!欢迎提出你宝贵的意见。

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
*{margin:0;padding:0;}
.ifr_div{width:600px;height:600px; position:relative;}
.ifr_div img{ vertical-align:middle;}
.proccess{border:0px solid;border-color:#009900;height:600px;line-height:600px;width:600px;text-align:center;background:#eee;margin:0;position:absolute;top:0;left:0;}
.proccess b{vertical-align:middle;background:url(http://www.86y.org/upload/images/20110902143538381.gif) no-repeat 0 center;padding-left:35px;display:inline-block;}
-->
</style>
</head>
<body>
<div class="ifr_div">
	<div class="proccess" id="loading"><b>正在加载中。。。</b></div>
	<iframe id="sfa" name="sfa" frameborder="0" scrolling="auto" height="600" width="600"></iframe>
</div>
<script language="JavaScript">
var iframe = document.getElementById("sfa"); 
iframe.src = "http://www.86y.org"; 
if (iframe.attachEvent){ 
	iframe.attachEvent("onload", function(){
	document.getElementById("loading").style.display="none";
	}); 
} else { 
	iframe.onload = function(){
	document.getElementById("loading").style.display="none";
	}; 
} 
</script>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭