jquerymobile - Chrome 不会在标准 POST 提交时提示保存密码

Question

Chrome 提示保存密码的时间似乎不一致。考虑我网站上的以下两个过程...

1. 转到主页

2. 单击登录（这会将您带到 Login.php）

3. 输入登录名/密码

4. 您现在已登录，但 Chrome 没有提示您保存密码

不过……

1. 转到主页

2. 点击登录

3. 刷新页面

4. 输入登录名/密码

5. 您现在已登录，Chrome 确实提示保存密码...

什么给了？唯一的区别是点击“刷新”。 Login.php 的代码非常非常简单...本质上是：

<form id="LoginForm1" action="Login.php" method="POST">
  <input type="text" name="UserName" />
  <input type="password" name="Password" />
  <input type="submit" value="Login" />
</form>

主页上有 javascript（jquery-1.7.2 和 jquery.mobile-1.3.0），但 Login.php 上没有。不过，它似乎继续存在，因为 Login.php 上的表单样式在刷新之前看起来像 jquerymobile。谁能解释这种行为？ （此外，为什么 jquery/jquerymobile 会禁止保存密码功能？）

在此先感谢...这是我提出的第一个问题。

Answer 1

简答

从我的主页到 Login.php 的链接需要 data-ajax="false" 在 a href 标记中。

在我将 jquery-mobile 重新包含到 Login.php 后，Login.php 上的 form 标签也需要 data-ajax="false"。

 

长答案

第 1 部分

经过更多挖掘，我发现 jquery-mobile is to "hijack" all a href links and process them through its ajax functionality 的正常行为。这意味着它以 ajax 风格的传输方式传输到 Login.php，而不是标准的 a href 传输。标准传输会检查 Login.php 是否有其明确声明的 javascript 包含文件，但通过 javascript 包含的 ajax 传输来自主页。

但是...当您强制浏览器仅查看 Login.php（通过单击刷新）时，它发现没有任何 javascript 包含，因此 Chrome 浏览了裸页面并对其进行了正确处理。

 

第 2 部分

您必须满足几个要求，Chrome 才会提示保存密码。其中包括：

1. 你必须使用 form 元素

2. 您必须使用提交，而不是按钮

3. 提交必须是真实的提交。 （如果您使用一些 javascript/Ajax 覆盖提交功能......它（可能）不会提示保存密码。）

4. 页面加载时表单必须可见。

    

在使用 jquery-mobile 时，3 和 4 可能会绊倒你。

 

关于 3...

jquery-mobile 自动劫持表单提交过程，就像它处理链接的方式...所以有必要将 data-ajax="false" 添加到 form > 元素来防止它这样做。

 

关于 4...

我网站的第一个版本在主页上有一个登录 panel，登录按钮从页面“下方”显示面板。在我强制面板to be visible on page load 之前，此方法不会提示输入密码。

由于我不希望登录面板始终在主页上可见，因此我决定使用单独的登录页面 (Login.php)。然而，jquery-mobile 处理指向单独页面的链接的固有方法是使用其 ajax 功能来劫持它们……浏览器将其解释为停留在同一页面上。因此，对于 Chrome，导航到 Login.php 与使用隐藏面板相同......因为 Chrome 将这两个请求都解释为停留在主页上......在任何一种情况下，最初加载页面时表单元素都不可见.