HTML 網頁中透過 JavaScript 呼叫 PHP 程式實作動態計數器

許多網站的統計代碼採用 JavaScript 呼叫 PHP 的方式輸出，這樣可讓靜態 HTML 頁面也能顯示動態資料。本文以簡單的網頁計數器為例，示範完整實作流程。

核心原理

PHP 腳本輸出 document.write() JavaScript 代碼，HTML 頁面透過 <script src="counter.php"></script> 引入，瀏覽器執行 JS 即可顯示計數結果。

PHP 計數器實作（FileCount.php）

<?php
$countfile = "num.txt";

// 嘗試以讀寫模式開啟檔案
if (($fp = fopen($countfile, "r+")) == false) {
    printf("開啟檔案 %s 失敗!", $countfile);
    exit;
} else {
    // 讀取目前計數（最多 10 位數）
    $count = fread($fp, 10);
    $count = $count + 1;  // 計數遞增
    fclose($fp);
    
    // 以覆寫模式開啟並寫入新計數
    $fp = fopen($countfile, "w+");
    fwrite($fp, $count);
    fclose($fp);
    
    // 關鍵：輸出 JavaScript 代碼而非純文字
    echo 'document.write("'.$count.'")';
}
?>

前置準備

1. 將上述代碼儲存為 FileCount.php
2. 在同目錄下建立空白文字檔 num.txt（初始內容可為 0）
3. 確保 PHP 程式對 num.txt 有讀寫權限

HTML 頁面引入方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>網頁計數器示範</title>
</head>
<body>
    <h1>歡迎光臨</h1>
    <p>您是第 
        <script src="FileCount.php"></script>
     位訪客</p>
</body>
</html>

進階改良建議

• 防止重複計數：搭配 Session/Cookie 判斷同一用戶同一 Session 僅計數一次
• 效能優化：高流量網站建議改用 Redis/Memcached 替代文字檔儲存
• 安全性：檔案路徑勿直接暴露，建議放在 Web 根目錄外
• 編碼處理：PHP 檔案儲存為 UTF-8 無 BOM 格式，避免輸出亂碼

同樣原理的其他應用

• 即時線上人數顯示
• 廣告輪播系統（PHP 輸出 JS 切換廣告）
• 動態推薦內容區塊
• 跨域資料嵌入（JSONP 先驅模式）

注意：此為教學示範用簡易實作，生產環境請加入完善的錯誤處理、鎖機制（防止並發寫入衝突）與快取策略。