ASP.NET 結合 HTML/JavaScript 實現無刷新跨域資料提交：iframe + form post 跨框架通訊技巧

場景與限制

• A 域頁面 `a.html` 包含 iframe 載入 B 域頁面 `b.html`。
• 需在 A 域按鈕點擊時，將 A 域輸入值傳給 B 域頁面的輸入框，**不刷新 B 頁面**。
• B 域為靜態 HTML，無法接收跨域 POST；若為 `.aspx` 可直接 POST 但會刷新。
• 瀏覽器同源策略禁止跨域 DOM 存取，但**允許跨域 form 提交至 iframe**。

核心原理：跨框架 Form Post + 父框架腳本回呼

1. A 域 `a.html` 表單 `target="frmPost"` 提交至 B 域 `post.aspx` (隱藏 iframe)。
2. B 域 `main.aspx` 為 frameset，包含 `frmMain` (顯示 `b.html`) 與 `frmPost` (接收 post)。
3. `post.aspx` 接收資料後，輸出 JavaScript 呼叫 `parent.frames["frmMain"].操作DOM()`，**同域操作合法**。

完整程式碼架構

A 域 a.html

<form action="https://b.example.com/post.aspx" method="post" target="frmPost">
  <input name="cmd" type="text" size="20" />
  <input type="submit" value="傳送至 B 域" />
</form>
<iframe src="https://b.example.com/main.aspx" style="width:100%;height:400px;"></iframe>

B 域 main.aspx (Frameset)

<%@ Page Language="C#" %>
<frameset rows="*,0" framespacing="0" border="0" frameborder="no">
  <frame src="b.html" name="frmMain" />
  <frame src="post.aspx" name="frmPost" />
</frameset>

B 域 post.aspx (接收並回呼)

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        string cmd = Request.Form["cmd"];
        if (!string.IsNullOrEmpty(cmd))
        {
            // 輸出腳本操作同域 frmMain (b.html)
            Response.Write($@"
<script>
  if (parent && parent.frames['frmMain']) {{
    var target = parent.frames['frmMain'].document.getElementById('targetInput');
    if (target) target.value = '{cmd.Replace("'", "\\'")}';
  }}
</script>");
        }
    }
</script>

B 域 b.html (被操作頁面)

<input type="text" id="targetInput" placeholder="等待 A 域資料..." />

關鍵技術點

優缺點分析

• 優點：無需伺服器端 Proxy、不刷新目標頁面、相容舊瀏覽器 (IE6+)。
• 缺點：需控制 B 域部署 `main.aspx`/`post.aspx`；Frameset 已廢棄 (HTML5 不建議)；安全性依賴 B 域信任 A 域提交；無法直接取得回傳值 (單向)。

現代替代方案

1. postMessage API (HTML5)：`iframe.contentWindow.postMessage(data, 'https://b.example.com')`，雙向、安全、標準化。
2. CORS + Fetch/XHR：B 域設定 `Access-Control-Allow-Origin: https://a.example.com`，A 域直接 `fetch` POST。
3. JSONP：僅支援 GET，B 域回呼 `callback({result:...})`。
4. SignalR / WebSocket：雙向即時通訊，適合高頻互動。

總結

iframe + form post + frameset 回呼是早期跨域無刷新提交的經典技巧，利用「允許跨域提交」與「同域框架互通」特性繞過同源策略。現代專案首選 **postMessage** 或 **CORS**，標準、安全、無需額外頁面結構。理解此技巧有助於維護舊系統與理解跨域通訊演進史。