好程式設計師web前端教程分享js檔案引用編碼方式
好程式設計師 web 前端教程分享 js 檔案引用編碼方式 , js 外部檔案編碼由這些因素決定: 1. 如果 Apache 有 DefaultCharset ,則 js 檔案解析用伺服器指定的編碼; 2. 如果 PHP header 宣告 charset 為編碼 utf-8 ,則檔案編碼用 utf-8 來解析。 3. 如果以上兩個都為空,頁面編碼由 meta 標籤決定。 4. 如果以上宣告都沒有,則會使用 utf-8 來解析。 5. 如果頁面編碼為 gbk ,而 js 檔案編碼為 utf-8 ,則可以在 js 屬性中定義 charset='utf-8' 。
昨天幫同事解決的一個問題 ,GBK 的頁面 ( 不要問我為什麼 GBK, 因為 GBK, 所以 GBK), 引用了 Google map 的 API, 但是由於 GoogleMap API 返回的 js 指令碼是 utf-8 的 , 所以導致在 IE 下 , 瀏覽器無法正確解析 .
也就是 , 由於伺服器中生成的 HTML 是基於 gbk 編碼的 , 並且由於 Apache 的 DefaultCharset( 後敘 ), 所以導致 IE 會以 gbk 編碼去解析從外部引入的 GoogleMap js, 那肯定是不能正確解釋的 .
瀏覽器判斷一個頁面的編碼有倆個途徑 , 一種是透過 HTTP 響應頭 ,
HTTP/1.x 200 OK
Date: Sat, 18 Oct 2008 21:53:51 GMT
Server: Apache/2.0.52 (Red Hat)
X-Powered-By: PHP/5.3.0alpha2
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html; charset=GB2312
注意最後一行 , 這個是由 HTTP 頭部指明的頁面編碼格式 .
另外一種就是我們常見的 , 也會另很多初學者困惑的 meta:
問題就在於 , 沒有一個統一的標準 , 來指明這倆中方式的優先順序 , 不同的瀏覽器有著不同的優先順序策略 . 這也就是為什麼 , 我們在 FF 下正常瀏覽的頁面 , 在 IE 下會亂碼的原因 .
我之前的文章 Apache 的 Charset 設定中已經介紹過了在 Apache 下設定 DefaultCharset 以後產生的影響 ,
這個問題已經遇到過倆次了,就是頁面中明確指明瞭編碼是 UTF8, 但是顯示是亂碼。
雖然知道解決方法,也知道是 Apache 的原因,但是一直沒有去找其所以然,今天趁機,就研究了一下。
1. 頁面沒有指定 charset , Apache 配置 defaultcharst gbk , 頁面檔案編碼是 utf-8
結果 : 亂碼,使用 wireshark 抓包,發現伺服器返回的 header 中指明瞭 :
Content-Type:text/html;charset=GBK
結論:當頁面沒有指明 charset 的時候, Apache 的 defaultcharset 起作用
2. 頁面指定 charset 為 utf-8, Apache 配置 defaultcharset gbk. 頁面檔案是 utf-8
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="page-header">
測試 Apache DefaultCharset
</div>
</body>
</html>
結果還是出現亂碼。
結論:當 Apache 配置了 DefaultCharset, 將忽略頁面的 charset 申明。
3 PHP header 申明 charset 為 utf8, Apache 配置 defaultcharst gbk, 頁面檔案編碼是 utf8
header("Content-Type:text/html; charset=utf-8");
結果 : 頁面顯示正常。
4 Apache 設定 DefaultCharset off
結果,頁面顯示正常。
翻閱了下 Apache2 的手冊:
AddDefaultCharset 指令
說明當應答內容是 text/plain 或 text/html 時,在 HTTP 應答頭中加入的預設字符集
語法 AddDefaultCharsetOn|Off|charset
預設值 AddDefaultCharsetOff
作用域 serverconfig,virtualhost,directory,.htaccess
覆蓋項 FileInfo
狀態核心 (C)
模組 core
當且僅當應答內容是 text/plain 或 text/html 時,此指令將會在 HTTP 應答頭中加入的
預設字符集。理論上這將覆蓋在文件體中透過 <meta> 標 籤指定的字符集,但是實際
的行為通常取決於使用者瀏覽器的設定。 AddDefaultCharsetOff 將會禁用此功能。
AddDefaultCharsetOn 將啟用 Apache 內部的預設字符集 iso-8859-1 。您
也可以指定使用在 IANA 註冊過的字符集名字 中的另外一個 charset 。
比如說:
AddDefaultCharsetutf-8
也就是說,當 Apache 不指定 defaultcharset 的時候,頁面編碼由頁面自己的 meta 標籤指定。
當 Apache 指定的時候,將忽略頁面中的 meta 標籤指定的編碼 . 但是容許指令碼直接 header 編碼方式給客戶端
最後,還有一個問題沒有得出結果:
當 Apache 和頁面都沒有指定的時候, 又如何?
我在自己的機器上,如果都不指定, 預設還是 utf8
在伺服器端生成 response 內容以後 , 如果指令碼沒有顯示的呼叫 header 傳送編碼申明 , 那麼 Apache 就會根據 DefaultCharset 生成響應 HTTP 頭部的 Content-type 中的 charset 欄位 ;
反之如果指令碼顯示申明瞭 , 那麼就會按照指令碼 header 申明中的 charset 設定 .
這樣到了瀏覽器端以後 , 瀏覽器就可以根據 HTTP 頭的 charset 申明來按照特定的編碼格式解析獲取到的 HTML 程式碼 , 但現在的問題是 , 頁面是 GBK 的 , 但是引用的外部 js 檔案是 utf8 編碼的 , 這樣的情況 , 我們可以使用一個 script 的屬性來解決 :
<script language='javascript' src='....' charset='utf-8'></script>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2640667/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端分享CSS檔案引用的最優方法程式設計師Web前端CSS
- 好程式設計師web前端教程分享js閉包程式設計師Web前端JS
- 好程式設計師web前端教程分享js模板模式程式設計師Web前端JS模式
- 好程式設計師web前端教程分享js reduce方法使用教程程式設計師Web前端JS
- 好程式設計師web前端教程分享JS基礎知識程式設計師Web前端JS
- 好程式設計師web前端教程分享引用型別與基本型別程式設計師Web前端型別
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端教程分享Vue.js面試題程式設計師Web前端Vue.js面試題
- 好程式設計師web前端教程之JS繼承實現方式解析程式設計師Web前端JS繼承
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享js中的模組化二程式設計師Web前端JS
- 好程式設計師web前端教程分享js中的模組化一程式設計師Web前端JS
- 好程式設計師web前端教程分享CSS預編譯器的再次理解程式設計師Web前端CSS編譯
- 好程式設計師Web前端教程分享Vue學習心得程式設計師Web前端Vue
- 好程式設計師web前端教程分享javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師web前端教程分享JavaScript簡寫方法程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享JavaScript開發技巧程式設計師Web前端JavaScript
- 好程式設計師web前端教程之Node.Js流程程式設計師Web前端Node.js
- 好程式設計師web前端分享js剪下板Clipboard.js 使用程式設計師Web前端JS
- 好程式設計師web前端教程:字串程式設計師Web前端字串
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- 好程式設計師web前端教程分享前端javascript練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端 javascript 練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享web前端入門基礎知識程式設計師Web前端
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端分享js實現實戰案例程式設計師Web前端JS
- 好程式設計師web前端培訓分享CSS定位的教程程式設計師Web前端CSS
- 好程式設計師web前端教程分享JavaScript Math(算數)物件程式設計師Web前端JavaScript物件
- 好程式設計師web前端學習教程之Node Js流程程式設計師Web前端JS
- 好程式設計師web前端分享css初始化程式碼程式設計師Web前端CSS
- 好程式設計師web前端教程分享前端javascript練習題之promise程式設計師Web前端JavaScriptPromise
- 好程式設計師web前端分享應該怎樣學好web前端?程式設計師Web前端
- 好程式設計師web前端分享web前端入門知識程式設計師Web前端
- 好程式設計師web前端分享JS引擎的執行機制程式設計師Web前端JS
- 好程式設計師web前端分享web測試之Js中的變數程式設計師Web前端JS變數
- 好程式設計師web前端教程分享預設行為和拖拽思路程式設計師Web前端