点击Terms链接后jQuery无法加载页面内容至Div的问题排查

我有一个带条款链接和内容加载功能的页面，代码如下：

页面核心代码：

<label>
    <span>
       <a id="terms" href="/terms.php">Terms</a>
   </span>
       <input type="checkbox" name="terms" /> I Accept 
</label>

<div id="content-area"></div>

<script>
jQuery.fn.terms_agree = function(content_area, selector) {
    var body = $(body);

    $(this).click(function() {
        body.css("height", "auto").css("height", body.height()); // 防止展开/收起时页面闪烁
        if ($(content_area).html() == "") {
            $(content_area).load($(this).attr("href") + (selector ? " " + selector : ""));
        }
        $(content_area).slideToggle();
        return false;
    });
}

$(function() {
    $("#terms").terms_agree("#content-area");
});
</script>

被加载的terms.php页面内容：

<html>
<head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
</head>
<body>
     TEST TEST TEST
</body>
</html>

点击「Terms」链接后，#content-area加载后完全空白，但直接访问terms.php能正常显示内容，请问问题出在哪里？

• 核心问题：terms.php存在HTML结构错误，且完整页面结构导致load()解析异常：

  1. terms.php里的<html>标签嵌套错误——在<head>标签内部重复定义了<html>标签，这会导致浏览器解析DOM时出现混乱，jQuery的load()方法无法正确提取页面内容。
  2. 即使结构正确，load()方法加载完整HTML页面时，会自动过滤掉<html>、<head>、<body>这些顶级标签，只保留标签内的内容，但结构错误会让它连有效内容都提取不到。

• 修复方案：

  1. 修正terms.php的HTML结构，移除重复的<html>标签，正确结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
</head>
<body>
     TEST TEST TEST
</body>
</html>

2. 更优方案：如果terms.php仅作为内容片段被加载，直接返回纯内容即可，不需要完整的HTML结构，比如：

TEST TEST TEST

这样load()能直接读取并插入内容，避免不必要的DOM解析步骤。

内容的提问来源于stack exchange，提问作者Rick A.