插入带有 innerHTML 的 Facebook 登录按钮在 Chrome 中不起作用

Question

如果用户已经通过 Facebook 登录，我正在尝试让我的网页做出反应。当他们登录时，我希望 "Login with Facebook" 按钮通常显示的地方显示 Settings/Logout 按钮。如果用户未登录，我希望它显示 Facebook 登录按钮。

我必须执行此操作的代码如下所示，我在其中使用 innerHTML 来设置我想要的内容。

var login_area = document.getElementById("login-area");
if (response.status === 'connected') {
  // Logged into your app and Facebook.
  user_id = response.authResponse.userID;
  login_area.innerHTML = '<button type="button" class="btn btn-outline-danger btn-sm" onclick="settings()"><i class="fas fa-cog fa-lg"></i></button><button id="login-button" type="button" class="btn btn-outline-danger btn-sm" onclick="logout()"><i class="fa fa-sign-out-alt fa-lg" aria-hidden="true"></i></button>';
} else {
  // The person is not logged into your app or we are unable to tell.
  login_area.innerHTML = '<div class="fb-login-button" data-max-rows="1" data-size="medium" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" scope="user_friends" data-use-continue-as="false"></div>';
}

此代码在 Firefox 中完全符合预期，但对于 Chrome，登录按钮未显示。当我去检查元素时它就在那里，但它在实际页面上没有显示任何内容。

怎么回事？

Answer 1

因为Facebook SDK 不知道您在文档中添加了新标签。您必须使用 FB.XFBML.parse ( https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ ) 将其告知 Facebook SDK。

插入带有 innerHTML 的 Facebook 登录按钮在 Chrome 中不起作用

Inserting Facebook Login button with innerHTML not working in Chrome

javascript

facebook

login

button

innerhtml