延迟javascript解析后，脚本不能在IE上运行

Script does not run on IE after deferring parsing of javascript

本文关键字：不能 IE 运行 脚本 javascript 延迟      更新时间：2023-09-26

为了优化我的页面，我想推迟javascript的解析。我把我的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>

现在on在Google Chrome和Mozilla上运行良好，但在INternet Explorer上不显示like框。

我所见过的所有脚本加载器都将script元素附加到第一个head标签，而不是像本描述中所示的那样将body标签附加到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上出现问题的原因，但似乎值得改变。

另外，由于您正在等待窗口加载事件，您是否意识到直到页面上的最后一个图像下载完成后才会加载此脚本?这可比你等的时间长多了。

据我所知，IE只是不工作，如果FB脚本加载后的内容加载。即使你把它放在传统脚本标签的内容之后，它在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中工作:

注:在URL后面的HTML中有一个多余的分号，但是删除它似乎并不能解决问题。

更新:

在我阅读完facebook开发参考后。我给你做了个小样。您也可以在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-rootdiv的脚本标记。最后，进行清理。脚本成功加载后，将其从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 );
相关文章：