获取Chrome浏览器提示使用AJAX登录时保存密码 [英] Getting Chrome to prompt to save password when using AJAX to login
问题描述
的注：这个问题被严重从其原始版本进行编辑。这个问题已经大大简化。的
类似的问题已经被问过多次，以不同的形式 - 例如，
Similar questions have been asked several times before, in different forms - e.g.,
<一个href=\"http://stackoverflow.com/questions/2382329/how-can-i-get-browser-to-prompt-to-save-password\">How我可以让浏览器提示保存密码？
<一个href=\"http://stackoverflow.com/questions/2398763/how-does-browser-know-when-to-prompt-user-to-save-password\">How浏览器不知道什么时候提示用户保存密码？
然而，这个问题越来越在Chrome的功能的一个非常具体的方面，因此，在这方面是有很大不同。
However, this question is getting at a very specific aspect of Chrome's functionality, so it is quite different in that regard.
的由过去的答案来看，似乎要获得的Chrome提示输入密码保存最好的方法是将表单提交到一个虚拟的iframe，而实际上是通过AJAX 的登录：的example 。这对我来说很有意义，所以我一直在摆弄现在周围的一些样本code几天。然而，Chrome的在这方面的行为没有任何意义了我。在所有。因此这个问题。
Judging by past answers, it appears that the best approach to getting Chrome to prompt for password saving is to submit the form to a dummy iframe, while actually logging in through AJAX: example. That makes sense to me and so I have been fiddling around with some sample code for a few days now. However, Chrome's behaviour in this regard DOES NOT make sense to me. At all. Hence the question.
出于某种原因，Chrome将不会提示您保存密码，如果提交到一个虚拟的iframe的形式为present中/右后的 onDomReady 的。
For some reason, Chrome will not prompt you to save your password if the form that submits to a dummy iframe is present during/right after onDomReady.
一个的jsfiddle可以在这里找到 ，但它是没有多大用处，因为的您必须创建 dummy.html 在当地看到的行为说明的。因此，要看到这一点的最好办法是完整的HTML复制到自己的 index.html的，然后创建一个 dummy.html 文件了。
A jsfiddle can be found here, but it's of little use because you must create dummy.html locally to see the behaviour described. So the best way to see this is to copy the full html into your own index.html and then create a dummy.html file too.
下面是完整的code为 index.html的。这三种方法都强调为（1），（2），（3）。只有（2）确保提示用户保存自己的密码，而事实上，（3）没有按' ŧ的工作是特别令人费解的我。
Here is the full code for index.html. The three approaches are highlighted as (1), (2), (3). Only (2) ensures that the user is prompted to save their password, and the fact that (3) doesn't work is particular perplexing to me.
<html>
<head>
<title>Chrome: Remember Password</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(function(){
function create_login_form()
{
$('#login_form').html(
"<input type='text' name='email'>" +
"<input type='password' name='password'>" +
"<input id='login-button' type='submit' value='Login'/>");
}
// (1) this does not work. chrome seems to require time after "onDomReady" to process
// the forms that are present on the page. if the form fields exist while that processing
// is going on, they will not generate the "Save Password?" prompt.
//create_login_form();
// (2) This works. chrome has obviously finished its "work" on the form fields by now so
// we can add our content to the form and, upon submit, it will prompt "Save Password?"
setTimeout(create_login_form,500);
});
</script>
</head>
<body>
<!-- Our dummy iframe where the form submits to -->
<iframe src="dummy.html" name="dummy" style="display: none"></iframe>
<form action="" method="post" target="dummy" id="login_form">
<!-- (3) fails. form content cannot be present on pageload -->
<!--
<input type='text' name='email'>
<input type='password' name='password'>
<input id='login-button' type='submit' value='Login'/>
-->
</form>
</body>
</html>
如果任何人都可能可以解释这是怎么回事就在这里，我将不胜AP preciative。
If anyone could possibly explain what's going on here, I would be most appreciative.
的编辑：的注意，这个保存密码问题的Chrome已经延伸到人们AngularJS工作，也是由谷歌开发：的 Github上
Note that this "saving password issue" with Chrome has extended to people working with AngularJS, also developed by Google: Github
推荐答案
深入研究这个问题之后，这是我的最终报告：
After researching this issue thoroughly, here is my final report:
首先，问题突出的问题实际上是一个红鲱鱼。我被错误地提交表单到 IFRAME （其中附庸风雅突出 - 但我没有连接点）。我对这个问题的方法是基于这个例子，其中一些其他相关的答案也引用。正确的做法可以在这里看到 。基本上，动作的表格应设置为的src 的 IFRAME （这正是@arty建议）。
First, the problem highlighted in the question was actually a red herring. I was incorrectly submitting the form to an iframe (which arty highlighted - but I didn't connect the dots). My approach to this issue was based on this example, which some of the other, related answers also referenced. The correct approach can be seen here. Basically, the action of the form should be set to the src of the iframe (which is exactly what @arty suggested).
当你这样做，具体的问题强调了这个问题就会消失，因为页面是不是在所有重载（这是有道理的 - 为什么要重新加载页面时，您要提交给 IFRAME ？应该不会，这应该可以告诉我）。总之，因为页面不会重新加载，Chrome绝不会询问您是否保存密码，无论你等多长时间后显示的形式 onDomReady 。
When you do that, the particular problem highlighted in the question goes away because the page is not reloaded at all (which makes sense - why should the page reload when you're submitting to an iframe? It shouldn't, which should have tipped me off). Anyhow, because the page does not reload, Chrome never asks you to save your password, no matter how long you wait to display the form after onDomReady.
因此，提交给 IFRAME （正确）绝不会导致Chrome浏览器要求您保存您的密码。 Chrome将只有这样做，如果包含表单重新加载页面（注：违背放在这里旧帖子，Chrome浏览器会提示您保存您的密码，如果形式动态创建的）。
Accordingly, submitting to an iframe (properly) will NEVER result in Chrome asking you to save your password. Chrome will only do so if the page that contains the form reloads (note: contrary to older posts on here, Chrome WILL ask you to save your password if the form was dynamically created).
所以，唯一的解决办法是在提交表单时强制重新加载页面。但是，我们如何做到这一点，让我们的AJAX / SPA结构不变？这里是我的解决方案：
And so, the only solution is to force a page reload when the form is submitted. But how do we do that AND keep our AJAX/SPA structure intact? Here is my solution:
（1）除以SPA分为两部分：（1）对于非登录用户，（2）登录用户。这可能不是可行的为那些与更大的网站。 我不认为这是一个永久的解决办法 - 请，铬，请...修复这个bug
(1) Divide the SPA into two pieces: (1) For non-logged in users, (2) For logged-in users. This might not be doable for those with bigger sites. And I don't consider this a permanent solution - please, Chrome, please... fix this bug.
（2）我抓住我的形式两个事件： onClickSaveButton 和 onFormSubmit 。对于登录表单，特别是我抢 onClickSaveButton 用户详细信息，使AJAX调用，以验证他们的信息。如果该信息通过，然后我手动调用 formName.submit（）在 onFormSubmit ，我保证形式不前 onClickSaveButton 提交被调用。
(2) I capture two events on my forms: onClickSaveButton and onFormSubmit. For the login form, in particular, I grab the user details on onClickSaveButton and make an AJAX call to verify their information. If that information passes, then I manually call formName.submit() In onFormSubmit, I ensure that the form is not submitted before onClickSaveButton is called.
（3）的形式提交到，简单地重定向到一个PHP文件中的的index.php 文件
(3) The form submits to a PHP file that simply redirects to the index.php file
有两个优点这种方式：
（1）适用于Chrome。
(1) It works on Chrome.
（2）在Firefox中，用户现在只要求保存自己的密码，如果他们成功登录（我个人一直认为它讨厌被问是否保存我的PWD当它是错误的）。
(2) On Firefox, the user is now only asked to save their password if they have successfully logged in (personally I've always found it annoying to be asked to save my pwd when it was wrong).
下面是相关code（简体）：
Here is the relevant code (simplified):
的index.php
<html>
<head>
<title>Chrome: Remember Password</title>
<!-- dependencies -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
<script type="text/javascript" src="http://backbonejs.org/backbone.js"></script>
<!-- app code -->
<script type="text/javascript" src="mycode.js"></script>
<script>
$(function(){
createForm();
});
</script>
</head>
<body>
<div id='header'>
<h1>Welcome to my page!</h1>
</div>
<div id='content'>
<div id='form'>
</div>
</div>
</body>
</html>
我的code.JS
function createForm() {
VLoginForm = Backbone.View.extend({
allowDefaultSubmit : true,
// UI events from the HTML created by this view
events : {
"click button[name=login]" : "onClickLogin",
"submit form" : "onFormSubmit"
},
initialize : function() {
this.verified = false;
// this would be in a template
this.html = "<form method='post' action='dummy.php'><p><label for='email'>Email</label><input type='text' name='email'></p><p><label for='password'>Password<input type='password' name='password'></p><button name='login'>Login</button></form>";
},
render : function() {
this.$el.html(this.html);
return this;
},
onClickLogin : function(event) {
// verify the data with an AJAX call (not included)
if ( verifiedWithAJAX ) {
this.verified = true;
this.$("form").submit();
}
else {
// not verified, output a message
}
// we may have been called manually, so double check
// that we have an event to stop.
if ( event ) {
event.preventDefault();
event.stopPropagation();
}
},
onFormSubmit : function(event) {
if ( !this.verified ) {
event.preventDefault();
event.stopPropagation();
this.onClickLogin();
}
else if ( this.allowDefaultSubmit ) {
// submits the form as per default
}
else {
// do your own thing...
event.preventDefault();
event.stopPropagation();
}
}
});
var form = new VLoginForm();
$("#form").html(form.render().$el);
}
DUMMY.PHP
<?php
header("Location: index.php");
?>
编辑：按mkurz答案看起来很有希望。也许是修正错误。
The answer by mkurz looks promising. Perhaps the bugs are fixed.
这篇关于获取Chrome浏览器提示使用AJAX登录时保存密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
