我正在使用此登录页面:http://csshtmljs.com/bootstrap-snippets.php?code-snippets=904&q=Bootstrap+snippet+DeyNote+like+login。 我为登录和寄存器按钮编写了javascript函数,这些函数应该重定向到相应的页面,但它不起作用。 这是login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com @bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<!--
The codes are free, but we require linking to our web site.
Why to Link?
A true story: one girl didn't set a link and had no decent date for two years, and another guy set a link and got a top ranking in Google!
Where to Put the Link?
home, about, credits... or in a good page that you want
THANK YOU MY FRIEND!
-->
<title>DeyNote like login - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
margin-top:20px;
color:#fff;
}
.login-page {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #3ca2e0;
text-align: center;
color: #fff;
padding: 3em;
}
.user-avatar {
width: 125px;
height: 125px;
}
.login-page h1 {
font-weight: 300;
}
.login-page .form-content {
padding: 40px 0;
}
.login-page .form-content .input-underline {
background: 0 0;
border: none;
box-shadow: none;
border-bottom: 2px solid rgba(255,255,255,.4);
color: #FFF;
border-radius: 0;
}
.login-page .form-content .input-underline:focus {
border-bottom: 2px solid #fff;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 0;
}
.btn-info{
border-radius: 50px;
box-shadow: 0 0 0 2px rgba(255,255,255,.8)inset;
color: rgba(255,255,255,.8);
background: 0 0;
border-color: transparent;
font-weight: 400;
}
input[type='text']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder {
color: #fff;
}
input[type='text']:-moz-placeholder, input[type='password']:-moz-placeholder {
color: #fff;
}
input[type='text']::-moz-placeholder, input[type='password']::-moz-placeholder {
color: #fff;
}
input[type='text']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder {
color: #fff;
}
</style>
</head>
<body>
<div class="container bootstrap snippet">
<div class="row login-page">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<img src="http://ani-theme.strapui.com/images/flat-avatar.png" class="user-avatar">
<h1>Bootdey.com</h1>
<form role="form" class="ng-pristine ng-valid">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" placeholder="Password">
</div>
</div>
<button class="btn btn-info btn-lg" onclick="login()">
Log in
</button>
<button type="submit" class="btn btn-info btn-lg">Register</button>
</form>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="login.js">
</script>
</body>
</html>
login.js:
function login(){
window.location="createGame.html";
}
没有错误,但页面未被替换。 我将感谢你的帮助。 感谢
答案 0 :(得分:1)
//与HTTP重定向类似的行为
window.location.replace("http://stackoverflow.com");
//与点击链接相似的行为
window.location.href = "http://stackoverflow.com";
答案 1 :(得分:1)
这是因为您的按钮提交了表单,该表单取代了位置更改。
<button>
标记默认为type="submit"
,因此您可以通过在登录按钮上设置type="button"
来解决此问题,使其不再是提交按钮:
<button type="button" class="btn btn-info btn-lg" onclick="login()">
我假设您打算将表格提交给&#34;注册&#34;按钮(因为您在其上明确设置了type="submit"
)所以我不认为删除表单或将其action
设置到您的登录页面的建议是适合您的情况的解决方案。
答案 2 :(得分:0)
您的登录按钮隐式提交表单,如下面的简化示例所示。出于演示目的,我在表单中添加了“操作”,这会导致“提交”转到示例站点。请注意,这是 NOT 您正在尝试的重定向;我在这里改变了这个函数只包含一个console.log;它会触发,但随后表单提交接管。如果在原始代码中省略了表单操作,则页面“重定向”到空文档。
function login() {
// window.location="http://example.com"
console.log("redirect here");
}
<div class="container bootstrap snippet">
<div class="row login-page">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<form action="http://foo.com" role="form" class="ng-pristine ng-valid">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" placeholder="Password">
</div>
</div>
<button class="btn btn-info btn-lg" onclick="login()">
Log in
</button>
<button type="" class="btn btn-info btn-lg">Register</button>
</form>
</div>
</div>
</div>
删除<form>
标记是避免此问题的一种方法(如果您通过javascript处理所有表单操作,则<form>
是不必要的。)这里'login()'函数将执行重定向:
function login() {
console.log("redirect here. ");
window.location="http://example.com";
}
<div class="container bootstrap snippet">
<div class="row login-page">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div class="form-content">
<div class="form-group">
<input type="text" class="form-control input-underline input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-underline input-lg" placeholder="Password">
</div>
</div>
<button class="btn btn-info btn-lg" onclick="login()">
Log in
</button>
<button type="" class="btn btn-info btn-lg">Register</button>
</form>
</div>
</div>
</div>
或者,您可以将提交事件传递给登录功能并使用event.preventDefault
来阻止表单提交;将表单操作设置为提交功能;或使用type="button"
覆盖按钮的默认type="submit"
(对于最后一个,请给@MikaelLennholm提示)。
正如在其他答案中详尽地说明的那样,无论你设置window.location
,window.location.href
,window.location.replace()
还是.assign()
都没关系;他们中的任何一个都会奏效。
答案 3 :(得分:0)
您正在使用表单。所以你需要给出&#34; action&#34;。 它工作正常。检查我重新创建的codepen并正常工作。
UIImage *resultImage = [self drawText:@"ehliyetCepte is a best app in the AppStore" inImage:sharedImageView.image atPoint:CGPointMake(0, 0)];
答案 4 :(得分:-1)
尝试使用:
function login(){
window.location.href="createGame.html";
}