服务器XHTML页面仅显示body内容，head元素是否动态加载及可获取？

问题排查与解决方案 #

head内容是否为动态添加？ #

你直接下载原始页面文件也看不到head内容的情况下，基本可以排除动态添加的可能。前端动态插入的head内容只会存在于浏览器渲染后的DOM树中，不会被包含在服务器返回的原始静态文件里，要是你下载的本地文件就没有head结构，说明内容在服务端返回阶段就已经缺失了。

查看head内容的排查方法 #

• 首先查看服务器返回的原始响应内容：打开Firefox开发者工具的「网络」面板，刷新页面后选中对应XHTML页面的请求，点击「响应」标签即可查看服务器返回的未经过浏览器解析的原始内容。如果这里面就没有head标签内容，直接排查服务端的渲染逻辑、模板配置是否漏输出了head部分。
• 如果原始响应存在head内容，可按以下方向排查解析异常问题：
  • 校验XHTML语法：XHTML遵循严格的XML语法规范，只要存在标签未闭合、属性未加引号、特殊字符未转义这类语法错误，XML解析器就会中断解析，可能出现仅展示body内容的问题。你提供的示例XHTML代码本身语法是合规的，重点排查实际部署的代码是否和示例一致、有没有后续修改引入的语法错误。
  • 检查服务端响应头配置：确认Content-Type响应头的值为application/xhtml+xml，如果误配置为text/html等其他类型，浏览器会用HTML宽松模式解析XHTML内容，很容易出现结构识别异常、head被吞的情况。
• 如果确认是前端JS动态添加head内容，直接查看开发者工具的「检查器」面板即可，所有静态、动态生成的DOM元素都会在这个面板里完整展示，包括head内的所有子元素。

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