登录表单自动填充，在iframe中，在Android浏览器中不起作用

Login form autofill, in an iframe, in the android browser does not work

本文关键字：Android 浏览器 不起作用 表单 iframe 填充 登录      更新时间：2023-09-26

我正在开发一个在单个文档中运行的网站（第一个文档之后没有加载真正的页面，它都是 ajax），您必须登录才能查看。首页的登录表单完全按照您的预期自动填充。

问题是当我在 iframe 中加载登录表单时。在大多数浏览器上，它会自动填充与首页相同的信息，并且运行良好。但是在安卓浏览器中，它根本不会自动填写表单。

我想我的问题是，有没有办法让它在 android 浏览器中正常运行，而不仅仅是在 html 中的服务器端自动填充它？

这是表单的 html：

<form method="POST" id="login_form" class="disable_on_submit">
    <input type="hidden" name="action" value="login" />
    <div class="row first">
        <label for="username">Email Address:</label>
        <input type="email" name="username" id="username" placeholder="Email Address..." />
    </div>
    <div class="row">
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" placeholder="Password..." />
    </div>
    <input type="submit" name="submit" id="submit" class="awesome" value="Login" />
</form>

所以，我找不到这个问题的直接解决方案，但我确实想出了一点技巧。

首先，将登录表单的副本添加到实际文档中，而不是 iframe：

this.fake_form = $('<form method="POST" id="login_form" autocomplete="on"><input type="email" name="username" id="username" /><input type="password" name="password" id="password" /></form>');
$(document.body).append(this.fake_form);
this.fake_form.hide();

然后，您轮询虚假表单以获取自动填充的数据。由于它是隐藏的，您知道用户没有输入任何内容。

function check_fake_form()
{
    var real_form = this.iframe.contents().find('body #whiteboard');
    var real_u = real_form.find('#username');
    var real_p = real_form.find('#password');
    //if the real form has any values, we're done
    if (real_u.val().trim() != '' || real_p.val().trim()) {
        return;
    }
    var fake_u = this.fake_form.find('#username').val().trim();
    var fake_p = this.fake_form.find('#password').val().trim();
    //if the fake form has values, put them in the real form and quit
    if (fake_u != '' || fake_p != '') {
        real_u.val(fake_u);
        real_p.val(fake_p);
        return;
    }
    //check again in a short time
    setTimeout(check_fake_form, 50);
}

这似乎在无法正常工作的 android 版本中完美运行，并且不会干扰自行运行的浏览器。

相关文章：