Uzyskanie Chrome do monitowania o zapisanie hasła podczas używania AJAX do logowania

UWAGA: To pytanie było mocno edytowane z oryginalnej wersji. Problem został znacznie uproszczony.

Podobne pytania zadawano już kilka razy, w różnych formach - np.

Jak mogę poprosić przeglądarkę o monit o zapisanie hasła?

W jaki sposób przeglądarka wie, kiedy poprosić użytkownika o zapisanie hasła?

To pytanie ma jednak bardzo specyficzny aspekt funkcjonalności Chrome, więc pod tym względem jest zupełnie inny.

Sądząc po wcześniejszych odpowiedziach, wygląda na to, że najlepszym sposobem na wyświetlenie Chrome z prośbą o zapisanie hasła jest przesłanie formularza do fałszywej ramki iframe, podczas gdy faktycznie logujesz się przez AJAX: przykład. To ma dla mnie sens, więc przez kilka dni bawiłem się kodem przykładowym. Jednak zachowanie Chrome w tym zakresie NIE ma dla mnie sensu. W ogóle. Stąd pytanie.

Z jakiegoś powodu Chrome nie poprosi Cię o zapisanie hasła, jeśli formularz przesłany do fikcyjnej ramki iframe jest obecny podczas / tuż poonDomReady.

Można znaleźć jsfiddletutaj, ale jest mało użyteczny, ponieważmusisz stworzyćdummy.html lokalnie, aby zobaczyć opisane zachowanie. Najlepszym sposobem na to jest skopiowanie pełnego html do własnegoindex.html a następnie utwórzdummy.html plik też.

Oto pełny kod dlaindex.html. Trzy podejścia są wyróżnione jako(1), (2), (3). Tylko(2) zapewnia, że ​​użytkownik zostanie poproszony o zapisanie hasła i tego, że(3) nie działa, jest to dla mnie szczególnie kłopotliwe.

<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>

Gdyby ktoś mógł wyjaśnić, co tu się dzieje, byłbym bardzo wdzięczny.

EDYTOWAĆ: Zwróć uwagę, że ten „problem z zapisywaniem hasła” w Chrome rozszerzył się na ludzi pracujących z AngularJS, również opracowanych przez Google:Github

questionAnswers(4)

yourAnswerToTheQuestion