This article describes the mask layer hiding and display effects that JS implements compatible with Firefox and IE iframe onload properties. Share it for your reference, as follows:
<%@ 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 type=image src="lib/images/website.jpg" id="website_earth"/><br><br><input type=image src="lib/images/associator.jpg" id="select_ass"/><br><br><input type=image src="lib/images/yichang.jpg" id="yichang"/><br><br><input type=image src="lib/images/lvchang.jpg" id="gtbike"/><</div></body></html><script>var secs=20;var wait=secs*100;//Switch the image function when pressed timing(){document.getElementById("select_ass").disabled =true;document.getElementById("select_ass").src = "lib/images/123123.jpg";//Timed switching image/*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"; }*/}//Switch original image 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 creates an iframe object/*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>";}//Mask layer display var mybg;displayDiv=function(){ mybg = document.createElement("div"); mybg.setAttribute("id","mybg"); mybg.innerHTML="<center> is being processed, please wait <img src='lib/images/loading.gif'></img></center>"; mybg.style.width = "100%"; mybg.style.position = "absolute";//Absolute position display mybg.style.top = "260"; mybg.style.left = "0"; mybg.style.zIndex = "100";//z-axis position mybg.style.opacity = "0.8";//Transparency mybg.style.filter = "Alpha(opacity=80)";//Filter displays transparency document.body.appendChild(mybg);}//Mask layer removal removeDiv=function(){document.body.removeChild(mybg);Timer();}</script>For more information about JavaScript related content, please check out the topics of this site: "JavaScript switching special effects and techniques summary", "JavaScript animation special effects and techniques summary", "JavaScript search algorithm skills summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and techniques summary", "JavaScript operation skills summary", "JavaScript errors and debugging skills summary" and "JavaScript mathematical operation usage summary"
I hope this article will be helpful to everyone's JavaScript programming.