当使用http访问我的facebook iframe页面时，我如何才能获得Modal而不是弹出窗口

How can I get a Modal rather than a pop up when using http to access my facebook iframe page?

本文关键字：Modal 窗口 访问 我的 http facebook iframe      更新时间：2023-09-26

使用fb时。UI https托管的iframe页面提供了一个适当的模式对话框，但通过http的同一页面提供了弹出的

这是我的代码，主要来自facebook对话框的帮助页面：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>My Feed Dialog Page</title>
  </head>
  <body>
    <p>oh, hello.</p>
    <div id='fb-root'></div>
    <script src='//connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
    <p id='msg'></p>
    <script> 
      FB.init({appId: "myappid", status: true, cookie: true});
      function postToFeed() {
        // calling the API ...
        var obj = {
          method: 'feed',
          link: 'http://www.facebook.com/testapp/app_myappid/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.',
        };
        function callback(response) {
          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }
        FB.ui(obj, callback);
      }

    </script>
  </body>
</html>

所以当我通过https://www.facebook.com/testapp/app_myappid我得到了一个合适的模态对话框，但是http://www.facebook.com/testapp/app_myappid发出可怕的弹出声。

您是否尝试添加显示参数，如下所示：

var obj = {
    method: 'feed',
    link: 'http://www.facebook.com/testapp/app_myappid/',
    picture: 'http://fbrell.com/f8.jpg',
    name: 'Facebook Dialogs',
    caption: 'Reference Documentation',
    description: 'Using Dialogs to interact with users.',
    display: 'iframe'
};
...
FB.ui(obj, callback);

参考：https://developers.facebook.com/docs/reference/dialogs/

编辑

正如它在我发布的同一份文件中所说：

如果指定iframe，则必须具有有效的access_token。

查看您的代码，您似乎确实跳过了身份验证过程。你看，你不能只调用FB.init然后开始使用api，你需要要求SDK对用户进行身份验证。

有一些方法可以做到这一点，您应该查看客户端身份验证文档以了解更多信息。这是您修改后的代码，我添加了使用SDK的FB.login方法，它声明：

调用FB.login导致JS SDK尝试打开弹出窗口窗因此，只应在用户单击后调用此方法事件，否则弹出窗口将被大多数浏览器阻止。

因此，你可能需要授权这个弹出窗口才能工作，实际上你应该使用另一种方法（如客户端auth-doc中所讨论的），或者在用户点击某个东西后调用这个方法。这只是为了给你一个正确的方向：

function callback(response) {
    document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };
    FB.ui(obj, callback);
}
FB.init({
    appId: "myappid", 
    status: true, 
    cookie: true
});
FB.login(function(response) {
    if (response.authResponse) {
        postToFeed();
    }
    else {
        alert("user NOT logged in");
    }
});

第二次编辑

由于这是一个画布应用程序，并且您希望避免登录弹出窗口，因此还有另一个解决方案。

如果你收到错误消息，这意味着你（可能）缺少客户端身份验证，你可以从服务器端传递访问令牌，并在客户端中使用它，或者你可以做这样的事情：

window.fbAsyncInit = function() {
    FB.init({
        appId: "myappid", 
        status: true, 
        cookie: true
    });
    FB.getLoginStatus(function(response) {
        if (response.status === "connected") {
            postToFeed();
        }
        else {
            console.log("not logged in to facebook or hasn't authorized the app");
        }
    };
};
function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };
    function callback(response) {
        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
    }
    FB.ui(obj, callback);
}

这不会打开弹出窗口或任何类似的东西，只会检查用户登录状态。您可以阅读更多关于FB.getLoginStatus方法的信息。

此外，我建议在初始化js-sdk时使用Channel File参数。在这种情况下应该没有任何区别，但更安全。

相关文章：