iframe加载异常且尺寸不符问题求助

核心错误点 #

1. 点击跳转主页的原因 #

• iframe的src拼接逻辑完全错误：将目标页面URL与无关HTML字符串<body>Foo</body>拼接，导致浏览器无法识别有效目标地址，触发异常跳转或404后返回主页。
• 目标URL缺少协议头：example.github.io未添加https://，浏览器会将其视为当前域名下的相对路径，而非独立外部地址。

2. iframe高度不足的原因 #

• html和body元素未设置height:100%，iframe的height:100%没有可参考的父级高度基准，只能自适应内容高度，因此仅显示顶部区域。

具体修复步骤 #

修复JavaScript #

移除错误的HTML字符串拼接，添加协议头自动补全逻辑：

function beep(x) {
    var iframe = document.createElement("iframe")
    document.getElementById('all').hidden = true
    // 自动补全https协议头，避免相对路径错误
    iframe.src = x.startsWith('http') ? x : `https://${x}`
    document.body.appendChild(iframe)
}

修复CSS #

给html和body添加全屏高度设置，确保iframe能占满整个视口：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at bottom, #4D511F 0, #03260c 100%);
}

/* 保留原有其他CSS规则 */

iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute; /* 强制iframe覆盖整个页面，不受其他元素布局影响 */
    top: 0;
    left: 0;
}

修复HTML调用 #

直接传入完整URL（或依赖JS自动补全）：

<div class="game">
    <img src="images/goedash.png" alt="Geometry Dash" onclick="beep('https://example.github.io/pages/geodash/index.html')">
</div>

额外优化建议 #

• 避免重复创建iframe：给iframe添加唯一ID，每次点击时复用已有iframe，减少页面冗余：

function beep(x) {
    let iframe = document.getElementById('content-iframe');
    if (!iframe) {
        iframe = document.createElement("iframe");
        iframe.id = 'content-iframe';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 'none';
        iframe.style.position = 'absolute';
        iframe.style.top = '0';
        iframe.style.left = '0';
        document.body.appendChild(iframe);
    }
    document.getElementById('all').hidden = true;
    iframe.src = x.startsWith('http') ? x : `https://${x}`;
}

• 添加返回主页面功能：可在iframe上方添加关闭按钮，点击后显示#all元素并隐藏iframe。

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