代码之家 › 专栏 › 技术社区 › croceldon

如何使用jQuery和setTimeout()添加Javascript代码

jquery javascript

croceldon · 技术社区 · 14 年前

我有一些跟踪代码,提供者(WebTraxs)说应该放在标记的底部。问题是,这段代码导致页面上的所有内容(包括jQuery代码)在webtrax执行之后运行。在图像滚动等不起作用的情况下,这种执行有时需要足够长的时间,因为用户在WebTraxs完成之前正在图像上进行鼠标移动。

因此,我尝试在页面加载到document ready处理程序后,使用以下方法将所需的标记(来自WebTraxs)添加到主体中:

 setTimeout(function(){

  var daScript = '<script language="JavaScript" type="text/javascript" src="/Scripts/webtraxs.js" />';
  var daOtherScript = '<noscript><img alt="" src="http://db2.webtraxs.com/webtraxs.php?id=company&st=img" />';

  $('body').append(daScript);
  $('body').append(daOtherScript);

 },  
 5000);

我有两个以上的问题:

在IE中,没有抛出错误,但通常可以看到WebTraxs代码试图在状态栏中加载跟踪图像。以上代码不会出现这种情况。

有没有更好的方法来实现我的目标?我基本上只是想确保WebTraxs代码在执行document ready处理程序之后执行。

5 回复 | 直到 14 年前

Andrew 14 年前

您不必使用jQuery的DOMReady事件处理程序。人们使用DOMReady的原因是,它允许在启动操纵页面的脚本之前加载完整的DOM。如果调用脚本太早,页面的某些部分可能无法访问——例如,如果以前调用过它们 <div id="footer">...</div> $('div#footer') 因为它还没有被拉进DOM。这很好,只是您的DOMReady方法将始终执行之后任何页内脚本都首先执行。这就是为什么你的webtrax代码首先被执行。

但是您可以获得与DOMReady相同的好处,并且仍然可以通过在文档末尾调用页面脚本来控制执行顺序,此时只剩下HTML结束标记。他们将按他们出现的顺序被处决。

所以试试这个:

<html>
<head>
    <script type="text/javascript" src="myPageScripts.js"></script>
</head>
<body>
    <div id="pagesection1"></div>
    <div id="pagesection2"></div>
    <div id="pagesection3"></div>
    <!--NO MORE CONTENT BELOW THIS LINE-->
    <script type="text/javascript">//<![CDATA[
        runMyPageInitializerScripts();
    //]]></script>
    <script language="JavaScript" type="text/javascript" src="/Scripts/webtraxs.js" ></script>
</body>
</html>

在这个剧本里, runMyPageInitializerScripts() 仍然可以完全访问 #pagesection1 , pagesection2 和 pagesection3 ,但看不到决赛 script 标签。所以页面不在 确切地 与触发DOMReady时的情况相同,但对于大多数脚本来说通常没有缺点。

Cristian 14 年前

你为什么不使用 .getScript 功能:

 setTimeout(function(){

  $.getScript("http://path.to/Scripts/webtraxs.js");
 },  
 5000);

你的代码真正让人好奇的是你添加了一个 <noscript> 使用JavaScript标记。。。这没有任何意义。如果用户没有JavaScript setTimeout 不会被解雇,所以 <noscript>

在这种情况下,您只需执行以下操作:

$(document).ready(function(){
    $.getScript("http://path.to/Scripts/webtraxs.js");
});

jAndy 14 年前

<script> <script/> .

你呢有使用 <script></script>

DOMready

Jason McCreary 14 年前

你错过了结尾 </script> </noscript> 标签。

Rod 14 年前

如果你想保留 <script> 标记您可能需要对其进行转义(不确定这种情况是否在最新的浏览器上仍然存在,但据我所知,您不可能有 <脚本> 脚本标记中的标记),以旧的google analytics代码为例:

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

拆分脚本标记也有效:

document.write("<scr"+"ipt src='somescript.js'></sc"+"ript>");

但是既然你用的是jQuery, .getScript()