Question

为了优化我的网页，我想推迟解析javascript。我把下面的代码放在我页面的head部分中，就像我的facebook一样：

<script type="text/javascript">
 function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
   document.body.appendChild(element); 
 } 
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

现在可以在Google Chrome和Mozilla上运行良好，但在互联网资源管理器中不显示类似的框。

我该怎么办？

Answer 1

我见过的所有脚本加载器都将脚本元素附加到第一个head标记，而不是this description中显示的body标记。

   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
   head.appendChild(script);

我不能说这是否是导致您在IE上出现问题的原因，但似乎值得改变。

此外，由于您正在等待窗口加载事件，您是否意识到在页面上的最后一个图像下载完成之前不会加载此脚本。这比你必须等待的时间长得多。

我可以说，如果在加载内容后加载FB脚本，IE就无法工作。即使您将其放在传统脚本标记中的内容之后，它也无法在IE中使用。它必须是关于facebook脚本在IE中的工作方式。对不起，我忍不住了。你可以看到，即使这在IE8中不起作用：

<div id="fb-root"></div><fb:like-box href="http://facebook.com/pages/MyJobMag/165211540158300" width="336" show_faces="false" stream="false" header="true" colorscheme="light"></fb:like-box>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

但是，这在IE8中有效：

P.S。您在HTML后面的URL中有一个无关的分号，但删除它似乎无法解决问题。

Answer 2

<强>更新

我读完facebook dev reference后。我为你做了demo。您也可以在http://jsbin.com/onehul/17/edit编辑代码。

基本上，您需要在html documentElement

添加xml名称空间

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

这确保浏览器接受并解析来自facebook的非标准标签，然后动态创建附加到fb-root div的脚本标记。最后清理。脚本成功加载后，将其从dom树中删除。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="fb-root">
  </div>
  <script>

  var script,
    head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;

script = document.createElement( "script" );
script.async = "async";
script.charset = "utf-8";
script.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {

    if (!script.readyState || /loaded|complete/.test( script.readyState ) ) {

         // Handle memory leak in IE
        script.onload = script.onreadystatechange = null;

        // Remove the script
        if ( head && script.parentNode ) {
            head.removeChild( script );
        }

        // Dereference the script
        script = undefined;
   }
};

// Use insertBefore instead of appendChild  to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
    document.getElementById('fb-root').appendChild(script);
  </script>

  <fb:like-box href="http://facebook.com/pages/MyJobMag/165211540158300" width="336" show_faces="false" stream="false" header="true" colorscheme="light"></fb:like-box>
</body>
</html>

下面的代码是从jquery源代码借用和修改，以动态加载脚本，这应该适用于所有浏览器

var script,
    head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;

script = document.createElement( "script" );
script.async = "async";
script.charset = "YOUR SCRIPT CHARSET";
script.src = "YOUR SCRIPT SRC";

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {

    if (!script.readyState || /loaded|complete/.test( script.readyState ) ) {

         // Handle memory leak in IE
        script.onload = script.onreadystatechange = null;

        // Remove the script
        if ( head && script.parentNode ) {
            head.removeChild( script );
        }

        // Dereference the script
        script = undefined;

   };
}

// Use insertBefore instead of appendChild  to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore( script, head.firstChild );

在推迟解析javascript后，脚本不会在IE上运行

2 个答案: