页面编码与资源编码不一致处理

解决 HTML 页面与外部资源编码不一致导致的乱码问题

问题

当 HTML 页面使用一种字符编码（如 UTF-8），而引入的外部 JS、CSS 文件使用另一种编码（如 GBK）时，如何避免乱码？

解答

方法一：使用 charset 属性

在 <script> 标签上指定资源的编码：

<!-- 页面是 UTF-8，但 JS 文件是 GBK 编码 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 通过 charset 属性声明外部脚本的编码 -->
  <script src="gbk-script.js" charset="GBK"></script>
</head>
<body>
</body>
</html>

方法二：服务器设置 Content-Type

服务器响应头中指定正确的编码，浏览器会优先使用响应头中的编码：

# Nginx 配置示例
location ~* \.js$ {
    charset GBK;
    # 或者
    add_header Content-Type "application/javascript; charset=GBK";
}

// Node.js 示例
const http = require('http');
const fs = require('fs');

http.createServer((req, res) => {
  if (req.url.endsWith('.js')) {
    // 设置响应头指定编码
    res.setHeader('Content-Type', 'application/javascript; charset=GBK');
    fs.createReadStream('./script.js').pipe(res);
  }
}).listen(3000);

方法三：统一编码（推荐）

最佳实践是将所有文件统一为 UTF-8 编码：

<!DOCTYPE html>
<html>
<head>
  <!-- 页面声明 UTF-8 -->
  <meta charset="UTF-8">
  <!-- 所有资源也使用 UTF-8，无需额外处理 -->
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
</body>
</html>

编码优先级

浏览器确定资源编码的优先级：

1. HTTP 响应头 Content-Type 中的 charset（最高）
2. <script> 或 <link> 标签的 charset 属性
3. 文件的 BOM（字节顺序标记）
4. 页面的编码声明（最低）

检测和转换编码

// 使用 TextDecoder 处理不同编码的数据
async function fetchWithEncoding(url, encoding = 'utf-8') {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  
  // 使用指定编码解码
  const decoder = new TextDecoder(encoding);
  return decoder.decode(buffer);
}

// 获取 GBK 编码的文件内容
fetchWithEncoding('/api/data', 'gbk').then(text => {
  console.log(text); // 正确显示中文
});

关键点

HTTP 响应头的 Content-Type: charset 优先级最高
<script charset="xxx"> 可指定外部脚本编码
统一使用 UTF-8 是最佳实践，避免编码问题
TextDecoder API 可在前端处理不同编码的数据
CSS 文件可用 @charset "UTF-8"; 声明编码（需放在文件首行）