Confluence应用设置html/body为100%高度时iframe无限膨胀求助

问题原因分析 #

你遇到的iframe无限膨胀问题，核心是html/body的高度设置与AP.resize()形成了循环依赖：

• 当给html/body设置height:100%或100vh时，元素高度会强制等于父容器（即Confluence的iframe视口）的高度；
• 调用AP.resize()时，Atlassian的脚本会读取页面内容的实际高度（此时就是iframe的高度），然后把iframe调整到这个高度；
• 调整后的iframe高度又会让html/body的高度再次被拉到新的iframe高度，触发下一次AP.resize()，无限循环导致iframe持续膨胀。

解决方案 #

1. 修复CSS高度设置（关键）

把固定的height改成min-height，允许内容自然延伸，同时保证初始铺满视口：

html,
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    min-height: 100vh; /* 替换height为min-height，允许内容超过视口 */
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

.container {
    margin: 20px;
    min-height: calc(100vh - 60px); /* 减去nav高度和上下margin，确保容器撑满剩余空间 */
    width: calc(100% - 40px);
}

如果需要更可靠的全屏布局，推荐用flex：

html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

nav {
    flex-shrink: 0; /* 固定nav高度，不被压缩 */
}

.container {
    flex: 1; /* 容器自动占据剩余空间 */
    margin: 20px;
}

2. 优化AP.resize()调用逻辑

不要用setInterval循环调用，这会加剧循环问题。改为在脚本加载完成后单次调用，再监听DOM变化处理动态内容：

document.addEventListener('DOMContentLoaded', function () {
    const script = document.createElement('script');
    script.src = "https://connect-cdn.atl-paas.net/all.js";
    script.async = true;
    // 脚本加载完成后再执行resize，避免AP未定义
    script.onload = function() {
        window.AP.resize();
        
        // 监听DOM内容变化，仅在内容高度改变时重新调整
        const observer = new MutationObserver(() => {
            window.AP.resize();
        });
        observer.observe(document.body, { childList: true, subtree: true });
    };
    document.head.appendChild(script);
});

最佳实践 #

• 永远不要给html/body设置height:100%或100vh，改用min-height保证初始全屏，同时允许内容自然扩展；
• 避免循环调用AP.resize()，优先用DOM变化监听或内容加载完成事件触发；
• 对于动态加载的内容（比如异步渲染的组件），可以在内容加载完成后手动调用一次AP.resize()；
• 检查页面中是否有其他可能导致高度变化的元素（比如隐藏的滚动条、动态添加的内容），确保这些元素的高度计算不会触发循环。

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