微妙的javascript執行順序

其實網頁程式設計有好多微妙的小地方阿~
像今天注意到的這個:

首先~有一個test.js檔~內容只有一行如下:

1
a=8;

再來~create一個test.htm檔~內容如下:

1
2
3
4
5
<script>
var a=1;
document.write(unescape("%3Cscript src='test.js'%3E%3C/script%3E"));
alert(a);
</script>

alert出來的數字是多少呢? 是8嗎?

不對喔~答案是1~

但是如果在alert之前加上</script><script>~變成

1
2
3
4
5
6
7
<script>
var a=1;
document.write(unescape("%3Cscript src='test.js'%3E%3C/script%3E"));
</script>
<script>
alert(a);
</script>

alert出來的數字就變成8了喔!

為什麼會這樣呢?
簡單的說~
雖然執行document.write那行就會去載入了外部檔test.js~
但是要等到你"目前那段"javascript執行完~他才會去執行外部檔裡面的javascript~
所以如果沒有把alert跟前面的程式碼分段開~他就會先執行alert~再執行test.js裡的程式碼~
就形成這種微妙的差別啦~

像是應該很多人都會用到的google analytics程式碼~

1
2
3
4
5
6
7
8
9
10
11
<script>
var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");
document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try{
var pageTracker=_gat._getTracker("UA-XXXXXXXX-X");
pageTracker._trackPageview();
}
catch(err){}
</script>

第四行跟第五行不能拿掉喔~不然會有javascript error~
(會注意到這個問題也就是因為我今天自作聰明拿掉了那兩行的結果XD)

1 則迴響 »

本篇文章的迴響 RSS 訂閱。 TrackBack URI

  1. 感謝分享

    Comment 由 Tom — 十二月 12, 2013 #

發表迴響

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.