使用reactjs和javascript - Chrome不提供记住密码

Question

嗨,我遇到了Chrome不提供记住用户ID和密码的错误.

我在下面的链接中尝试了解决方案,但我无法让它工作.有没有人为React解决了这个问题？ http://code.google.com/p/chromium/issues/detail?id=43219

我在上面的链接中实现了解决方案,但在使用react时没有做任何事情.

非常感谢!

所请求的示例代码: 原始解决方法在上面的链接中有所描述 - 我在此处包含:这是Chrome错误,这是推荐的解决方法:http: //code.google.com/p/chromium/issues/detail？ ID = 43219

作为评论#5的后续内容,以下是对我测试过的解决方法的更全面的解释.在您的登录页面上,包含一个包含两个输入元素的表单.将one的名称和id设置为"userid",将另一个的名称和id设置为"password".例如,

<input value type="text" id="userid" name="userid" autocomplete="on">
<input value type="password" id="password" name="password" autocomplete="on">

将表单POST操作提供给从同一域提供的空白html页面,例如blank.html.将onsubmit处理程序设置为JavaScript函数:

<form name="login" id="login" method="POST" action="blank.html" onsubmit="return do_login();">

在表单上方,包含一个隐藏的iframe元素,如下所示:

<iframe src="login.html" style="width:0px;height:0px;border:0px;" id="hidden" name="hidden">          </iframe>

login.html文件也必须从同一个域提供,并且它应包含与真实登录表单上相同的表单(相同的名称和ID,相同的操作和方法).在JavaScript do_login处理程序中,根据需要执行身份验证.要让Chrome提示用户存储密码,请让JavaScript代码将值从真实表单复制到隐藏表单,然后提交隐藏表单,如下所示:

var userid = document.getElementById("userid").value;
var password = document.getElementById("password").value; 
var iframe = document.getElementById("hidden");
var iframedoc = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;
var fake_login_form = iframedoc.getElementById("login");
var fake_userid = iframedoc.getElementById("userid");
fake_userid.value = userid;
fake_password.value = password;
fake_login_form.submit();

使用Chrome 10.0.648.204进行测试.

这是我为React所做的:

我创建了一个'空白表单'并配置了一个nginx规则:

包含一个呈现和隐藏​​的虚拟登录表单: 注意:我正在使用react-frame-component /***@jsx React.DOM*/

'use strict';

var React = require('react/addons');
var Frame = require('react-frame-component');
var Input = require('react-bootstrap/Input');


var DummyLoginForm = React.createClass({

    _onChange: function(){
        console.log('DummyLoginForm onChange called')
    },

    _onSubmit: function() {
        console.log('DummyLoginForm onsubmit called');

        var email = this.refs.userid.getValue();
        var password = this.refs.password.getValue();

        console.log(email);
        console.log(password);
    },

    render: function () {
        var content = ( 
        <div>
            <Frame id="hidden" width="0" height="0" name="hidden">
               <form role="form" name="dummylogin" id="dummylogin" ref="dummylogin" method="POST" action="/login/index.html" onsubmit="return _onSubmit();">
                    <input value type="text" id="userid" name="userid" ref="userid" autoComplete="on" onChange={this._onChange}/>
                    <input value type="password" id="password" name="password" autoComplete="on" onChange={this._onChange}/>
                </form>
            </Frame>
        </div>

        );

        return content;
    }

  /*jshint ignore:end */

});

module.exports = DummyLoginForm;

在真正的登录模式中,我这样做: 我正在使用react-bootstrap模式

onSubmit: function(e) {
    if(e && typeof e !== 'undefined') {
        e.stopPropagation();
        e.preventDefault();
        }
        var email = this.refs.email.getValue();
        var password = this.refs.password.getValue();

    MyUtils.login(email, password);

    // workaround to force chrome to prompt to save password details 
    if(BrowserUtils.isChrome()) {

        console.log("Chrome");

        var iframe = document.getElementById("hidden");
        var iframedoc = iframe.contentWindow ? iframe.contentWindow.document :  iframe.contentDocument;
        var fake_login_form = iframedoc.getElementById("dummylogin");
        var fake_userid = iframedoc.getElementById("userid");
        var fake_password = iframedoc.getElementById("password");
        fake_userid.value = email;
        fake_password.value = password;
        fake_login_form.submit();
    }

},

DummyLoginForm中的_onSubmit:function()不会被触发