Script does not run on IE after deferring parsing of javascript
In a bid to optimize my pages, i wanted to defer parsing of javascript. I put the code below for my facebook like box in the head portion of my page:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
docu开发者_高级运维ment.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Now on works well on Google Chrome and Mozilla but does not display the like box on INternet Explorer.
Please how can i fix
All the script loaders I've seen append the script element to the first head tag, not the body tag like is shown in 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);
I can't say if that is what is causing your issue on IE, but it seems worth changing to.
Also, since you're waiting for the window load event, do you realize that this script won't be loaded until the last image on the page has finished downloading. That's a lot longer than you have to wait.
As best I can tell, IE just doesn't work if the FB script is loaded after the content is loaded. Even if you put it after the content in a traditional script tag, it doesn't work in IE. It must be something about the way the facebook script works in IE. I'm sorry I can't help more. You can see that even that this doesn't work in 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>
But, this does work in IE8:
P.S. You have an extraneous semicolon in your HTML after the URL, but removing it doesn't seem to solve the problem.
Update:
After i read through the facebook dev reference. I made a demo for you. You can aslo edit the code at http://jsbin.com/onehul/17/edit.
Basically, you need add xml name space at html documentElement
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
This ensure the browser will accept and parse the non-standard tag from facebook,
and then dynamiclly create the script tag appending to fb-root div.finally, do cleaning up. After the script successfully loaded,remove it from the dom tree.
<!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>
The code below is borrow and modified from jquery source code to load script dynamiclly, which should works under all browser
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 );
加载中,请稍侯......
精彩评论