我无法通过输入正确的凭据重定向到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>我猜您是在一个基于浏览器的IDE中测试这段代码的，该IDE中的页面正在运行https。这不起作用，因为你指向http://google.com而不是https://google.com-安全网站不喜欢在框架中托管不安全的网站。您可以在上面的代码中看到这一点，方法是运行代码片段并尝试在浏览器的开发工具打开的情况下登录。您将在控制台中看到关于"；混合内容"；表示此页面是通过HTTPS加载的，但请求了一个不安全的帧'http://google.com"。它将继续说，请求被阻止。
也就是说，简单地将其切换到https仍然不能完全起作用。登录后，该框架将转发到google.com，但google.com实际上不会加载，因为该网站被设置为不允许在框架中托管。这是为了防止用户界面补救攻击，如点击劫持，针对他们的网站。