同源 window.open
// 頁面 A
const winB = window.open('pageB.html');
winB.onload = () => {
const name = winB.document.getElementById('btnId').name;
console.log(name);
};
跨域/獨立頁面：數據傳遞機制
| 機制 | 適用 | 範例 |
|---|
| URL 參數 | 簡單跳轉 | `pageB.html?btnName=submit` |
| localStorage / sessionStorage | 同源不同標籤 | `localStorage.setItem('btnName', 'submit')` |
| postMessage | 跨域 iframe/window | `win.postMessage({btnName: 'submit'}, '*')` |
| Cookie | 跨子域 | `document.cookie = 'btnName=submit; domain=.example.com'` |
| IndexedDB | 大量結構化數據 | 異步存取，支援索引 |
| 後端 API | 完全獨立/持久化 | 頁面 A 寫入，頁面 B 讀取 |
最佳實踐
- **按鈕 name 屬性屬於靜態 HTML**，若頁面 B 固定，頁面 A 可直接硬編碼或從配置讀取，無需運行時獲取。
- 若需動態獲取，**postMessage + 指定 origin** 最安全通用。
