【发布时间】：2017-01-21 14:14:12
【问题描述】：
我进行了一次搜索，所有可能对我有帮助的多页面引用都是多年前的 jqm 的古老版本。
为了澄清：内部页面是托管在单独文件中的页面，但在同一服务器上，与我的 index.html 位于同一目录中。外部页面将托管在不同服务器/域上的单独文件中。
我的目标：我有一个应用程序，它作为单个文档多页，看起来很胖。它有大约 20 页（div-data-role=page）。我想把这些页面中的大部分放到内部页面中（因此单独的文件托管在与主 index.html 页面相同的位置）。
这篇文章指导我......
http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
要启用动画页面转换，所有指向外部页面（例如 products.html）的链接都将通过 Ajax 加载。为了不引人注意地做到这一点，框架解析链接的 href 以制定 Ajax 请求 (Hijax) 并显示加载微调器。这一切都是由 jQuery Mobile 自动完成的。
如果Ajax请求成功，则将新的页面内容添加到 DOM，所有移动小部件都自动初始化，然后新页面是 通过页面转换动画到视图中。
所以...也许我误解了在 jqm 中有内部页面 - 当我希望我的页面通过 ajax 加载时，我正在刷新页面。
我有两个页面，一个 index.html 页面，它有一个指向 m1.html 的锚点。我希望当我查看 index.html 并单击 m1.html 时，该 URL 会神奇地将我的 div-data-role=page 的内容拉入我的 index.html DOM 并给我一个类似于 index 的 URL .html#m1
相反，当我点击 m1 链接时，我正在刷新页面，并且 URL 更改为 m1.html
有人可以澄清我的（错误）理解吗？
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" />
<link href="/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/jquery.mobile.icons.min.css" rel="stylesheet" type="text/css"/>
<script src="/jq/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/jq/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<title>My App</title>
</head>
<body>
<form>
<div data-role="page" id="Menu">
<div data-role="header" data-position="fixed" class="ui-title center">
Main PAGE
</div>
<div id="MainContent">
<ul data-role="listview">
<li><a href="m1.html">m1</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
m1.html
<div data-role="page" id="m1">
<div data-role="header" data-position="fixed" class="ui-title center"> ONE
</div>
<div id="MainContent">
<h1>one</h1>
<ul data-role="listview">
<li><a href="#Menu">Menu</a></li>
</ul>
</div>
</div>
【问题讨论】：
标签： jquery jquery-mobile