从iframe中的页面打开链接作为普通页面

Question

Good morning,

Recently I was playing around trying to build a simple chat room for educational reasons. On my login/register/welcome screen I have a button that opens a login.php file on an iframe so that you can login. If you put the correct username and password stored in a database it redirects you to the ./chat/index.php page (the main chat room page). The problem is that this page opens inside the iframe. Is there a way to make it open on the same window as a normal page like how a simple button link would do.

This is my code on the main page:

<div id="login" class="menu">
<h4>I have an account :)</h4>
<form method="get" action="./login" target="loginFrame">
    <button type="submit" onclick="showLoginFrame">Please let me in so I can talk with my friends!</button>
</form>
<iframe id="loginIframe" name="loginFrame" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript">  
  function showLoginFrame() {  
    var iframe1 = document.getElementById("loginIframe");  
    iframe1.style.visibility="visible";
  }
</script>

And this is the part of the code on the login php page (the one that does all the work with the db) that redirects to the chat page:

if($user == $dbusername && $pass == $dbpassword)
   {
    session_start();
     $_SESSION['sess_user']=$user;
/* Redirect browser */
    header("Location: ../chat/");
   }
} else {
    echo "Invalid username or password!<br><br>";
}

Answer 1

While I agree with @Ofir Baruch you should consider a dialog instead, placing the below javascript on your ./chat/index.php should bust it out of the frame.

if (top.location!= self.location) {
   top.location = self.location.href;
}

In the event this does not work for you there are two other solutions here:

https://css-tricks.com/snippets/javascript/break-out-of-iframe/