window.location不会重定向到另一个html页面

时间:2017-05-17 14:29:38

标签: javascript html

我正在使用此登录页面: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> &nbsp; 
    			<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";
}

没有错误,但页面未被替换。 我将感谢你的帮助。 感谢

5 个答案:

答案 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> &nbsp;
        <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> &nbsp;
      <button type="" class="btn btn-info btn-lg">Register</button>
      </form>
    </div>
  </div>
</div>

或者,您可以将提交事件传递给登录功能并使用event.preventDefault来阻止表单提交;将表单操作设置为提交功能;或使用type="button"覆盖按钮的默认type="submit"(对于最后一个,请给@MikaelLennholm提示)。

正如在其他答案中详尽地说明的那样,无论你设置window.locationwindow.location.hrefwindow.location.replace()还是.assign()都没关系;他们中的任何一个都会奏效。

答案 3 :(得分:0)

您正在使用表单。所以你需要给出&#34; action&#34;。 它工作正常。检查我重新创建的codepen并正常工作。

codepen demo

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";
}