js-Implementierung einer einfachen Sperrbildschirmfunktion example_javascript skills

Das Beispiel in diesem Artikel beschreibt, wie eine einfache Sperrbildschirmfunktion in js implementiert wird. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

//********* 锁屏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'  alt="js-Implementierung einer einfachen Sperrbildschirmfunktion example_javascript skills" ></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);
}

Wenn Sie nicht wissen, was ein Sperrbildschirm ist, können Sie einen Blick auf 163 Mailbox werfen. Der Zweck besteht darin, den Bildschirm vorübergehend zu sperren, um Ihren Arbeitsbereich zu schützen, wenn Sie den Bildschirm für einen bestimmten Zeitraum verlassen möchten Zeit. Wenn Sie es zurückbringen, können Sie es im ursprünglichen Arbeitsbereich wiederherstellen, indem Sie das Passwort zur Überprüfung erneut eingeben.

Im Allgemeinen wird die Sperrbildschirmfunktion durch Hinzufügen einer undurchsichtigen Maskenebene zur Seite oder durch die Verwendung zweier Bereiche zum gegenseitigen Ein- und Ausblenden implementiert. Es ist sehr schwierig, die Sperrbildschirmfunktion für eine Website zu implementieren, die mit einem Frame erstellt wurde. Weil Divs nicht als Ebenen auf Frame-Seiten verwendet werden können. Darüber hinaus unterstützt das Framework das display:none;-Attribut von CSS nicht.

Die letzte Implementierungsmethode besteht darin, FRAMESET einen weiteren Frame hinzuzufügen. Im Notfallzustand setzt das rows-Attribut von FRAMESET die Höhe des neu hinzugefügten Frames auf 0. Wenn auf die Schaltfläche „Bildschirm sperren“ geklickt wird, wird die Höhe der anderen Frames in FRAMESET auf 0 und die Höhe des neuen Frames auf * gesetzt. Auf diese Weise haben wir die Funktion zum Ersetzen des Rahmens abgeschlossen. Setzen Sie nach dem Entsperren das Zeilenattribut von FRAMESET auf seinen Anfangswert zurück und der Bildschirm kehrt in seinen ursprünglichen Zustand zurück.

Das ist noch nicht alles. Wenn der Benutzer mit der rechten Maustaste auf den Bildschirm klickt, um ihn zu aktualisieren, oder die Taste F5 drückt, um die Seite zu aktualisieren, wird die Passwortüberprüfungsfunktion des Sperrbildschirms umgangen. Dies kann erreicht werden, indem die Standardimplementierung von F5 und der rechten Maustaste verhindert wird.

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

Zuletzt aufgerufene Methode:

Code kopieren Der Code lautet wie folgt:

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.