Question

据说javascript代码必须放在</body>标记之前。但在生成Facebook Like按钮后，我收到此消息：

在您的网页上包含一次JavaScript SDK，理想情况下就在其后面打开<body>代码。

这是我要添加的代码：

<div id="fb-root"></div>
<script>(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#xfbml=1&appId=675640525783719";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Answer 1

在你放置它的地方并不特别重要，只要之前 </body>标签。将其添加到页面顶部（就在<body>之后，确保SDK下载并可供页面使用，如果页面下方的任何javascript都尝试直接访问FB对象。

<div id="fb-root"></div>标记的放置位置<{1}} ，因此SDK可以找到该div以向其添加资源。

Answer 2

按照他们的说法，在开始<body>标记后立即执行：

<html>
<body>
<div id="fb-root"></div>
<script>(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#xfbml=1&appId=675640525783719";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

//rest of your code

</body>
</html>

Answer 3

我有点晚了，但我正在做一些关于这个话题的搜索。

该脚本的一小部分实际上是异步下载另一个脚本（实际用于其API的脚本）并将其注入页面。

默认情况下，Web浏览器（至少是旧浏览器）将在下载外部脚本时停止呈现并等待。这就是为什么经常建议将脚本放在正文末尾的原因。但是，通过异步加载脚本，它们不会阻止渲染。

现代浏览器支持async脚本代码：

<script src="http://example.com/script.js" async>

async的浏览器支持：http://caniuse.com/#search=async

我认为这是现在异步加载脚本的更好方法，但Facebook希望得到最好的支持（IE9及更低版本）。如果浏览器不支持async，那么该属性将被忽略，脚本应该加载正常，尽管是同步的。

我不确定的一部分，这就是我自己寻找答案的原因是：如果您已经异步加载脚本，为什么不将它放在<head>中？为什么身体的开始具体？我不知道。

Answer 4

在我的研究中，它应该在body标签之后，因为它试图异步加载iFrame然后加载脚本。这是为了提高性能，因此它不会阻止您呈现的任何其他内容。

参考： https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/

Answer 5

我来晚了，但是我正在做一些关于这个话题的自我搜索。

这小段脚本实际上是异步下载另一个脚本（实际用于其API的脚本）并将其注入到页面中。

默认情况下，网络浏览器（至少是旧的浏览器）将停止渲染并等待下载外部脚本的过程。这就是为什么通常建议将脚本放在正文的末尾。但是，通过异步加载脚本，它们不会阻止渲染。

现代浏览器支持异步脚本标签：

我应该在哪里放置Facebook赞Javascript代码？

5 个答案: