腳本在推遲解析javascript後不能在IE上運行

爲了優化我的頁面，我想推遲javascript的解析。我把下面的代碼爲我的Facebook像盒子在我的頁面頭部：腳本在推遲解析javascript後不能在IE上運行

<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>

現在的作品以及在谷歌瀏覽器和Mozilla，但不顯示在Internet Explorer中的樣箱。

請我該如何解決

來源

2011-08-20 Ogugua Belonwu

所有的腳本裝載機我見過的腳本元素附加到第一頭標籤，而不是身體像標籤中顯示this description。

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的工作：

附：在URL後面的HTML中有一個額外的分號，但刪除它似乎無法解決問題。

來源

2011-08-20 03:15:01 jfriend00

感謝，我修改它下作品;它仍然顯示在Chrome和Mozilla中，但仍不顯示在Internet Explorer中。 –

我還發現，如果Facebook腳本也在等待加載事件，並且直到事件觸發後才加載腳本，則腳本可能會混亂。 – jfriend00

你什麼時候打電話給任何FB功能？你是否在等待FB腳本加載？ – jfriend00

更新：

後，我通過閱讀facebook dev reference。我爲你做了一個demo。您也可以在http://jsbin.com/onehul/17/edit編輯代碼。

基本上，你需要在HTML documentElement

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

這增加了XML命名空間確保瀏覽器會接受並解析從Facebook，非標準標籤，然後dynamiclly創建腳本標籤附加到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的源代碼修改以dynamiclly加載腳本，它都應該瀏覽器

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);

來源

2011-08-20 04:06:35 wukong

我們實際上並不認爲這個問題是關於如何正確加載腳本。這似乎是一個加載時間問題。 – jfriend00

@wukong，無法讓你的腳本工作 –

@Ogugua Belonwu看看我的更新版本 – wukong

腳本在推遲解析javascript後不能在IE上運行

回答

相關問題