シンプルなロック画面関数のjs実装 example_javascriptスキル

この記事の例では、js で簡単なロック画面機能を実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

//********* 锁屏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);
}

ロック画面が何なのかわからない場合は、163 メールボックスにアクセスして確認してください。その目的は、一定期間画面から離れたいときに作業スペースを確保するために画面を一時的にロックすることです。時間。持ち帰った場合は、確認のためにパスワードを再入力することで元のワークスペースに復元できます。

一般に、ロック画面機能は、ページに不透明なマスク レイヤーを追加するか、2 つの領域を使用して相互に表示および非表示にすることによって実装されます。フレームを使って構築されたWebサイトにロック画面機能を実装するのは非常に困難です。 div はフレーム ページのレイヤーとして使用できないためです。さらに、フレームワークは css の display:none 属性をサポートしていません。

最後の実装方法は、FRAMESET に別のフレームを追加することです。緊急状態では、FRAMESET の rows 属性は、新しく追加されたフレームの高さを 0 に設定します。ロック画面ボタンをクリックすると、FRAMESET 内の他のフレームの高さが 0 に設定され、新しいフレームの高さが * に設定されます。これでフレーム交換機能が完成しました。ロック解除後、FRAMESETのrows属性を初期値に戻すと、画面は元の状態に戻ります。

これで終わりではありません。ユーザーが画面を右クリックしてページを更新するか、F5 キーを押してページを更新すると、ロック画面のパスワード検証機能がバイパスされます。これは、F5 キーとマウスの右ボタンのデフォルト実装を防止することで実現できます。

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

最後に呼び出されたメソッド:

コードをコピー コードは次のとおりです:

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

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。