javascript <div id="fb-root" 和 JS 的最佳位置在哪里?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11417664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:08:26  来源:igfitidea点击:

Where is the best place for <div id="fb-root" and the JS?

javascriptfacebookasynchronousfacebook-javascript-sdk

提问by Doug Cassidy

so, the div and call to the fb js: Fb says to put it right after the (body) tag. Any wp plugin that uses it will put it in the footer (wp_footer(), because, well, there is no wp_just_after_body()). I have had a situation once where fb functionality that i needed would only work when this stuff was after the body tag. I dont know js enough to know what the difference is and whether body or footer is the best place for this.

所以,div 和调用 fb js: Fb 说把它放在 (body) 标签之后。任何使用它的 wp 插件都会将它放在页脚中(wp_footer(),因为没有 wp_just_after_body())。我曾经遇到过这样一种情况,我需要的 fb 功能只有在 body 标签之后才起作用。我不太了解 js,不知道有什么区别,以及正文或页脚是否是最好的地方。

回答by Mihai Cr?i??

Just after the opening body tag on each page you want to load it.

就在您要加载的每个页面上的开始正文标记之后。

More from facebook SDK docs:

更多来自 facebook SDK 文档:

The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.

The SDK inserts elements into fb-root which expect to be positioned relative to the body or relative to an element close to the top of the page. It is best if the fb-root element is not inside of an element with position: absolute or position: relative. If you must place the fb-root element inside of a positioned element, then you should also give it a position close to the top of the body or some parts of the SDK may not work properly.

fb-root 元素不得使用 display: none 或visibility: hidden 隐藏,否则 SDK 的某些部分将无法在 Internet Explorer 中正常工作。

SDK 将元素插入到 fb-root 中,这些元素期望相对于正文或相对于靠近页面顶部的元素进行定位。如果 fb-root 元素不在具有 position: absolute 或 position:relative 的元素内,则最好。如果你必须把 fb-root 元素放在一个定位元素里面,那么你还应该给它一个靠近 body 顶部的位置,否则 SDK 的某些部分可能无法正常工作。

回答by Shawn E Carter

If you need to use js sdk near the footer of your doc it is best to use async and only make your api calls after the sdk has loaded and initialized.

如果您需要在文档页脚附近使用 js sdk,最好使用异步并且仅在 sdk 加载和初始化后进行 api 调用。

I use. EXAMPLE:assume i have wrapped all of my api calls in functions.

我用。示例:假设我已将所有 api 调用包装在函数中。

 <div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
    appId  : '135669679827333',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'https://anotherfeed.com/emo/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
        });

// facebook has been loaded and init, you can call your api functions from here.
if (window!=window.top) {
FB.Canvas.EarlyFlush.addResource("https://anotherfeed.com/");
setTimeout("FB.Canvas.setAutoGrow(250);", 2000);
toggle('connections');  // my api call
FB.XFBML.parse(loginb); // my api call
}else {
}
// !facebook load and init.
      };
  // Load the SDK Asynchronously
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

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