如何在 window.fbAsyncInit 中调用 js 函数

Question

我正在开发 Facebook 应用程序。我有以下代码，如果我像这样运行它，它可以正常工作

  <div id="fb-root"></div>
       <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>, 
          status  : true, 
          cookie  : true, 
          xfbml   : true 

        );



          $('#stgame').click(sendRequest);
    function sendRequest() {
    document.getElementById('gameSetup').style.display = 'block';
        FB.ui({
            method: 'apprequests',
            message: '<?=$me[name];?> has invited you to a fun game of Towers. To play, just click on accept. Towers is a "3D" tile stacking word game.',
        },
        function (response) {
            if (response && response.request_ids) {
                var requests = response.request_ids.join(',');
                $.post('handle_requests.php',{uid: <?php echo $uid; ?>, request_ids: requests},function(resp) {

                window.location.replace("play.php?" + resp);
                });
            } else {
               document.getElementById('gameSetup').style.display = 'none';
            }
        });
        return false;
    }


       };

      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

，但是，我需要更改它，以便我可以将变量发送到“sendRequest”并将触发器更改为内联“onClick”

为此，我创建了一个链接在这样的页面上：

<a><img src=/images/start.png onClick=sendRequest('1234556');></a>

并将sendRequest函数更改为sendRequest(variable)，以便它可以接受变量

但是当我这样做时，每次我单击具有onClick触发器的按钮时，它都会给我一个错误“找不到变量sendRequest”

我认为这是因为onClick看不到sendRequest函数。

所以我的问题是，如何从 onClick 调用该函数。请记住，页面上将有多个按钮需要调用该函数，为每个按钮赋予不同的变量值。

我当前的代码如下所示：

<a><img src=/images/start.png onClick=sendRequest('123');></a>
<a><img src=/images/start.png onClick=sendRequest('456');></a>

<div id="fb-root"></div>
    <script>


      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>, 
          status  : true,
          cookie  : true, 
          xfbml   : true 
        }

        );


    function sendRequest(opponent) {
    document.getElementById('gameSetup').style.display = 'block';
        FB.ui({
            method: 'apprequests',
            to:opponent,
            message: '<?=$me[name];?> has invited you to a fun game" tile stacking word game.',
        },
        function (response) {
            if (response && response.request_ids) {
                var requests = response.request_ids.join(',');
                $.post('handle_requests.php',{uid: <?php echo $uid; ?>, request_ids: requests},function(resp) {

                window.location.replace("play.php?" + resp);
                });
            } else {
               document.getElementById('gameSetup').style.display = 'none';
            }
        });
        return false;
    }



             };



      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

如果有人能告诉我如何调用这个函数，我将不胜感激。据我所知，该函数需要保留在窗口内，fbAsyncInit 函数才能实际工作。

任何帮助将不胜感激。

Answer 1

我认为问题在于 sendRequest 方法位于函数作用域内，因此在全局命名空间（dom 可以访问它的地方）中不可用。您可以尝试更改：

function sendRequest()...

我

window.sendRequest = function()...

还应该提到，几乎没有充分的理由像这样将事件直接附加到 dom。即使您在像 php 这样的模板语言中渲染 JavaScript 变量数据，最好以关联方式设置变量值，这种方式不会将事件耦合到 dom（但可以将数据耦合到元素）。

Answer 2

首先，我没有查看你的所有代码，但我真的认为你应该在它上面付出更多的努力（格式和逻辑）。

无论如何，重点是：
您可以有一个标志，该标志仅在加载 JS-SDK 时设置为 true，并且您可以“阻止”window.fbAsyncInit 之外的任何进程，直到该标志变为放。像这样的东西：

<div id="fb-root"></div>
<script>
var isLoaded = false;
window.fbAsyncInit = function() {
    isLoaded = true;
...
...
}
function myFunc(myVar) {
    if(isLoaded) {
        // Do FB related stuff
    }
}