JavaScript 跨頁面建立元素：透過 URL 參數或 localStorage 傳遞指令

核心限制

瀏覽器同源策略禁止直接操作不同頁面的 DOM。a.html 無法直接在 b.html 建立 <div>。

方案一：URL 參數傳遞 (最簡單)

// a.html 按鈕點擊
document.getElementById('btn').onclick = function() {
    location.href = 'b.html?createDiv=1'; // 攜帶指令參數
};

// b.html 載入時檢查
window.onload = function() {
    const params = new URLSearchParams(location.search);
    if (params.get('createDiv') === '1') {
        const div = document.createElement('div');
        div.textContent = '從 a.html 建立';
        document.body.appendChild(div);
    }
};

方案二：localStorage 持久化 (支援多頁面狀態)

// a.html
localStorage.setItem('action', 'createDiv');
location.href = 'b.html';

// b.html
window.addEventListener('storage', function(e) { // 同源不同頁面同步
    if (e.key === 'action' && e.newValue === 'createDiv') {
        createDiv();
    }
});
// 或直接 onload 讀取
if (localStorage.getItem('action') === 'createDiv') {
    createDiv();
    localStorage.removeItem('action'); // 執行一次清除
}

方案三：共享 Worker / Broadcast Channel (進階)

// 適用於多標籤頁即時同步
const channel = new BroadcastChannel('app-channel');
channel.postMessage({type: 'CREATE_DIV'});

// 接收端
channel.onmessage = (e) => {
    if (e.data.type === 'CREATE_DIV') createDiv();
};

選擇建議

安全提醒

• 嚴格驗證參數內容，防止 XSS 注入。
• 敏感操作需後端驗證權限，前端僅作 UI 提示。