1

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

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

我想我的问题是，有没有办法让它在 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>
4

1 回答 1

0

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

首先，将登录表单的副本添加到实际文档中，而不是 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 版本中完美运行，并且不会干扰自行运行的浏览器。

于 2013-10-03T18:57:12.750 回答