发表新帖
发表新帖

How does the location of a script tag in a page affect a JavaScript function that is defined in it?

后端 未结
关注
9 1141
死守一世寂寞
死守一世寂寞 2020-11-29 04:27

I read that you should define your JavaScript functions in the tag, but how does the location of the

相关标签:
9条回答
  • Happy的楠姐
    2020-11-29 04:48

    If you pull Javascripts in through XMLHttpRequest, like Diodeus said, it probably won't work. In my case, there was no error, the browser just ignores the new script(s).

    I ended up using this, not terribly elegant but works for me so far:

    http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/

    How to use execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/

    Note: Watch out for &lt; in this line: for(var i=0;i<st.length; i++)

    0 讨论(0)
  • 轮回少年
    2020-11-29 04:50

    If you have an inline script (outside functions) located before functions it may call, you may get an error because they may not be not available yet. Not saying it is always going to happen, just that it may depending on browser type or version.

    0 讨论(0)
  • 情深已故
    2020-11-29 04:51

    Javascript's scoping rules are similar to perl - you can call any function at the current or any higher scope level. The only restriction is that the function has to be defined at the time you call it. The position in the source is irrelevant - only the position in time matters.

    You should avoid putting scripts in the <head> if possible as it slows down page display (see the link Alan posted).

    0 讨论(0)
  • 长发绾君心
    2020-11-29 04:53

    Position of script tag does matter. If you bind a Function with document Element then the document element has to be loaded first before we implement function. suppose getTeachers() is function in getTeachers.js file. This will give you an error:

    <html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
 <script type="text/javascript" src="getTeachers.js"></script>
 <script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};

</script>
 </head>
 <body>
 <form>
 <input type = "button" id="buttonId" value = "Press for Results"  /><br />
 </form>

<span id="results" /></span>
</body>
</html>

    It gives error before head is loaded first and it cannot find element with id specified. The below code is correction:

    <html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
 <script type="text/javascript" src="getTeachers.js"></script>

 </head>
 <body>
 <form>
 <input type = "button" id="buttonId" value = "Press for Results"  /><br />
 </form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};

</script>
<span id="results" /></span>
</body>
</html>
    0 讨论(0)
  • 一整个雨季
    2020-11-29 04:55

    It doesn't. Most programming framework scatter scripts all throughout the page. I've only rarely seen problems because of that (and only from older browsers).

    0 讨论(0)
  • 谎友^
    2020-11-29 04:57

    One of the aspects of placement is performance. See this fine article within the YSlow discussion for why it's sometimes recommended you put them at the bottom of the document.

    As for issues of scope, the usual visibility rules for Javascript (vars defined inside or outside of functions, local, global, closures, etc.) are not affected so far as I know.

    0 讨论(0)
 看不清?
提交回复
热议问题