rinald_未来往事

网页JS延迟最后加载及解决Firefox不支持Js的InnerHtml问题

WEB前端
网页JS延迟最后加载及解决Firefox不支持Js的InnerHtml问题

很多网友遇到加入下面这段代码后在IE下能正常加载js,但是火狐下就不行,其实问题出现在InnerHtml。
<span id=""></span>

正 文:
由于W3C标准对Javascript语法进行了规范,即ECMAScript。而Firefox严格遵守ECMAScript规范,所以对javascript一些属性和方法不支持(其实不能说是Firefox不支持,而是对不规范的写法不支持,符合标准的写法还是支持的),Firefox希望程序设计师都采用规范的ECMAScript标准来书写代码,这样一些适应传统习惯的IE下的写法就会撞到很多的问题。

本文以网页JS广告加载为例,讲述了网页如何把JS广告放到最后加载以提速页面的响应时间。

常见代码如下:
<span id="adtop"></span>
<SPAN id="ad_top" style="visibility:hidden;">
<script language="JavaScript">xxxxxx</script>
</SPAN>
<SCRIPT>adtop.innerHTML=ad_top.innerHTML;ad_top.innerHTML="";</SCRIPT>

上面的代码在IE、chrome等浏览器下可以被正确的执行替换,而在Firefox下就不能。其实解决方法也很简单,就让我们按照ECMAScript规范写代码即可。上面的代码修正为下面的即可:
<span id="adtop"></span>
<SPAN id="ad_top" style="visibility:hidden;">
<script language="JavaScript">xxxxxx</script>
</SPAN>
<SCRIPT>document.getElementById("adtop").innerHTML=document.getElementById("ad_top").innerHTML;document.getElementById("ad_top").innerHTML="";</SCRIPT>


不要直接使用DIV或SPAN的id,而是通过 document.getElementById("div_id") 来执行替换即可。另外,Firefox是不支持 innerTEXT 属性的。

下面是兼容IE、chrome、Firefox的代码,使用方法详细说明如下:
Span标签:
<span id="adtop">Loading...</span>  //在需要插入JS的地方插入该标签代码,当然,那个Loading...你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

JS代码:
<SPAN id="ad_top" style="visibility:hidden;">
<script language="JavaScript">xxxxxx</script>
</SPAN>
<SCRIPT>document.getElementById("adtop").innerHTML=document.getElementById("ad_top").innerHTML;document.getElementById("ad_top").innerHTML="";</SCRIPT> //页面最底端插入的代码

原文作者:rinald
原文地址:http://fity.cn/post/204.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。