jQuery Mobile：每页需要 Docytype 和 Header 信息吗？答案

【问题标题】：jQuery Mobile: Docytype and Header information required per page?jQuery Mobile：每页需要 Docytype 和 Header 信息吗？
【发布时间】：2025-12-28 03:35:10
【问题描述】：

我开始深入研究 jQuery Mobile，并试图弄清楚每个页面应该如何构建...

假设我有一个应用程序：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>jQuery Mobile: Demos and Documentation</title>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
    <script type="text/javascript" src="docs/_assets/js/jqm-docs.js"></script>
</head> 
<body> 
<div data-role="page" data-theme="b" id="jqm-home">
    <div id="jqm-homeheader">
        <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
        <p>A Touch-Optimized Web Framework for Smartphones &amp; Tablets</p>
        <p id="jqm-version">Alpha Release</p>
    </div>

    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li data-role="list-divider">Overview</li>
            <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
            <li><a href="docs/about/features.html">Features</a></li>
            <li><a href="docs/about/accessibility.html">Accessibility</a></li>
            <li><a href="docs/about/platforms.html">Supported platforms</a></li>
        </ul>

    </div>
</div>
</body>
</html>

现在，当我导航到“docs/about/intro.html”时，intro.html 是否需要与主移动应用程序具有所有相同的文档声明？换句话说，<head>、<script>、<link> 等...我是否需要声明每个必需的脚本、样式和文档类型参数，就好像它是在其上加载的单个页面一样？

我问的原因是从我所见，页面实际上并没有被加载......它就像它被加载在顶部......你实际上并没有去“docs/about/intro.html” ...我可能是错的。

有人可以帮我澄清一下吗？

【问题讨论】：

我在加载 HTML 片段时没有遇到问题。如果您不用rel="external" 或data-ajax="false" 标记链接，则默认情况下应该这样做。使用您尝试链接到的文档示例更新您的问题（例如 intro.html）。

标签： jquery cordova jquery-mobile

【解决方案1】：

这就是发生的事情（根据我的理解）。

以你的例子为例，jQuery Mobile 查找“docs/about/intro.html”，进入它，然后查找<div data-role="page">，忽略其他所有内容<head>, <body> 等。

然后它将页面 div 带入您现有的页面，并将 URL 更改为“#/docs/about/intro.html”（或类似内容）

【讨论】：

换句话说，其他页面不需要样式表、脚本等。
这就是我收集到的......为什么文档中没有解释。或者也许它是，我看不到它？
没有明确提及。它确实说明了以下内容：“页面加载的基本工作流程如下：首先，使用普通 HTTP 请求请求页面，然后请求后续“页面”并将其注入该页面的 DOM。因此，DOM一次可能有多个“页面”，每个页面都可以通过链接到其 data-url 属性来重新访问。”我通过简单地查看文档本身的结构来弄清楚其余部分（因为它本身是用 jQuery mobile 编写的）
来自docs（谢天谢地，自从这个问题以来，已经更新）：“当通过 Ajax 加载页面时，任何引用页面头部的脚本和样式都不会产生任何影响，但如果页面通过 HTTP 正常请求，它们将执行。在编写 jQuery Mobile 站点脚本时，需要考虑这两种情况。在“后续”页面上不需要 <head> 元素的答案中的其他建议是错误的。

【解决方案2】：

jquery mobile 的工作方式，您必须在第一页的头部加载任何脚本和 css。这可以通过转到scrollview 演示来演示。如果您可以从那里导航到任何页面，则可以使用脚本来启用滚动视图，但是如果您刷新页面，则会失去脚本的功能

我建议将 head 的内容放在您的所有页面上，原因如下 - 如果有人在打开主页之前打开“关于”页面会发生什么？你会得到一个相当难以辨认的网页。

【讨论】：

【解决方案3】：

看看你想要什么类型的Navigation，因为有几种不同的模型/类型

【讨论】：

这是最好的答案。我的一个结论：您不需要在后续站点中放置标题，只要您可以确定没有人会尝试直接访问它们。

【解决方案4】：

不幸的是，到目前为止，我已经看到了一种解决您的困境的方法是在一个 html 页面中构建所有站点。我还没有看到任何文档解释了如何在本地环境中有效地构建一个由多个页面组成的网站，而不会丢失 jquerymobile 的精彩转换。

【讨论】：

伙计，这看起来很恶心......这会导致多大的文件。我宁愿不这样做。
没有更好的方法。在 PHP 文件中构建不同的页面，没有 <head> 和 <body> 标签（页面 <div>s 和相关的子元素），并使用 include 将它们包含到您的主 HTML 中。比一个巨大的 HTML 文件稍微好一点，你甚至可以做有条件的includes
而且如前所述，只要页面在同一个域中，就可以获得jQuery mobile的转场效果。您可以拥有任意数量的不同 .html 文件
以这种方式使用 PHP 的一个缺点是 HTML 资源不再是“静态的”。这可能是一个可以接受的折衷方案，但拥有完全静态 HTML 资源的概念简单性是一件好事。