EasyTools 元件庫深度解析：IframeAdapt 自適應高度與 SubmitPanel 表單提交增強

IframeAdapt：解決 iframe 高度自適應跨域難題

應用場景

• 主頁面嵌入子系統 (不同應用程式/域名) 的 iframe。
• 子頁面內容動態變化 (AJAX 展開/表單驗證錯誤/分頁切換) 導致高度改變。
• 需**無縫整合**，避免雙滾動條、內容截斷、白邊。

核心原理：postMessage + 輪詢雙模式

1. **現代瀏覽器**：子頁面載入後，定時 parent.postMessage({height: document.body.scrollHeight}, '*')；父頁面監聽 message 事件即時調整 iframe style.height。
2. **舊版 IE (≤9)**：不支援 postMessage，父頁面輪詢 iframe.contentWindow.document.body.scrollHeight (同域) 或代理頁面 (跨域)。
3. **縮回處理**：偵測高度變小同樣觸發更新，避免「只長不短」殘留白邊。

控制項屬性

使用範例

<ext:IframeAdapt ID="IframeAdapt1" runat="server"
    ParentIframeId="ifrMain" OffsetHeight="10" />
<iframe id="ifrMain" src="ChildSystem.aspx" frameborder="0" style="width:100%;" />

放置於**母版頁或主頁面**，單一控制項即可管理頁面上所有同域/跨域 iframe 高度。

SubmitPanel：解決 ASP.NET 單一 Form 標籤限制

背景痛點

ASP.NET WebForms **整頁僅允許一個 <form runat="server">**，導致：

• 無法在頁面不同區塊放置獨立的 <form> 提交到不同 URL。
• 第三方整合 (支付網關、OAuth、SAML) 需 POST 到外部端點，需繞過伺服器端 Form。
• 按鈕點擊後需觸發特定伺服器端事件，但預設僅觸發 Form 預設按鈕。

解決方案：虛擬 Panel + 目標按鈕綁定

1. 將需提交的控制項包裹在 SubmitPanel 內。
2. 設定 ButtonId 指定觸發提交的按鈕 (可為 asp:Button/LinkButton/ImageButton)。
3. 控制項輸出隱藏 <input type="submit"> 並綁定 formaction/formmethod/formtarget (HTML5)，或注入 JavaScript 模擬提交。

控制項屬性

使用範例：整合支付寶跳轉

<ext:SubmitPanel ID="spAlipay" runat="server" ButtonId="btnPay" PostUrl="https://openapi.alipay.com/gateway.do" Target="_blank">
    <asp:HiddenField ID="hfOrderId" runat="server" />
    <asp:HiddenField ID="hfAmount" runat="server" />
    <asp:Button ID="btnPay" runat="server" Text="立即支付" OnClick="btnPay_Click" />
</ext:SubmitPanel>

protected void btnPay_Click(object sender, EventArgs e)
{
    hfOrderId.Value = "20240101001";
    hfAmount.Value = "99.00";
    // SubmitPanel 會在按鈕 Click 後自動將面板內所有輸入欄位 POST 至 PostUrl
}

效能與相容性

總結

• IframeAdapt：一行標籤解決 iframe 高度自適應跨域難題，支援動態縮放、無閃爍、零維護。
• SubmitPanel：突破 WebForms 單 Form 限制，實現區塊級多目標提交、外部整合、驗證群組隔離。
• 兩者皆為**純伺服器端控制項**，無需手寫 JavaScript，部署即用，極大提升開發效率。