如何根据窗口大小调整iframe内加载的FORD文档布局

解决方案 #

1. 替换原有iframe嵌入代码

你原代码的position: fixed定位规则会让iframe脱离Sphinx正常文档流，overflow: hidden会强制截断超出内容，是导致布局偏移、无法自适应的核心原因。直接替换你的.. raw:: html块内容为以下代码：

.. raw:: html

    <div style="width: 100%; min-height: 800px; overflow-x: auto; overflow-y: hidden; margin: 1rem 0;">
        <iframe 
            src="path_to_FORD_documentation_index.html" 
            style="width: 100%; height: 100%; min-height: 800px; border: none; margin: 0; padding: 0;"
            id="ford-docs-iframe"
        >
        你的浏览器不支持iframe标签
        </iframe>
    </div>

以上代码给iframe套了一层自适应父容器，overflow-x: auto规则会在内容宽度超出时自动在底部显示横向滚动条。

2. 同域部署场景优化（效果最优）

如果你的FORD文档和Sphinx站点部署在同一个域名下，可以在上述代码末尾追加一段JS，直接调整FORD页面内部边距优先适配窗口宽度：

<script>
function adjustFordIframe() {
    const iframe = document.getElementById('ford-docs-iframe');
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // 压缩FORD默认侧边栏和内容区的多余边距
    const sideNav = iframeDoc.querySelector('.sidenav');
    const content = iframeDoc.querySelector('.content');
    if (sideNav) sideNav.style.maxWidth = '220px';
    if (content) {
        content.style.marginLeft = '230px';
        content.style.maxWidth = 'calc(100% - 240px)';
        content.style.padding = '1rem';
    }
}
// 页面加载、窗口尺寸变化、iframe内容加载完成时都触发适配
window.addEventListener('load', adjustFordIframe);
window.addEventListener('resize', adjustFordIframe);
document.getElementById('ford-docs-iframe').addEventListener('load', adjustFordIframe);
</script>

3. 跨域部署场景适配

如果FORD文档和Sphinx站点跨域，无法直接操作iframe内部内容，使用CSS缩放方案适配，替换整段.. raw:: html内容为以下代码：

.. raw:: html

    <div style="width: 100%; min-height: 800px; overflow-x: auto; overflow-y: hidden; margin: 1rem 0;">
        <iframe 
            src="path_to_FORD_documentation_index.html" 
            style="width: 1200px; min-height: 800px; border: none; margin: 0; padding: 0; transform-origin: top left;"
            id="ford-docs-iframe"
        >
        你的浏览器不支持iframe标签
        </iframe>
    </div>

    <script>
    function adjustFordIframe() {
        const iframe = document.getElementById('ford-docs-iframe');
        const container = iframe.parentElement;
        const containerWidth = container.offsetWidth;
        const fordDefaultWidth = 1200; // 可根据FORD实际默认布局宽度调整
        if (containerWidth < fordDefaultWidth) {
            const scale = containerWidth / fordDefaultWidth;
            iframe.style.transform = `scale(${scale})`;
            iframe.style.height = `${800 / scale}px`;
        } else {
            iframe.style.transform = 'none';
            iframe.style.width = '100%';
            iframe.style.height = '800px';
        }
    }
    window.addEventListener('load', adjustFordIframe);
    window.addEventListener('resize', adjustFordIframe);
    document.getElementById('ford-docs-iframe').addEventListener('load', adjustFordIframe);
    </script>

该方案会在容器宽度不足时自动等比例缩放iframe内容，优先适配容器宽度，超出范围时自动显示横向滚动条。

内容的提问来源于stack exchange，提问作者dmmpie