如何从gmail/fb登录表格中知道该用户已成功登录，同时使用gmail/fb登录？
轨道4 + Twitter的引导+的jquery +的JavaScript + Ominiauth如何从gmail/fb登录表格中知道该用户已成功登录，同时使用gmail/fb登录？
_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）有两个选项将在那里为谷歌（图片LOGO）和Facebook（图片LOGO）标志英寸
4）时，你会点击任何一个（假设谷歌图片意味着Gmail帐户登录）然后一个窗口将打开与Gmail登录表单。
5）在那里我将输入登录详细信息，然后成功登录后应该发生什么子窗口应该重新加载父窗口。 成功登录后发生了什么只有子窗口正在重新加载并在子窗口中成功登录。
我的问题如何从gmail/fb登录表单中知道该用户已成功登录？
如何从子窗口重新加载父窗口？
提供孩子和家长都是一样的起源之内，那么在孩子的代码，你可以这样做：
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>
@ TJ Crowder我没有得到这个“孩子和父母都在同一起源”，你可以解释plz .. – user3676578
@ user3676578：For web页面，“origin”是协议，主机和端口的组合，因此'http：// www.example.com/foo.html'使用'http'，'www.example.com'和'80' （默认的HTTP端口），为了让父窗口和子窗口直接对话（'opener.location.reload（）'），这两个页面必须来自同一个源，所以'http：//www.example .com/foo.html'可以直接与'http：// www.example.com/bar.html'对话，但不能与'http：// en.example.com/bar.html'（因为'en。 example.com'与“www.example.com”不是同一个主机）协议或端口也使其成为“交叉来源”。 –
@ T.J. Crowder在我的代码中，我如何添加这个相同的原点策略？你能解释一下吗... – user3676578
是你的问题你的标题（*“如何重新从子窗口的父窗口？“*）或者你最后称之为你的问题（*”我怎么能从gmail/fb登录表单中知道该用户已经成功登录？“）*这些都不是同一个问题 –
谢谢你告诉我的错误.... :) – user3676578
Drat，我回答了错误的问题。:-) –