基於 iframe 的 HTML 表單無刷新提交實現方案

方案一：隱藏 iframe 作為表單目標

將 <form> 的 target 指向隱藏的 <iframe>，提交後頁面不跳轉。

<iframe name="formsubmit" style="display:none;"></iframe>
<form action="form.php" method="POST" name="formphp" target="formsubmit">
  <input type="text" name="uname" id="uname" />
  <input type="password" name="pwd" id="pwd" />
  <input type="submit" value="登入" />
</form>

後端 form.php 直接輸出 JavaScript 彈窗提示結果：

<?php
if(empty($_POST['uname']) || empty($_POST['pwd'])) {
    echo '<script>alert("用戶名或密碼為空!");</script>'; exit;
}
if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456') {
    echo '<script>alert("用戶名或密碼不正確!");</script>'; exit;
}
echo '<script>alert("登入成功!");</script>';

方案二：iframe onload 事件回調 + JSON 回傳

監聽 iframe.onload，解析返回的 JSON 進行交互邏輯（如登入成功跳轉）。

<iframe name="myiframe" style="display:none;" onload="iframeLoad(this);"></iframe>
<form action="form.php" target="myiframe" method="POST">...</form>

<script>
function iframeLoad(iframe) {
    var doc = iframe.contentWindow.document;
    var html = doc.body.innerHTML;
    if(html != '') {
        var obj = eval("(" + html + ")");
        if(obj.status < 1) { alert(obj.msg); }
        else { alert(obj.msg); window.location.href = "https://www.baidu.com"; }
    }
}
</script>

後端返回標準 JSON：

<?php
$msg = array('status'=>0, 'msg'=>'');
$user = array('name'=>'jack', 'pwd'=>'jack2014');
if($name != $user['name']) { $msg['msg']='該用戶未註冊!'; }
else if($pwd != $user['pwd']) { $msg['msg']='密碼錯誤!'; }
else { $msg['msg']='登入成功!'; $msg['status']=1; }
echo json_encode($msg);

優缺點對比

現代專案建議改用 fetch/XMLHttpRequest (AJAX) 或 FormData 實現真正的無刷新體驗。