如何触发浏览器中保存的密码自动填充?
我有一个用纯 JavaScript 编写的 Web 应用程序(除了加载所有 JS 文件的文档之外,没有预先生成的 HTML)。
该应用程序包含一个登录表单,该登录表单是在触发 document.ready 事件时动态创建的。我欺骗浏览器显示“记住密码?”在使用 ajax 登录之前,通过将登录表单发布到隐藏的 iframe 中来实现对话框(在 Firefox 中,密码出现在保存的密码列表中,因此这部分显然有效),但在稍后再次加载登录屏幕后,保存的密码永远不会被填写时间。同样的事情也发生在 Firefox 和 Safari 中。
我可以做些什么或者可以调用一些函数来触发自动填充吗?
更新:自动填充在初始页面加载时在 Safari 中起作用,但在用户注销并且在不重新加载页面的情况下重新创建登录表单时不起作用。在 Firefox 中它永远不起作用。
I have a web application written in pure JavaScript (no pre-generated HTML except for the document which loads all the JS files).
This app contains a login form which is created dynamically when the document.ready event event is triggered. I trick the browser into displaying the "Remember password?" dialog by posting the login form into a hidden iframe before logging in using ajax (in Firefox the password appears on the saved password list, so this part obviously works) but saved passwords never get filled in after the login screen is loaded again at a later time. The same thing happens in Firefox and Safari.
Is there something I can do or some function I can call to trigger autofill?
UPDATE: autofill works in Safari on initial page load, but not when user logs out and the login form is recreated without a page reload. In Firefox it never works.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
除了将表单元素包装在
form
元素中之外,还要确保所有输入(甚至可能是表单)都具有唯一的name
和id
不改变的属性。该名称可能应该是描述性的内容,例如密码等的password
,不太确定浏览器在多大程度上使用此信息,但如果您使用标准名称。当然,您应该确保没有将任何自动建议/自动填充属性设置为 false(如果您使用任何自动建议/自动填充属性,js 框架可能会出于某种原因这样做)。
第三种可能性是,某些浏览器可能会在脚本加载并将表单写入页面之前自动填充,尝试制作表单的静态 html 版本,看看是否有效。
最简单的解决方案(如果静态表单有效)是在注销时强制重新加载页面(无论如何,您可能确实希望在注销后丢弃正在运行的 javascript 的“状态”,因此刷新确实是一件好事)
In addition to wrap the form elements in a
form
element, make sure all the input (and maybe even the form) has uniquename
andid
attributes that doesn't change. The name should probably be something descriptive likepassword
for the password etc., not really sure to which degree browsers use this info, but "autosuggest"/"magic wand" features may work better if you use a standard name.And of course you should make sure you're not setting any autosuggest/autofill attributes to false (the js framework might do so for some reason, if you're using any).
A third possibility is that some browsers maybe does autofill before your script loads and writes the form to the page, try making a static html version of the form and see if that works.
The easiest solution (if static forms work) is to force a page reload on logout (you probably do want to discard the "state" of the running javascript after log-out anyway, so refreshing is really a Good Thing)
某些浏览器需要“form”标签才能启用本地用户名和密码密码存储。在 AJAX 应用程序中也有同样的问题,就我而言,我只是添加了
标签。
Some browsers require "form" tag to enable local username & password storage. Had the same problem in AJAX application, and in my case I just added
tags.
难道你不能使用类似的技巧 - 使用 iframe 加载表单,然后在提交登录表单时,实际上,提交 iframe 表单,其中将包含保存的密码。
为了让“密码”出现在可见表单中,我认为您可以测量 iframe 表单中密码的长度,然后用相同数量的 * 填充可见表单的密码字段。
Can't you use a similar trick - use an iframe to load the form and then when the login form is submitted you, in reality, submit the iframe form , which will contain the saved password.
To get the 'password' to appear in the visible form I think you could measure the length of the password in the iframe form and then fill the visible form's password field with the same number of *.