跨域 iframe 高度自適應：同主域 document.domain 方案

騰訊評論 iframe 方案分析

父頁 ent.qq.com，iframe www.qq.com/coral/...，均屬 qq.com 主域。

核心技術：document.domain 放寬

// 父頁
document.domain = 'qq.com';

// iframe 內頁
document.domain = 'qq.com';

設置後，雙方視為同源，父頁可直接訪問 iframe.contentWindow.document.body.scrollHeight 並動態設置 iframe.style.height。

完整流程

1. 父頁創建 iframe，監聽 load 事件。
2. iframe 載入完成，執行 document.domain = 'qq.com'。
3. 父頁輪詢或監聽 postMessage 獲取高度：

// 父頁
iframe.onload = () => {
    try {
        iframe.contentDocument.domain = 'qq.com';  // 雙向設置
        setInterval(() => {
            const h = iframe.contentDocument.body.scrollHeight;
            iframe.style.height = h + 'px';
        }, 300);
    } catch (e) { console.error('跨域失敗', e); }
};

現代替代：postMessage (無需同主域)

// 父頁
window.addEventListener('message', e => {
    if (e.origin !== 'https://www.qq.com') return;
    if (e.data.type === 'resize') iframe.style.height = e.data.height + 'px';
});

// iframe 內頁
setInterval(() => {
    parent.postMessage({type: 'resize', height: document.body.scrollHeight}, 'https://ent.qq.com');
}, 300);

適用場景對比

最佳實踐

• 新項目優先 postMessage，避免依賴棄用的 document.domain。
• 協議定義：{type:'resize', height:123}，驗證 e.origin 防注入。
• iframe 內容動態變化時（如加載更多評論）主動發送高度。