一、靜態(tài) JS 文件引入（基礎(chǔ)推薦）

將 JS 文件放入項(xiàng)目 static/js/ 目錄，通過(guò) Flask 的 url_for 在 HTML 模板中動(dòng)態(tài)引用：

<!-- templates/index.html -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

適用場(chǎng)景：常規(guī)腳本加載（如頁(yè)面初始化邏輯）。

二、外部 CDN 或遠(yuǎn)程 JS 腳本

直接在模板中引入互聯(lián)網(wǎng)上的 JS 資源，無(wú)需 Flask 處理路徑：

<script src="https://cdn.example.com/library.js"></script>

適用場(chǎng)景：使用第三方庫(kù)（如 jQuery、React/Vue 的 CDN 版本）。

三、動(dòng)態(tài)數(shù)據(jù)傳遞至 JS

1. 模板變量嵌入

通過(guò) Jinja2 將 Flask 變量直接注入 JS 代碼：

<script>
  const serverData = {{ flask_variable | tojson | safe }};
  console.log(serverData.message);
</script>

注意：需用 | tojson | safe 避免 XSS 風(fēng)險(xiǎn)，適用于簡(jiǎn)單數(shù)據(jù)傳遞。

2. API 接口 + AJAX

Flask 端 提供 JSON API：

@app.route('/api/data')
def get_data():
    return jsonify({"key": "value"})

JS 端 動(dòng)態(tài)獲取數(shù)據(jù)：

fetch('/api/data')
  .then(res => res.json())
  .then(data => executeFunction(data));

適用場(chǎng)景：實(shí)時(shí)數(shù)據(jù)更新、避免頁(yè)面刷新。

四、觸發(fā)特定 JS 函數(shù)

1. 事件綁定

在模板中直接綁定前端事件：

<button onclick="handleClick()">執(zhí)行</button>

2. AJAX 響應(yīng)回調(diào)

Flask 處理后返回指令，JS 根據(jù)響應(yīng)調(diào)用函數(shù)：

// JS 發(fā)送請(qǐng)求
fetch('/process')
  .then(res => res.json())
  .then(result => {
      if (result.success) specificFunction();
  });

3. WebSocket 實(shí)時(shí)通信

使用 Flask-SocketIO 庫(kù)實(shí)現(xiàn)后端主動(dòng)觸發(fā)前端函數(shù)：

# Flask 端
from flask_socketio import SocketIO, emit
socketio = SocketIO(app)

@socketio.on('trigger')
def send_command():
    emit('execute', {'func': 'updateUI'})

// JS 端
socket.on('execute', (data) => window[data.func]());

適用場(chǎng)景：實(shí)時(shí)通知、聊天應(yīng)用等。

五、與前端框架（React/Vue）集成

1. 獨(dú)立構(gòu)建 + 靜態(tài)引入

將 React/Vue 構(gòu)建后的 app.js 放入 static 目錄

在模板中引用：

<div id="root"></div>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>

優(yōu)勢(shì)：符合 CSP 安全策略，避免內(nèi)聯(lián)腳本問(wèn)題。

2. 動(dòng)態(tài)數(shù)據(jù)注入

通過(guò) window 對(duì)象傳遞初始數(shù)據(jù)：

<script>
  window.INIT_STATE = {{ initial_data | tojson | safe }};
</script>
<!-- 再引入框架 JS -->

六、關(guān)鍵注意事項(xiàng)

1.緩存問(wèn)題：開(kāi)發(fā)時(shí)在 JS URL 后加時(shí)間戳防止緩存：

<script src="...main.js?v={{ timestamp }}"></script>

2.安全風(fēng)險(xiǎn)：

• 避免直接嵌入用戶數(shù)據(jù)（用 tojson 轉(zhuǎn)義）
• 啟用 CSP 頭限制腳本來(lái)源

3.調(diào)試工具：使用瀏覽器開(kāi)發(fā)者工具（F12）檢查 JS 加載/錯(cuò)誤。

方案選擇建議

通過(guò)靈活組合以上方法，F(xiàn)lask 可高效執(zhí)行指定 JS 腳本，覆蓋從基礎(chǔ)功能到實(shí)時(shí)交互的各類(lèi)需求。重點(diǎn)在于根據(jù)場(chǎng)景選擇安全、可維護(hù)的方案，并善用 Flask 的路由、模板與數(shù)據(jù)傳遞機(jī)制。

以上就是Flask應(yīng)用中執(zhí)行指定JavaScript腳本的6種方法的詳細(xì)內(nèi)容，更多關(guān)于Flask執(zhí)行JavaScript腳本的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論