JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果

摘要：本文实例讲述了JS实现兼容火狐及IEiframeonload属性的遮罩层隐藏及显示效果。分享给大家供大家参考，具体如下：varsecs=20...

本文实例讲述了JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果。分享给大家供大家参考，具体如下：

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title></title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page">  <style type="text/css">  </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" > <div id="Layer3"> <img src="lib/images/welcome33.gif" /> </div> <div id="Layer1"> <iframe src="earth.jsp" id="Layer1"></iframe> </div> <div id="Layer2"> <input type=image src="lib/images/website.jpg" id="website_earth" alt="点击按钮查询站点分布地图"/> <br><br> <input type=image src="lib/images/associator.jpg" id="select_ass" alt="点击按钮查询用户卡信息"/> <br><br> <input type=image src="lib/images/yichang.jpg" id="yichang" alt="点击按钮处理异常卡信息"/> <br><br> <input type=image src="lib/images/lvchang.jpg" id="gtbike" alt="点击查看公司简介"/> </div> </body> </html> <script> var secs=20; var wait=secs*100; //切换按下时的图片 function timing(){ document.getElementById("select_ass").disabled =true; document.getElementById("select_ass").src = "lib/images/123123.jpg"; //定时切换图片 /*for(i=1;i<=(wait/100);i++) { window.setTimeout("doUpdate(" + i + ")", i * 100); } window.setTimeout("Timer()", wait); } function doUpdate(num) { if(num == (wait/100)) { document.getElementById("select_ass").src = "lib/images/associator.jpg"; } else { wut = (wait/100)-num; document.getElementById("select_ass").src = "lib/images/123123.jpg"; }*/ } //切换原始图片 function Timer(){ document.getElementById("select_ass").disabled =false; document.getElementById("select_ass").src = "lib/images/associator.jpg"; } var btMax =document.getElementById("Layer1"); website_earth.onclick= function(){ displayDiv(); btMax.innerHTML ="<iframe src=earth.jsp id=Layer1 onLoad='removeDiv()'></iframe>"; } select_ass.onclick= function(){ displayDiv(); timing(); btMax.innerHTML ="<iframe src=Client?name=1 id=Layer1 onLoad='removeDiv()'></iframe>"; //js创建iframe对象 /*var NewFrame=window.parent.document.createElement("iframe"); NewFrame.id="Layer1"; NewFrame.setAttribute("frameBorder","0"); NewFrame.setAttribute("scrolling","no"); NewFrame.setAttribute("onLoad","removeDiv()"); NewFrame.setAttribute("src","Client"); btMax.appendChild(NewFrame);*/ } yichang.onclick= function(){ displayDiv(); btMax.innerHTML ="<iframe src=Client?name=2 id=Layer1 onLoad='removeDiv()'></iframe>"; } gtbike.onclick= function(){ btMax.innerHTML ="<iframe src=lib/images/61111.jpg id=Layer1></iframe>"; } //遮罩层显示 var mybg; displayDiv=function() { mybg = document.createElement("div"); mybg.setAttribute("id","mybg"); mybg.innerHTML="<center>正在处理中, 请稍候<img src='lib/images/loading.gif'></img></center>"; mybg.style.width = "100%"; mybg.style.position = "absolute";//绝对位置显示 mybg.style.top = "260"; mybg.style.left = "0"; mybg.style.zIndex = "100";//z轴位置 mybg.style.opacity = "0.8";//透明度 mybg.style.filter = "Alpha(opacity=80)";//滤镜显示透明度 document.body.appendChild(mybg); } //遮罩层移除 removeDiv=function() { document.body.removeChild(mybg); Timer(); } </script>

希望本文所述对大家JavaScript程序设计有所帮助。