一個禮拜前，我在 jQuery 文件中，找到了這個可以製造 ajax 效果的 .load() 函式，而實作出 Blogger 文章留言展開 / 收合的效果，還得意洋洋的寫了這篇教學文章「-步驟-Blogger 首頁在文章底下，直接顯示回應留言，並自由開 / 關留言預覽（神奇的 ajax 效果！）」，就這樣持續得意了一個禮拜。
但是，人生不如意事十常八九，昨天碰巧在剛重灌好的 windows 底下，用 ie 開自己的網誌，才發現... 這個功能在 ie 裡面沒有作用，只能切換顯示 / 隱藏，卻無法真正的載入外部網址的 html 內容。白話說就是展開以後卻看不到留言。
不僅如此，許多 css 樣式也都沒有作用，整個頁面可以說是慘不忍睹！囧
css 的部份，主要是因為 ie 不支援 rgba(255,255,255,0.5) 格式的顏色設定。rgba() 因為可以指定 red, green, blue 來設定顏色，又可以用 alpha 來設定透明度，製造出漂亮的透明效果，所以，自從在別人的語法裡面看到之後，就一直很開心的使用。可惜，在 ie 裡面，只能用傳統的 #000000 色碼，只能指定顏色，卻不能指定透明度。如果 ie 讀取 rgba() ，會因為看不懂而略過，然後這筆 css 設定就會等於沒有設定。
css 的問題好解決，只要在每個 rgba() 的設定的前一行，加上傳統色碼的設定即可。這樣做，可以讓 ie 讀取傳統色碼，並忽略它看不懂的 rgba() ；而其他先進的瀏覽器，如 firefox 或 chrome，則在讀取傳統色碼後，再次讀取 rgba() 設定，然後將傳統色碼覆蓋過去。
問題比較大的，是用 jQuery .load() 讀取留言的功能。問了 Google 後，找到許多相關討論，其中這篇 Zac 的文章 "jQuery IE7 load url problem" 提到，因為 ie 會在網頁載入的時候製作 cache ，等到第一次載入後，再用 .load() 做載入的動作， ie 不會執行載入，反而會以先前的快取來敷衍我們。~!@#$%^
文章中的幾種解法，我試了，但沒效果，目前還不知道問題出在哪裡。不過，在浪費一堆時間嘗試配合 ie 的特殊行為後，我火大了！老子不管了！ ie 去死啦！就是因為網頁設計者不斷地縱容 ie ，它才會一直死不了！所以我寫了這個功能，奉勸所有 ie 使用者，放下屠刀，立地成佛，苦海無邊，回頭是岸，拋棄石器時代的 ie，改用 21 世紀的先進瀏覽器！
樣板功能：利用 javascript 小工具偵測瀏覽器種類，針對 ie 使用者顯示勸誘訊息，並依照使用者系統語言，自動切換中英版本
正常的畫面：
用 internet explorer 打開本網誌，會在頁首出現這則訊息：
用 internet explorer 打開本網誌，且作業系統語言不是中文的話，則會在頁首出現這則訊息：
步驟如下：
- 在 Blogger 後台的 Design > Page Elements 中，用來放橫向固定頁面的區段，按「新增小工具」，選擇 text 小工具。
- 將小工具標題設定為 en ，內容則是你想顯示的英文版訊息。我的訊息是：
hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you very much! - 儲存後，新增另一個 text 小工具，標題設定成 zh，內容則是像這樣：
嗨，您正在使用 internet explorer。它不符合網頁標準，會導致畫面顯示不正常。拜託改用 mozilla firefox 或者 google chrome，大感謝！^o^ - 儲存後，到 Design > edit HTML ，按 Ctrl + F 搜尋「b:widget id='Text」，會找到類似這樣的文字：
<b:widget id="Text4" locked="false" title="zh" type="Text"/>
<b:widget id="Text3" locked="false" title="en" type="Text"/>
由此可知，中文訊息是對應到 Text4，英文訊息是對應到 Text3。 - 將中英訊息各自對應的 id 記下來後，將我們設定的小工具標題刪除：
<b:widget id="Text4" locked="false" title="zh" type="Text"/>
<b:widget id="Text3" locked="false" title="en" type="Text"/> - 到這裡，我們的訊息就製作完成了。接下來，要先把它們設定成隱藏，必要的時候才出現。
在原頁面，再按一次 Ctrl + F 搜尋「/* Tabs」，會找到像這樣一段文字：
/* Tabs
----------------------------------------------- */
.tabs-outer {
margin: 0 $(tabs.margin.sides) $(tabs.margin.bottom);
} - 在上方插入這段文字：
/* Crosscol
----------------------------------------------- */
#Text3, #Text4 {
display:none;
margin:0;
padding:.5em 1em;
font-size:medium;
color:#333;
background:#dddd66;
border:1px #999 dashed;
}
把 Text3 和 Text4 改成你剛才記下來的那兩個 id。
其中，#333是訊息文字顏色，#dddd66是訊息區塊背景顏色，#999是邊框顏色，你可以改成適合你自己網誌的顏色。 - 到這裡，這兩則訊息被設定成隱藏。
儲存後，回到 Design > Page Elements 頁面，在 footer 區段，按「新增小工具」，選擇 text / javascript。 - 小工具標題不做設定，內容則貼上這段文字：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{
if (navigator.systemLanguage == "zh-tw")
{$("#Text3").toggle();}
else if (navigator.systemLanguage == "zh-cn")
{$("#Text3").toggle();}
else
{$("#Text4").toggle();}
}
</script>
其中第一段綠色底的，是引入 jQuery 的程式碼。如果你的樣板已經有引入了，就不需要重複，不過記得 jQuery 這一段一定要放在樣板中比這段程式碼還前面的地方，才會有作用。
把 Text3 改成你的中文訊息的 id，Text4 則改成英文訊息的 id。 - 儲存後就大功告成啦！
在這麼顯眼的、無所不在的提醒之下，應該可以洗腦不少 ie 使用者！希望我的 Blogger 後台的瀏覽器統計，可以將 ie 降到 20% 以下，目前，從去年五月到現在的統計中， ie 使用者佔了 38%，Firefox 29%，Chrome 22%。
拜託不要用 ie！拜託不要用 ie！拜託不要用 ie！感激不盡 ~>o<~
沒有留言:
張貼留言