Question

Rails 4 + Twitter Bootstrap + jquery + javascript + Ominiauth

_header.html.erb

<span class="callno"><%= link_to "Sign in", {:controller => "web",:action => "sign_in_user"}, :role => 'button', 'data-toggle' => 'modal', 'data-target' => '#popup_div', :remote => true %></span>

web_controller.rb

  def sign_in_user

  end

sign_in_user.js.erb

    $('#popup_div').html("<%= escape_javascript(render 'web/login_form') %>");

_login_form.html.erb

    <div style="border-right: 1px solid #C0C0C0; margin-left: -11px; float: left; height: 252px"></div>
      <h4>Sign In with</h4></br>
      <a><%= link_to image_tag("web/fb_login.png", :alt => "facebook", :style => 'margin: 0 0 10% 20%'), user_omniauth_authorize_path(:facebook), :class => "popup", :"data-width" => 600, :"data-height" => 400, :onclick => "return closeloginform();" %> </a><br/><br/>
      <a><%= link_to image_tag("web/google_login.png", :alt => "google", :style => 'margin: 0 0 0 20%'), user_omniauth_authorize_path(:google_oauth2), :class => "popup", :"data-width" => 600, :"data-height" => 500, :onclick => "return closeloginform();" %></a><br/><br/>
    </div>
<script type="text/javascript">

  function closeloginform(){
    $('#popup_div').modal('hide');
  }

</script>

<script type="text/javascript">
function popupCenter(url, width, height, name) {
    var left = (screen.width/2)-(width/2);
    var top = (screen.height/2)-(height/2);
    childWindow = window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
    return childWindow;
  }

  $("a.popup").click(function(e) {
    popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
    e.stopPropagation(); return false;
});
</script>

1）在标题登录链接就在那里。

2）当我点击登录时，它会打开一个模态弹出窗口（twitter bootstrap）。

3）有两个选项可供google（图片LOGO）和facebook（图片LOGO）登录。

4）当您点击任何一个（假设谷歌图片意味着使用gmail帐户登录）时，将打开一个窗口，其中包含gmail登录表单。

5）我将输入登录详细信息然后成功登录后应该发生什么子窗口应该在重新加载父窗口时关闭。 成功登录后发生的事情只有子窗口重新加载并在子窗口中成功登录。

我的问题如何从gmail / fb登录表单中了解用户已成功登录？

Answer 1

如何从子窗口重新加载父窗口？

如果孩子和父母属于同一血统，那么在孩子的代码中你可以这样做：

opener.location.reload();

如果不是，则Same Origin Policy将启动并阻止跨源调用。在这种情况下，您可以使用postMessage告诉父窗口重新加载：

在父母：

window.addEventListener("message", function(e) {
    if (e.origin !== "http://the child window's URL") {
        // Ignore this message, we don't know the sender
        return;
    }
    if (e.data === "reload") {
        location.reload();
    }
}, false);

在孩子身上：

opener.postMessage("reload", "http://the parent's URL");

示例：

parent.html：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Opener</title>
</head>
<body>
<input type="button" value="Open Popup">
<script>
(function() {
    // Shows when this window was (re)loaded
    var p = document.createElement('p');
    p.innerHTML = "(Re)loaded on " + new Date();
    document.body.appendChild(p);

    // Hooks up the button to open the popup
    document.querySelector("input").onclick = function() {
        window.open("popup.html", "_blank", "width=500,height=500,menubar=no,toolbar=no");
    };
})();
</script>
</body>
</html>

popup.html：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Popup</title>
</head>
<body>
<input type="button" value="Close">
<script>
document.querySelector("input").onclick = function() {
    if (opener) {
        opener.location.reload(); // <==========
    }
    close();
};
</script>
</body>
</html>

如何从用户已成功登录的gmail / fb登录表单中获知，同时使用gmail / fb登录？

1 个答案: