javascript - 在表单提交上调用 JS 函数

Question

我创建了一个 JS 函数，当它包含标准 HTML 链接标记的“onclick”操作时执行良好，如下所示:

<a href="#" onclick="return fb_CheckPermission('publish_stream');">test</a>

然而，我真正想使用此函数的地方是在表单的“onsubmit”操作上，但是当我按如下方式包含它时，该函数似乎不再执行:

<form action="page.pl" id="disable-submit" name="status-form" method="POST" onsubmit="return fb_CheckPermission('publish_stream');">

“fb_CheckPermission()”JS 函数的主要作用是使用 Facebook Connect 检查以确保用户已授予我们特定权限，如果没有，它会告诉 Facebook Connect 提示用户授予权限。这是 JS 函数的代码:

1. function fb_checkPermission(permission) {
2.  FB.ensureInit(function() {
3.      FB.Facebook.apiClient.users_hasAppPermission(permission, function (hasPermissions) {
4.          if(!hasPermissions){
5.              FB.Connect.showPermissionDialog(permission,function (status){
6.                  if(!status) {
7.                      if(permission == 'offline_access') {
8.                          // save session
9.                      }                       
10.                 }
11.             });
12.         }
13.     });
14. });
15.}

这段代码的作用如下:

Line 2: Make sure Facebook Connect JS library is loaded
Line 3: Checks to see if the current Facebook Connect user has granted a specific permission
Line 5: If the permission hasn't been granted then prompt the user with the permission dialog
Line 7: In the case of the 'offline_access' permission save the session key once granted

我试图实现的用户体验是，当用户提交表单时，我将检查他们是否已授予特定权限，如果没有，则在提交表单之前提示他们获得权限。如果用户已经授予权限，则表单应该提交。对于那些收到提示的用户，应该在他们选择授予权限或拒绝请求后提交表单，我相信 fb_checkPermission() JS 函数现在正在正确处理。我不确定它在提交表单时的工作方式是否存在某种 JavaScript 问题。

正如我提到的，这个 JS 函数作为 onclick Action 完美运行，但作为 onsubmit Action 失败，所以我很确定这与 JavaScript 如何处理 onsubmit Action 有关。

我被卡住了，所以非常感谢您帮助我弄清楚如何更改 JS 函数以产生我想要的用户体验。预先感谢您的帮助!

Answer 1

您的“点击 anchor ”起作用的原因是它不会在所有 Facebook 异步调用完成时更改您的页面(位置)。

当您将相同的函数附加到提交处理程序时，该函数会在 Facebook 内容实际执行之前返回，并且不会返回“false”，导致表单比您希望的更早继续提交。

您需要做的是在 onSubmit 函数结束时返回“false”以阻止提交并给 Facebook 内容留出时间完成，然后通过调用在您希望提交的地方手动提交表单:

document.getElementById('disable-submit').submit();

(如果从脚本触发提交，则不会调用处理程序。)

不幸的是，我手边没有 Facebook SDK，所以我无法编写我确信 100% 有效的代码，但它是沿着这些方向的:

function onSubmit () {
    doStuffAsynchronously(function () {
        if (everythingIsOK) {
            // proceed with submission
            document.getElementById('formId').submit();
        }
    });

    return false;
}