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 操作可以完美工作，但作为 onsubmit 操作则失败，因此我非常确定这与 JavaScript 处理 onsubmit 操作的方式有关。

我被困住了，所以我非常感谢你帮助我弄清楚如何更改 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;
}