网站页面顶部出现空白行字符的原因以及完美解决办法
有时候网页头部会出现一个空白行,查看源码发现body开头初有一个非法字符
,原因是页面的编码是UTF-8 + BOM。
UTF-8 + BOM编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。对于一般的文件,这样并不会产生什么麻烦。但对于 PHP来说,BOM是个大麻烦。因为PHP并不会忽略BOM,所以在读取、包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分。根据嵌入式语言的特点,这串字符将被直接执行(显示)出来,即我们看到的()字符。
解决办法
找到出现
字符的相关页面(php,html,css,js等),查看页面编码方式,如果是UTF-8 + BOM编码方式,则使用notepad++或其他工具存储为"UTF-8无BOM"即可解决。
如果文件比较多,不知道从何入手时,这时可使用下面的方法来实现。
将下面代码保存为a.php
(随意命名)文件放到根目录下,然后运行一下这个文件,即可自动清储格式。
补充:如果是在服务器中实现清除,为了安全起见,首先备份下再操作,另外请确保文件有写入权限,否则无法清除。
<?php
// 设定你要清除BOM的根目录(会自动扫描所有子目录和文件)
$HOME = dirname(__FILE__);
// 如果是Windows系统,修改为:$WIN = 1;
$WIN = 0;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UTF8 BOM 清除器</title>
<style>
body { font-size: 10px; font-family: Arial, Helvetica, sans-serif; background: #FFF; color: #000; }
.FOUND { color: #F30; font-size: 14px; font-weight: bold; }
</style>
</head>
<body>
<?php
$BOMBED = array();
RecursiveFolder($HOME);
echo '<h2>这些文件有UTF8 BOM,但我清理了它们::</h2><p class="FOUND">';
foreach ($BOMBED as $utf) { echo $utf ."<br />\n"; }
echo '</p>';
// 递归扫描
function RecursiveFolder($sHOME) {
global $BOMBED, $WIN;
$win32 = ($WIN == 1) ? "\\" : "/";
$folder = dir($sHOME);
$foundfolders = array();
while ($file = $folder->read()) {
if($file != "." and $file != "..") {
if(filetype($sHOME . $win32 . $file) == "dir"){
$foundfolders[count($foundfolders)] = $sHOME . $win32 . $file;
} else {
$content = file_get_contents($sHOME . $win32 . $file);
$BOM = SearchBOM($content);
if ($BOM) {
$BOMBED[count($BOMBED)] = $sHOME . $win32 . $file;
// 移出BOM信息
$content = substr($content,3);
// 写回到原始文件
file_put_contents($sHOME . $win32 . $file, $content);
}
}
}
}
$folder->close();
if(count($foundfolders) > 0) {
foreach ($foundfolders as $folder) {
RecursiveFolder($folder, $win32);
}
}
}
// 搜索当前文件是否有BOM
function SearchBOM($string) {
if(substr($string,0,3) == pack("CCC",0xef,0xbb,0xbf)) return true;
return false;
}
?>
</body>
</html>
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »