如果我也提供了正确的密码，为什么我的页面没有重定向到 Google？请看我的代码

Question

我无法通过输入正确的凭据重定向到 google.com。请帮助我纠正我在 Javascript 中犯下的错误。请让我知道我在下面的代码中做错了什么：

var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");

function register(){
    x.style.left = "-400px";
    y.style.left = "50px";
    z.style.left = "110px";
}
function login(){
    x.style.left = "50px";
    y.style.left = "450px";
    z.style.left = "0";
}

var objPeople = [
    {
    username: "leelasaiprasad",
    password: "codify"
    },
    {
    username: "matt",
    password: "academy"
    },
    {
    username: "chris",
    password: "forever"
    }
]

function signin(){
    var username = document.getElementById("username").value
    var password = document.getElementById("password").value

    for(i=0; i< objPeople.length; i++) {
        if(username == objPeople[i].username && password == objPeople[i].password){
        console.log(username + "is logged in!!!")
        location.href = "http://google.com";
        return
        }
    }
alert("Incorret password")  
}

*{
    margin:0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}

.hero{
    height: 100%;
    width: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(blue.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
} 
#logo{
  position: relative;
}
#logo img{
  width: 150px;
  height: 80px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.login-box{
    width: 380px;
    height: 500px;
    position: relative;
    margin: 6% auto;
    top : 80px;
    background: #fff;
    padding: 5px;
    overflow: hidden;
}
.button-box{
    width:220px;
    margin: 35px auto;
    position: relative;
    box-shadow: 0 0 20px 9px #ff61241f;
    border-radius: 30px;
}
.toggle-btn{
    padding:10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}
#btn{
    top: 0;
    left: 0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: linear-gradient(to right,#105fff,#105fff);
    border-radius: 30px;
    transition: .5s;
}
.input-group{
    top: 150px;
    position: absolute;
    width: 280px;
    transistion: .5s;
}
.input-field{
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #999;
    outline: none;
    background: transparent;
}
.submit-btn{
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right,#105fff,#105fff);
    border: 0;
    outline: none;
    border-radius: 30px;
}
.chech-box{
    margin: 30px 10px 30px 0;
}
span{
    color: #777;
    font-size: 12px;
    bottom: 66px;
    position: absolute;
}
#login{
    left: 50px;
}
#register{
    left: 450px;
}

<html>
<head>
<title>Login Form</title>
<link rel ="stylesheet" href="style.css">
</head>
<body>


<div class="hero">
    <div id= "logo"><img src ="IBM.png"></div>
    <div class="login-box">
    <div class="button-box">
    <div id="btn"></div>
    <button type="button" class="toggle-btn" onclick="login()">Log In</button>
    <button type="button" class="toggle-btn" onclick="register()">Register</button>
    </div>
    <form id="login" class= "input-group">
    <input id="username" class="input-field" placeholder="User ID" required>
    <input id="password" class="input-field" placeholder="Enter Password" required>
    <input type="checkbox" class="chech-box"><span>Remember password</span>
    <button type="button" onclick="signin()" class="submit-btn">Log in</button>
    </form>
    <form id="register" class= "input-group">
    <input type="text" class="input-field" placeholder="User ID" required>
    <input type="text" class="input-field" placeholder="Enter Email-ID" required>
    <input type="text" class="input-field" placeholder="Password" required>
    <input type="checkbox" class="chech-box"><span>I agree to the terms and conditions</span>
    <button type="submit" class="submit-btn">Register</button>
    </form> 
    </div>
</div>
<script src="login.js"></script>
</body>
</html>

Answer 1

我猜您正在基于 IDE 的浏览器中测试此代码，其中页面为运行 https。这不会起作用，因为您指向 http://google.com instead of https://google.com - 安全网站不喜欢在框架中托管不安全的网站。您可以在上面的代码中看到这一点，方法是运行代码段并尝试在打开浏览器的开发人员工具的情况下登录。您将在控制台中看到一条关于“混合内容”的错误消息，指出此页面是通过 HTTPS 加载的，但请求了一个不安全的框架 'http://google.com'。它会继续说请求被阻止。

也就是说，简单地将其切换到 https 仍然不能完全奏效。该框架将在登录后转发到 google.com，但 google.com 不会实际加载，因为该站点设置为不允许托管在框架中。这是为了防止针对其网站的用户界面补救攻击，例如 click-jacking。

如果我也提供了正确的密码，为什么我的页面没有重定向到 Google？请看我的代码

Why my page is not redirecting to Google if I am giving correct password also? Please see my code

html

javascript

dom-events