本文實例講述了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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
<!--
#Layer1 {
position: absolute;
width: 896px;
height: 472px;
z-index: 1;
left: 97px;
top: 120px;
}
#Layer2 {
position: absolute;
width: 127px;
height: 86px;
z-index: 2;
left: 1159px;
top: 240px;
}
#Layer3 {
position: absolute;
width: 200px;
height: 115px;
z-index: 3;
left: 404px;
top: 160px;
}
body {
background-image: url(lib/images/index111.jpg);
margin-left: -10px;
}
.input_image{border:0px solid #808080; background-color:#006699;}
-->
</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 class="input_image" type=image src="lib/images/website.jpg" id="website_earth" alt="點擊按鈕查詢站點分布地圖"/>
<br><br>
<input class="input_image" type=image src="lib/images/associator.jpg" id="select_ass" alt="點擊按鈕查詢用戶卡信息"/>
<br><br>
<input class="input_image" type=image src="lib/images/yichang.jpg" id="yichang" alt="點擊按鈕處理異常卡信息"/>
<br><br>
<input class="input_image" 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?name=1");
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相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。