0

<head>我想在标签的第一个动态添加 js 文件。我的文件在下面给出

示例链接：链接

代码 

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
        function load() {
        var doc = document;
        var url = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
        var id =  1;
        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.id = id;
        //alert(script);
        var head = doc.getElementsByTagName( "head" )[ 0 ].appendChild( script );

        }
         window.onload = load;

        </script>   
<title>Nathan</title>
<style>
table{
    width:200px;
    margin:0 auto;
    background-color:#eee;
    text-align:center;
    cursor:pointer;
}
th{
    background-color:#333;
    color:#FFF;
}
div#lyrics{
    width:200px;
    height:400px;
    background-color:#7C8698;
    position:absolute;
    left:500px;
    padding:10px;

}
</style>
<script type="text/javascript">

$(document).ready(function(){

    $("div#lyrics").hide();

    $("#songlist tr").mouseover(function(){
        $(this).css("background-color","#ccc");
        $("#lyrics",this).show();
    }).mouseout(function(){
        $(this).css("background-color","#eee");
        $("#lyrics",this).hide();
    });

});
</script>

</head>

<body>
    <table id="songlist">
        <th>Songs</th>
        <tr><td>song1<div id="lyrics">la la la song1</div></td></tr>
        <tr><td>song2<div id="lyrics">doo doo doo song2</div></td></tr>
        <tr><td>song3<div id="lyrics">fee fi fo fum song3</div></td></tr>
        <tr><td>song4<div id="lyrics">hmm hmmm song 4</div></td></tr>
        <tr><td>song5<div id="lyrics">ma ma mi mi song5</div></td></tr>
        </tr>
    </table>
</body>
</html>

动态脚本添加成功，但添加了最后一个 head 标签。所以我的 jquery 函数不起作用。所以请告诉我如何在 head 标签的第一个加载我的动态脚本

4

3 回答 3

3

在 head 部分首先添加 jQuery 仍然不起作用，因为对源文件的请求将异步，为什么不像普通脚本标签一样添加 jQuery：

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script>/*jQuery dependent code*/</script>
  ...

如果您将/必须使用异步加载，则必须等待脚本加载，然后再添加任何 jQuery 相关代码：

<script> // Pseudo code: (Take a look at http://www.ejeliot.com/blog/109 for more complex solution)
  var script = document.createElement('script');
  script.onload = init;
  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js';
  document.body.appendChild(script);
</script>

<script>
  function init() { /* now jQuery is loaded */ }
</script>
于 2013-07-30T08:42:21.150 回答
0

Use .insertBefore() and .firstChild instead of .appendChild()

于 2013-07-30T08:38:14.300 回答
0

当您编写代码时，第二个脚本标记中的内容在加载 jQuery 之前运行。当时没有定义“$”。

window.onload = load;

意味着您将内容放在加载函数中以在“onload”处运行。但显然，脚本标签中的内容已经在运行。直到已经定义的脚本标签中的所有脚本都被执行后，定义的“加载”函数才会被执行。

然后，当然，实际下载文件需要一些时间。

如果您必须异步加载 jQuery，您还必须将所有依赖于 jQuery 的 JavaScript 放入某个回调中，该回调仅在 jQuery 成功加载后才会执行。

于 2013-07-30T08:44:08.453 回答