js implementation of simple lock screen function example_javascript skills

The example in this article describes how to implement a simple lock screen function in js. Share it with everyone for your reference. The specific implementation method is as follows:

//********* 锁屏DIV ***************************
function LockScreen(tag,title,width,height,url)
{
  if (tag) //锁屏
  {
    var lockdiv = document.getElementById("lockscreen");
    if (lockdiv!=null)
    {
      lockdiv.style.display = "block";
      var subdiv = document.getElementById("subdialog");
      if (subdiv!=null)
      {
        subdiv.style.display = "block";
        document.getElementById("dialog1").src = url;
      }      
    }else{
      //创建新的锁屏DIV,并执行锁屏
      var tabframe= document.createElement("div");
      tabframe.id = "lockscreen";
      tabframe.name = "lockscreen";
      tabframe.style.top = '0px';
      tabframe.style.left = '0px';
      tabframe.style.height = '100%';
      tabframe.style.width = '100%';
      tabframe.style.position = "absolute";
      tabframe.style.filter = "Alpha(opacity=10)";
      tabframe.style.backgroundColor="#000000";
      tabframe.style.zIndex = "99998";
      document.body.appendChild(tabframe);
      tabframe.style.display = "block";
      //子DIV
      var subdiv = document.createElement("div");
      subdiv.id = "subdialog";
      subdiv.name = "subdialog";
      subdiv.style.top = Math.round((tabframe.clientHeight-height)/2);
      subdiv.style.left = Math.round((tabframe.clientWidth-width)/2);
      subdiv.style.height = height+'px';
      subdiv.style.width = width+'px';
      subdiv.style.position = "absolute";
      subdiv.style.backgroundColor="#000000"; 
      subdiv.style.zIndex = "99999";
      subdiv.style.filter = "Alpha(opacity=100)";
      subdiv.style.border = "1px";
      //subdiv.onmousemove = mouseMoveDialog;
      //subdiv.onmousedown = control_onmousedown;
      //subdiv.onmouseup = mouseUp;
      document.body.appendChild(subdiv);
      subdiv.style.display = "block";
      //subdiv.onclick=UNLockScreen;
      var iframe_height = height-30;
      var titlewidth = width;
      var html = "<table border='0' cellpadding='0' cellspacing='0'>"
      html += "<tr><td></td><td>";
      html += "<table><tr><td><font color='#FFFFFF'><b>"+title+"</b></font></td><td style='width:30px' valign='top'><img src='/images/images/close.gif' ></img></td></tr></table>";
      html += "</td><td></td></tr>";
      html += "<tr><td></td><td style='height:100px;'><iframe id='dialog1' frameborder=0 style='width:"+titlewidth+"px;height:" + iframe_height + "px' src='"+url+"'></iframe></td><td></td></tr>";
      html += "<td></td><td></td><td></td>";
      html += "</table>";
      subdiv.innerHTML = html;
    }
  }else{
    //解屏
    var lockdiv = document.getElementById("lockscreen");
    if (lockdiv!=null)
    {
      lockdiv.style.display = "none";
    }
    var subdiv = document.getElementById("subdialog");
    if (subdiv!=null)
    {
      subdiv.style.display = "none";
    }
  }
}
function UNLockScreen(){
  LockScreen(false);
}

If you don’t know what a lock screen is, you can go to 163 Mailbox to take a look. The purpose is to temporarily lock the screen to preserve your work space when you want to leave the screen for a period of time. If you bring it back, you can restore it to the original workspace by re-entering the password for verification.

Generally, the lock screen function is implemented by adding an opaque mask layer to the page, or using two areas to show and hide each other. It is very difficult to implement the lock screen function for a website built using a frame. Because divs cannot be used as layers on frame pages. Moreover, the framework does not support the display:none; attribute of css.

The final implementation method is to add another frame to FRAMESET. In the emergency state, the rows attribute of FRAMESET sets the height of the newly added frame to 0. When the lock screen button is clicked, the height of other frames in FRAMESET is set to 0, and the height of the new frame is set to *. In this way we have completed the frame replacement function. After unlocking, reset the rows attribute of FRAMESET to its initial value and the screen will return to its original state.

This doesn’t end there. If the user right-clicks on the screen to refresh, or presses the F5 key to refresh the page, the password verification function of the lock screen will be bypassed. This can be achieved by preventing the default implementation of F5 and the right mouse button.

//阻止F5或者鼠标右键刷新,使锁屏失效。
document.onkeydown = function(){
 if(event.keyCode==116) {
 event.keyCode=0;
 event.returnValue = false;
 }
}
document.oncontextmenu = function() {event.returnValue = false;}

Last called method:

Copy code The code is as follows:

LockScreen(true,'title',424,314,'http:// www.baidu.com');

I hope this article will be helpful to everyone’s JavaScript programming design.