How to change the login button to logout when user loggs in via iframe form

问题

I have not been able to find a close enough answer to this question to find a solution that works.

I am working in a custom website, and at various points, the user login status is checked before the user can proceed with the action. If they are not logged in, they are asked to login first, and then they are allowed to proceed. To keep the user experience clean, most of this is done through in-page pop-ups that contain an iframe.

The login functionality is working perfectly, but when the user is done with the action and closes the window, the "login" button still shows, making it appear that they have not logged in. They actually have to refresh the page to see their login status. I would prefer, however, that the login status to appear seamless as well.

Currently, I have the login link contained in a div in the parent page:

<div class="top_nav">
    <div class="contest_buttons">
        <div class="c_button bkg_gray c_bottom w_quarter" id="#login_tab">
            <?php echo showif(!empty($_SESSION['userID']),'
                <a href="enter.php?go=logout">Logout</a>','
                <a href="enter.php?go=login&iframe=true&amp;width=450&amp;height=275" rel="prettyPhoto[iframe]">Login</a>'); ?>
        </div>
        <div class="c_button bkg_gray c_bottom w_quarter" id="#profile_tab">
            <?php echo showif(!empty($_SESSION['userID']),'
                <a href="profile.php">My Profile</a>','
                <a href="enter.php?go=register&iframe=true&amp;width=550&amp;height=450" rel="prettyPhoto[iframe]">Register</a>'); ?>
        </div>
        <div class="c_button bkg_gray c_bottom w_half">
            <a href="http://waynedailynews.com/" target="_blank">Wayne Daily News</a>
        </div>
    </div>
</div>

The closest I have gotten to anything that could work is:

$('#login_tab', window.parent.document).html('<a href="enter.php?go=logout">Logout</a>');

I'm not really sure where to go from there.

At the least, I want the #login_tab to read "Logout" when login has completed, but being able to update the #profile_tab to read "My Profile" would be great as well.

I am a PHP programmer that is just dabbling in JS and jQuery so far, so even pointing me in the right direction might be helpful. :)

I found something that shows some promise. It's not as clean as I would like, but this code seems like it might hold a solution...

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto(
    {
     callback: function(){
       document.location.reload(true);
    }                       
   })
});
</script>

Because I am using PrettyPhoto to create the popups and iframes, I may be able to integrate a method or call another script that would handle my needs and it would occur on the event that the window is closed by the user.

What would it take to make something work this way?

回答1:

There are many ways you could accomplish this.

You could have the login button on the page(s) inside iframe.?

or You could create the html for the 2 buttons inside php vars and call through said button links.?

However I would try using JS & CSS, check out this simple example of Button state switching. http://css-tricks.com/swapping-out-text-five-different-ways/

After reading your latest comments, Maybe try to create login buttons depending on session state.

eg:

        if( !isset($_SESSION) ){
           //echo login links here
        }

also don't forget to use

session_start();

in the page shown in iframe.

来源：https://stackoverflow.com/questions/27512968/how-to-change-the-login-button-to-logout-when-user-loggs-in-via-iframe-form

标签

javascript

php

jquery

html

iframe