未来往事
网页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/
本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议。通俗地讲,只要在使用时署名,那么使用者可以对本站所有原创内容进行转载、节选、混编、二次创作,允许商业性使用。除非在文章正文内单独说明,本站欢迎各种形式的转载。互联网技术更新很快,本站很多文章都具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请大家在转载时保留此出处信息。
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮(电子邮件地址不会被公开, 仅用于接收评论回复提醒使用)
OpenID登入 权限选项 表情