微妙的javascript執行順序

Posted by admin - 10/09/09 at 12:09:49 上午

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

首先~有一個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 訂閱。

  1. 感謝分享

    Comment 由 Tom — 十二月 12, 2013 #

抱歉，本篇的迴響表單已關閉。

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