Khi nhúng một tài liệu khác vào trang chủ thông qua thẻ <iframe>, thuộc tính chiều cao thường không thay đổi mặc dù nội dung bên trong có thể dài hoặc ngắn tùy ý. Để giải quyết vấn đề này, chúng ta cần áp dụng cơ chế đo lường kích thước thực tế từ tài liệu nội bộ và gán ngược lại cho khung chứa bằng JavaScript.

Giải pháp dưới đây sử dụng vòng lặp định kỳ để kiểm tra chiều cao cuộn của nội dung bên trong và cập nhật chiều cao của iframe tương ứng, đảm bảo hiển thị đầy đủ mà không bị cắt gọn hay xuất hiện thanh cuộn thừa.

// Khởi tạo hàm điều chỉnh kích thước
function setupResponsiveIframe(frameId, minH) {
    var element = document.getElementById(frameId);
    if (!element) return;

    // Tham chiếu đến document bên trong iframe
    function getFrameDoc(winObj) {
        return winObj ? (winObj.document || winObj.contentDocument) : null;
    }

    // Cập nhật chiều cao
    function adjustHeight() {
        try {
            var innerWin = element.contentWindow;
            var doc = getFrameDoc(innerWin);
            
            if (!doc) return;

            // Đo các giá trị chiều cao tiềm năng
            var scrollBody = doc.body ? doc.body.scrollHeight : 0;
            var scrollDoc = doc.documentElement ? doc.documentElement.scrollHeight : 0;
            var offsetBody = doc.body ? doc.body.offsetHeight : 0;

            // Chọn giá trị lớn nhất làm chiều cao thực tế
            var finalHeight = Math.max(scrollBody, scrollDoc, offsetBody);
            
            // Đảm bảo không nhỏ hơn giá trị tối thiểu
            if (finalHeight < minH) finalHeight = minH;

            // Chỉ cập nhật nếu có sự thay đổi để tránh hiệu năng không cần thiết
            var currentStyle = parseInt(window.getComputedStyle(element, null).height);
            if (finalHeight !== currentStyle) {
                element.style.height = finalHeight + 'px';
            }
        } catch (e) {
            console.warn('Không thể truy cập nội dung iframe do chính sách bảo mật:', e);
        }
    }

    // Chạy lần đầu tiên ngay lập tức
    adjustHeight();

    // Định kỳ kiểm tra sự thay đổi kích thước (thay thế cho setInterval truyền thống)
    setInterval(adjustHeight, 500);
}

// Gọi hàm khởi tạo với ID iframe và độ cao tối thiểu là chiều cao cửa sổ màn hình
document.addEventListener('DOMContentLoaded', function() {
    var viewportH = window.innerHeight || document.documentElement.clientHeight;
    setupResponsiveIframe('main-content-frame', viewportH);
});

Cấu trúc HTML mẫu để áp dụng kỹ thuật trên như sau. Lưu ý ID của thẻ iframe cần khớp với tham số đầu vào của hàm điều khiển:

<iframe 
    src="target_page.html" 
    width="100%" 
    frameborder="0" 
    id="main-content-frame" 
    scrolling="no"></iframe>

Lưu ý quan trọng: Kỹ thuật này chỉ hoạt động hiệu quả khi file được nhúng nằm cùng miền tên (same-origin policy) với trang chủ. Nếu iframe trỏ đến domain khác, trình duyệt sẽ chặn việc truy xuất DOM nội bộ do lý do bảo mật.