HTML iframe 跨幀操控：父頁面與子頁面通信實現顯示/隱藏

// parent.html
function toggleDiv(id) {
    const el = document.getElementById(id);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}

// city.html (iframe 內)
切換顯示

方案二：postMessage 跨域通用

// parent.html
window.addEventListener('message', e => {
    if (e.data === 'toggle') toggleDiv('targetDiv');
});

// city.html
切換

注意事項

• 同域：可直接訪問 parent.document 或 contentWindow.document。
• 跨域：必須用 postMessage，並驗證 e.origin。
• JS 腳本建議放在 父頁面，子頁面僅觸發事件，降低耦合。
• 避免在 iframe 中操作父頁面 DOM 結構複雜邏輯，傳遞指令由父頁面執行。