<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsTest.aspx.cs" Inherits="WebApplication1.jsTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
昔誰持種來 而今佳色開<br>
昔誰持種來 而今佳色開<br>
昔誰持種來 而今佳色開<br>
</div>
<script>alert('提示訊息');</script>
</form>
</body>
</html>
如上很簡單的 HTML 語法，只是好奇的想知道，是先跳出 javascript 的「提示訊息」呢，還是會先顯示「昔誰持種來 而今佳色開」的說明呢？我覺得在剖析 HTML 時，是由上而下的順序，應該會先顯示文字說明，而 javascript 是擺在最後面，所以會放到後面才執行。不只我這麼說，別人也是如是說，請看：「Load and execution sequence of a web page?」對於 mauris 所解釋的內容，真的非常詳細。
但我在 IE8 瀏覽結果時，卻出現如下結果：
而 chrome 與 firefox 則是如下（以 chrome 為例）：
這說明了，以上面的範例來說，IE8 是先執行 javascript ，然後再對文字說明做處理；相反地，Chrome 與 FireFox 則是先對文字說明做處理，然後再執行 javascript。但這樣的結果，還真的讓人很疑惑？於是我再測了一下 IE6，沒想到 IE6 的行為，竟然跟 chrome 與 firefox 是一樣的，難道 IE8 是怪胎嗎？或許把過錯都推給 IE8 還蠻多人會覺得理所當然，但直到有一天，我把 jQuery 的版本升級到 1.7.1 之後，IE8 的處理結果竟也跟其他瀏覽器都一致了。原來事情的始末，竟是 jQuery 1.6.4 的版本，造成 IE8 在執行 javascript 時的觸發順序都提到最前面了。
在尚未發現主要原因是 jQuery 版本所引起之前，我的作法是在 javascript 標籤屬性裡加上 defer：
<script defer>alert('提示訊息');</script>
defer 這關鍵字，僅支援 IE 瀏覽器，他會讓 javascript 的執行時間延遲到整個頁面都下載完成後才執行。對我而言，只要跳出訊息視窗時不讓背景畫面一片空白，也就可以了。只是沒想到，真正引發問題的原因竟是自己所使用的 jQuery 版本。
IE8，我錯了，請您原諒～
.jpg)
參考：
01：Load and execution sequence of a web page?
02：姚博文 Script中defer的作用
03：asp.net弹出信息框——没有用ScriptManager
04：HTML <script> 标签的 defer 属性
沒有留言:
張貼留言