您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 更多程式設計知識

iframe 模擬 AJAX 表單提交：無刷新上傳與跨域回呼實戰

編輯：更多程式設計知識

在不支援 FormData 的舊環境，或需跨域提交表單時，利用 <form target="iframeName"> 搭配隱藏 <iframe> 可實現「無刷新提交、伺服器端回呼前端」的效果。本文提供最精簡可用範例。

父頁面 a.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>iframe AJAX 示範</title>
</head>
<body>
  <form action="b.php" method="post" target="formTarget">
    <input type="text" name="username" placeholder="輸入帳號">
    <input type="submit" value="提交">
    <span id="msg"></span>
  </form>
  <iframe name="formTarget" id="formTarget" style="display:none"></iframe>
</body>
</html>

伺服器端 b.php

<?php
$username = isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '';
echo "<script>
  parent.document.getElementById('msg').innerHTML = 'iframe 式 AJAX 呼叫成功!';
  alert('您輸入的是：$username');
  setTimeout(function(){ parent.window.location.reload(); }, 3000);
</script>";
?>

運作流程

使用者填寫表單點擊提交。
瀏覽器在隱藏 iframe 中載入 b.php 回傳的 HTML。
iframe 內的 <script> 執行，透過 parent.document 存取父頁面 DOM，更新提示訊息、彈出 alert、3 秒後重整父頁面。

關鍵限制與替代方案

限制	影響	現代替代
同源策略	父頁與 b.php 必須同域，否則 `parent.document` 存取被阻擋	CORS + fetch / postMessage
無法獲取上傳進度	大檔上傳無進度條	XHR2 / fetch + ReadableStream
回呼耦合度高	伺服器端需輸出特定 JS 代碼	統一 JSON API，前端自行渲染
歷史紀錄汙染	iframe 載入會產生瀏覽歷史	history.replaceState 或 sandbox 屬性

跨域擴充：postMessage 版

若 b.php 部署於不同域，父頁改用 window.addEventListener('message', ...) 監聽，子頁面 parent.postMessage({type:'result', data:...}, 'https://parent.domain') 發送訊息，雙方驗證 event.origin 確保安全。