language 頁面中腳本標記的位置如何影響其中定義的JavaScript函數?




script src (8)

如果你通過XMLHttpRequest提取Javascripts,就像Diodeus說的那樣,它可能無法工作。 在我的情況下,沒有錯誤,瀏覽器只是忽略了新的腳本。

我最終使用了這個,不是非常優雅,但到目前為止對我有用:

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

如何使用execJS:http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/

注意:注意&lt; 在這一行: for(var i=0;i<st.length; i++)

我讀到你應該在<head>標籤中定義你的JavaScript函數,但是<script>的位置(無論是在<head><body>或任何其他標籤中)如何影響JavaScript函數。

具體來說,它如何影響函數的範圍以及從哪裡調用它?


如果在可能調用的函數之前有一個內聯腳本(外部函數),則可能會出現錯誤,因為它們可能尚未可用。 不是說它總是會發生,只是它可能取決於瀏覽器類型或版本。


告訴人們只在頭部添加<SCRIPT> 聽起來像是一件合理的事情,但正如其他人所說,有很多理由說明為什麼不建議甚至不實用 - 主要是速度和動態生成HTML頁面的方式。

這就是HTML 4規範所說的

SCRIPT元素將腳本放在文檔中。 此元素可能在HTML文檔的HEAD或BODY中出現任意次。

還有一些HTML示例。 它看起來不是所有格式在這裡:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>

HTML 5中有一些值得期待的東西:

<SCRIPT>新異步屬性:

注意:有一些方法[原文如此]可以執行腳本:

async屬性為“true”:腳本將與頁面的其餘部分異步執行,因此腳本將在頁面繼續解析時執行。

async屬性為“false”,但defer屬性為“true”:腳本將在頁面完成解析時執行。


腳本標記的位置很重要。 如果將Function與document Element綁定,則在實現函數之前必須先加載document元素。 假設getTeachers()是getTeachers.js文件中的函數。 這會給你一個錯誤:

<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>

它在首先加載頭之前給出錯誤,並且找不到指定了id的元素。 以下代碼為更正:

<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>

Javascript的範圍規則與perl類似 - 您可以在當前或任何更高的範圍級別調用任何函數。 唯一的限制是必須在調用函數時定義函數。 來源中的位置是無關緊要的 - 只有時間位置才重要。

如果可能的話,您應該避免將腳本放在<head> ,因為它會減慢頁面顯示速度(請參閱Alan發布的鏈接)。


它沒有。 大多數編程框架在整個頁面中分散腳本。 我因此而很少見到問題(並且只有舊瀏覽器)。


安置的一個方面是性能。 請參閱YSlow討論中的這篇精彩文章,了解為什麼有時建議您將它們放在文檔的底部。

至於範圍問題,據我所知,Javascript的常用可見性規則(在函數內部或外部定義的變量,本地,全局,閉包等)不會受到影響。


如果您的腳本引用頁面上的ID並且頁面尚未呈現(即腳本在HTML之前,或者您的腳本是使用onload執行的,而不是DOM已準備好),您也可能會收到錯誤。







tags