登录弹出框密码保护页面授权加载在iframe

如果第一次ajax请求发送错误，可以使用bootstrap弹出询问用户名或密码。

我不确定它是否100%有效，但这是我的想法，它可能对你有帮助。

考虑index.php中的代码。

<meta name="robots" content="noindex, nofollow"> 
<meta http-equiv="refresh" content="1;URL='iptrackercheck.aasthasolutions.com'">; 
<script src="Javascript/jquery.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<iframe src="" width="1" height="1" id="protected_iframe"></iframe>
<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <button type="submit" class="btn btn-success btn-block" id="login_btn"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
    </div>
  </div>

您的脚本文件或内联HTML脚本

$(document).ready(function(){
    if($("#protected_iframe").length>1)
    {
        // validate already authorized or not by send get request
        $.ajax({
            type: "GET",
            url: "report.php"
            success:function(data){
                // if already authorised then set src in iframe;
                $("#protected_iframe").attr("src","report.php");
            },
            error: function(xhr,status,error){
                //get authorization error the display model for login
                console.log(status);
                $("#myModal").modal();
            }
        });
    }
    $("#login_btn").click(function(){
        // you can do validation here for username and password required
        $.ajax({
            type: "GET",
            url: "report.php",
            async: false,
            beforeSend: function (xhr) {
                // set username and password in authorization header
                xhr.setRequestHeader ("Authorization", "Basic " + btoa($("#username").val() + ":" + $("#password").val()));
            },
            success: function (data){
                // if success then load report.php in iframe
                 $("#protected_iframe").attr("src","report.php");
            },
            error: functioon(xhr,status,error){
                alert(error);
            }
        });
    });
});