延迟javascript解析后,脚本不能在IE上运行
Script does not run on IE after deferring parsing of javascript
为了优化我的页面,我想推迟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-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上编译,但可以在Chrome上运行
- Json到CSV下载,可以在chrome中工作,但不能在IE浏览器中工作
- Iframe加载调整大小在Chrome中工作,但不能在IE或Firefox中工作
- 我的剧本赢了'不能在IE中工作(甚至9)?修改复制文本的简单javascript
- Jquery animate 不能与 IE 一起使用 - 什么也没发生
- 从Java脚本返回多个值,这些值不能在firefox上运行(在IE上运行良好)
- addEventListener没有'不能在IE中工作(在IE8中测试)
- JavaScript可以在IE+Chrome中使用,但不能在FF中使用
- jQuery scrollTop没有'不能在FF或IE中制作动画,但在chrome中效果良好
- .load() 适用于 IE 和 dreamweaver 预览版,但不能使用 opera 和 chrome
- JavaScript 在 IE 中工作,但不能在 Firefox 中工作
- 嵌入式谷歌地图仅在IE上加载,但既不能在Mozilla Firefox上加载,也不能在Google Chrome上加载
- JQuery CSS Transform在Chrome和Firefox中工作,但不能在IE中工作
- 不能让CKEditor插入HTML在IE 8上运行
- jQuery在Chrome和Safari中工作,但不能在Firefox或IE中工作
- “无法获取未定义或空引用的属性'getData'”在IE中,但不能在Chrome中获取
- “函数声明不能嵌套在语句中” - IE 处于严格模式错误
- 不能在IE中使用FB身份验证
- Extjs 窗口在 IE 中不能很好地显示元素
- Jquery error() 在 chrome 和 IE 中工作,但不能在 Firefox 中工作