在div中加载外部HTML页面失败：点击菜单仅显示空白求助

我来帮你排查这个问题，你的代码思路没问题，但有几个关键细节没处理好，导致点击后显示空白，我们一步步来解决：

1. 阻止a标签的默认跳转行为 #

你的菜单a标签带有href="#home"，点击时会触发浏览器的锚点跳转默认行为，这会干扰脚本的执行效果，甚至可能覆盖你刚插入的内容。

修改菜单代码，加上return false来阻止默认行为：

<li><a href="#home" onclick="check(); return false;">Acceuil</a></li>

或者在函数内部通过事件对象阻止：

function check(e) {
  e.preventDefault(); // 阻止a标签的默认跳转
  document.getElementById("content").innerHTML='<object type="text/html" data="form.html" ></object>';
}

对应的菜单调用要改成：

<li><a href="#home" onclick="check(event);">Acceuil</a></li>

2. 给object标签设置明确的宽高 #

默认情况下，object标签如果没有指定宽高，会被渲染成0高度的元素，看起来就是空白。你需要给它设置样式，让它填充content容器：

function check() {
  document.getElementById("content").innerHTML='<object type="text/html" data="form.html" style="width: 100%; height: 600px; border: none;"></object>';
}

这里的height可以根据你的布局需求调整，设置border: none是为了去掉object默认的边框，让页面更美观。如果content容器本身有固定高度，也可以设置height: 100%。

3. 检查form.html的路径是否正确 #

如果form.html和当前页面不在同一个目录下，路径错误会导致文件加载失败，显示空白。你可以通过浏览器开发者工具（F12）的「Network」标签验证：点击菜单后，查看是否有form.html的请求，若状态码是404，说明路径写错了。

• 同目录下：data="form.html"（正确）
• 子目录（比如pages文件夹）：data="pages/form.html"
• 网站根目录：data="/form.html"

4. 更可靠的替代方案：用Fetch API加载HTML #

object标签加载HTML存在浏览器兼容性和跨域限制（本地文件运行时部分浏览器会阻止），用Fetch API直接获取HTML内容更灵活，还能处理加载错误：

async function check() {
  try {
    const response = await fetch('form.html');
    if (!response.ok) throw new Error('页面加载失败');
    const htmlContent = await response.text();
    document.getElementById("content").innerHTML = htmlContent;
  } catch (error) {
    // 加载失败时显示错误信息，避免空白
    document.getElementById("content").innerHTML = `<p>出错了：${error.message}</p>`;
  }
}

另外，你不需要提前清空content div，因为innerHTML赋值会自动覆盖原有内容，原来的背景和欢迎文字会被新内容替换，完全没问题。

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