当用户通过iframe格式登录时如何更改登录按钮以注销 [英] How to change the login button to logout when user loggs in via iframe form

问题描述

我一直无法找到足够接近的答案来寻找解决方案。

我在一个自定义网站上工作，并在各种点，在用户可以继续操作之前检查用户登录状态。如果他们没有登录，他们会被要求先登录，然后允许他们继续。为了保持用户体验的清洁，大部分操作都是通过包含iframe的页面内弹出窗口完成的。

登录功能完美运行，但是当用户完成操作并关闭窗口时，登录按钮仍然显示，看起来他们有没有登录。他们实际上必须刷新页面才能看到他们的登录状态。然而，我更希望登录状态也显示为无缝。

目前，我在父页面的div中包含登录链接：

 < div class =top_nav> 
< div class =contest_buttons> 
< div class =c_button bkg_gray c_bottom w_quarterid =＃login_tab> 
<？php echo showif（！empty（$ _ SESSION ['userID']），'
< a href =enter.php？go = logout>注销< / a>' ，'
 < / div> 
< div class =c_button bkg_gray c_bottom w_quarterid =＃profile_tab> 
<？php echo showif（！empty（$ _ SESSION ['userID']），'
< a href =profile.php>我的个人资料< / 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> 
  

最接近我可以使用的任何东西是：

  $（'＃login_tab'，window.parent.document）.html（'< a href =enter.php？go = logout>注销< / A>'）; 
  

我不确定该从哪里出发。

至少，我希望 #login_tab 在登录完成时读取注销，但可以更新 #profile_tab 阅读My Profile也很棒。

我是一个PHP程序员，只是在JS和jQuery中进行游戏远，所以即使指引我在正确的方向可能会有所帮助。 ：）

---

我发现了一些显示出某种承诺的东西。它不像我想的那么干净，但是这段代码好像可能会有解决方案......

 <脚本类型=text / javascriptcharset =utf-8> 
 $（document）.ready（function（）{
 $（a [rel ^ ='prettyPhoto']）。prettyPhoto（
 {
 callback：function（） {
 document.location.reload（true）; 
} 
}）
}）; 
< / script> 
  

因为我使用PrettyPhoto来创建弹出框和iframe，所以我可能会整合一种方法或调用另一个脚本来处理我的需求，并在用户关闭该窗口时发生。

以这种方式创建某些内容需要做什么？

解决方案

您可以通过多种方式来完成此项任务。 可以在iframe中的页面上有登录按钮？

或者您可以在php vars中为2个按钮创建html，并通过所述按钮链接调用。 ？

然而，我会尝试使用JS& CSS，看看这个简单的按钮状态切换示例。
http://css-tricks.com/swapping- out-text-five-different-ways /

阅读最新的评论后，Maybe可以尝试根据会话状态创建登录按钮。

例如：

pre $ if（！isset（$ _ SESSION））{
// echo登录链接这里
}


也不要忘记使用 p>

  session_start（）; 
  

显示在iframe中。

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?

解决方案

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.

这篇关于当用户通过iframe格式登录时如何更改登录按钮以注销的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！