JSP 頁面中不同 Div 區塊的 JavaScript 函數相互調用實現方法

問題描述

JSP 頁面包含三個 Div（a、b、c），需要在 Div a 的 JavaScript 中調用 Div b 的函數，Div b 再調用 Div c 的函數。

解決方案

JavaScript 函數默認屬於全局作用域（window 對象），只要在頁面加載時已經定義，無論寫在哪個 <script> 標籤或哪個 Div 內部，都可以直接通過函數名相互調用。

代碼示例

<div id="a">
    <script>
        function a() {
            alert("a");
            b(); // 直接調用 b
        }
    </script>
    <button onclick="a()">觸發 a</button>
</div>

<div id="b">
    <script>
        function b() {
            alert("b");
            c(); // 直接調用 c
        }
    </script>
</div>

<div id="c">
    <script>
        function c() {
            alert("c");
        }
    </script>
</div>

關鍵點

• 函數聲明會被提升到作用域頂部，因此調用順序不受定義位置影響。
• 若使用函數表達式（var b = function() {...}），則必須保證定義代碼在調用前執行。
• 為避免全局污染，實際項目建議採用模塊化（ES6 Module、RequireJS、Webpack 等）管理依賴。

進階：模塊化寫法

<script type="module">
    import { b } from './b.js';
    import { c } from './c.js';
    export function a() { b(); }
</script>