PHP 文字計數器跨域部署：JavaScript document.write 實現遠端引用

核心問題

PHP 計數器只能運行於支援 PHP 的主機。若需在「不支援 PHP 的靜態空間/部落格/論壇」顯示計數，需透過 JavaScript 跨域載入。

實作原理

1. 計數器邏輯放於支援 PHP 的主機 counter.php
2. 執行計數後輸出 document.write(數字)
3. 目標頁面嵌入 <script src="https://php-host/counter.php"></script>

計數器核心程式 counter.php

<?php
// 設定
$counterFile = __DIR__ . '/counter.txt';

// 初始化
if (!file_exists($counterFile)) {
    file_put_contents($counterFile, '0', LOCK_EX);
}

// 讀取、遞增、寫回 (檔案鎖定防併發)
$fp = fopen($counterFile, 'c+');
if (flock($fp, LOCK_EX)) {
    $num = (int)fread($fp, filesize($counterFile));
    $num++;
    ftruncate($fp, 0);
    rewind($fp);
    fwrite($fp, (string)$num);
    flock($fp, LOCK_UN);
}
fclose($fp);

// 輸出 JS 碼
header('Content-Type: application/javascript; charset=utf-8');
echo "document.write($num);";
?>

目標頁面嵌入方式

<!-- 任意 HTML 頁面 -->
<script src="https://your-php-host.com/counter.php"></script>
次瀏覽

關鍵技術細節

• MIME 類型：application/javascript 確保瀏覽器正確解析
• 字元編碼：輸出 charset=utf-8 避免中文亂碼
• 檔案鎖定：flock(LOCK_EX) 防止高併發下計數遺失
• 快取控制：可加 header('Cache-Control: no-cache, must-revalidate'); 確保即時更新
• 跨域：<script src> 天然支援跨域，無 CORS 問題

進階改良方向

1. JSONP 格式：輸出 callback(123); 供前端進一步處理 (如動畫、多處顯示)
2. 資料庫儲存：MySQL/Redis 替代文字檔，支援叢集部署
3. 防刷機制：Cookie/IP/Session 判斷唯一訪客，避免 F5 刷新刷計數
4. 非同步載入：<script async src=...> 不阻塞頁面渲染

安全性提醒

• 輸出純數字給 document.write 較安全，若輸出 HTML 片段需嚴格過濾 XSS
• 計數器檔案權限設為 600，目錄 700，防止直接下載
• 考慮加入 Referer 檢查，限制僅允許授權域名引用