JavaScript 與 Java Applet 互操作實戰：雙向通訊與最佳實踐

前言：強強聯手的歷史經典

在 Web 早期，Java Applet 提供強大圖形/運算能力，JavaScript 擅長 DOM 操作與事件響應。兩者結合可實現「JavaScript 做協調，Applet 做重活」的混合架構。雖 Applet 已退役，但其跨語言互操作模式（如 JS 呼叫 Java、Java 回呼 JS）在 WebAssembly、JavaFX WebView、Electron 混合應用中依然具參考價值。

核心機制：LiveConnect (JS ↔ Java)

瀏覽器提供 document.appletName 存取 Applet 的 public 欄位與方法。前提：成員必須宣告為 public。

模式一：JS 直接操作 Applet 欄位 (不推薦)

Java 端

public class HelloWorld1 extends Applet {
    public String text = "Hello World!";  // 必須 public
    public void paint(Graphics g) { g.drawString(text, 20, 20); }
}

HTML + JS

<applet code="HelloWorld1.class" width="100" height="28" name="app"></applet>
<input type="button" value="請點擊這裡" onclick="SetText()">

<script>
function SetText() {
    document.app.text = "世界你好!";   // 直接改欄位
    document.app.repaint();            // 必須手動觸發重繪
}
</script>

缺點

• 破壞封裝，Applet 內部狀態被外部隨意修改
• 呼叫端需知悉內部繪製機制 (需手動 repaint())
• 無法驗證輸入、觸發副作用邏輯

模式二：JS 呼叫 Applet public 方法 (推薦)

Java 端：提供封裝良好的 API

public class HelloWorld2 extends Applet {
    private String text = "Hello World!";  // 封裝為 private
    
    public void paint(Graphics g) { g.drawString(text, 20, 20); }
    
    // 對外開放的安全介面
    public void setString(String newText) {
        this.text = newText;
        repaint();  // 內部自動處理重繪
    }
}

HTML + JS

<applet code="HelloWorld2.class" width="100" height="28" name="app"></applet>
<script>
function SetText() {
    document.app.setString("世界你好!");  // 呼叫方法，無需手動 repaint
}
</script>

進階模式：Java 回呼 JavaScript (JSObject)

需引入 plugin.jar (JRE/lib) 或 deploy.jar，使用 netscape.javascript.JSObject：

import netscape.javascript.JSObject;

public class CallerApplet extends Applet {
    public void callJS() {
        JSObject window = JSObject.getWindow(this);
        // 呼叫全域 JS 函數
        window.call("javaCallback", new Object[] {"來自 Java 的訊息"});
        // 存取 JS 物件屬性
        window.setMember("javaData", new String[] {"A", "B", "C"});
        // 執行 JS 代碼片段
        window.eval("console.log('Java 執行 JS 代碼')");
    }
}

HTML 端

<script>
function javaCallback(msg) { alert("Java 說：" + msg); }
</script>
<applet code="CallerApplet.class" name="caller" mayscript="true"></applet>
<button onclick="document.caller.callJS()">觸發 Java 回呼 JS</button>

關鍵屬性：<applet mayscript="true"> 必須啟用腳本權限。

資料類型對應表

安全性與權限

• 沙箱限制：未簽名 Applet 只能存取同源資源、無法讀寫本地檔案
• 簽名 Applet：經用戶授權後擁有完整權限 (簽名憑證、JNLP)
• mayscript：控制 JS ↔ Java 雙向呼叫開關
• 同源策略：JS 僅能存取同域名/端口/協議下的 Applet

現代替代方案對照

最佳實踐總結

1. 封裝為 public 方法，勿暴露欄位
2. Applet 內部自管副作用 (如 repaint())
3. 啟用 mayscript 並簽名以獲得完整權限
4. 定義清晰介面契約：方法名、參數、回呼約定
5. 錯誤處理：JS 呼叫 Java 捕獲 JSException，Java 回呼 JS 用 try-catch 包裹 eval/call
6. 新專案避免 Applet：改用上述現代方案

結語

JavaScript 與 Java Applet 的互操作曾是富客戶端開發的標配。理解其「封裝介面、雙向呼叫、權限模型」核心模式，有助於掌握現代混合技術棧 (WebAssembly、JavaFX、Electron) 中的跨語言協作精髓。技術棧更迭，工程思想永存。