jQuery 移动多页内部
Posted
技术标签:
【中文标题】jQuery 移动多页内部【英文标题】：jQuery mobile Multi Page Internal 【发布时间】：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>
【问题讨论】：
【参考方案1】：删除链接上的rel="external"。这告诉 jQM 在加载页面时不要使用 AJAX。
在此处查看更多信息：http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
指向其他域或具有 rel="external"、data-ajax="false" 或 target 属性的链接不会被 Ajax 加载。相反，这些链接将导致整个页面刷新而没有动画过渡。两个属性（rel="external" 和 data-ajax="false"）具有相同的效果，但语义不同：链接到另一个站点或域时应使用 rel="external"，而 data-ajax=" false" 对于简单地选择域中的页面不通过 Ajax 加载很有用。由于安全限制，框架总是选择链接到外部域的 Ajax 行为。
【讨论】：
我编辑/删除了 rel="external" 并将文档托管在与我的 index.html 相同的目录中，页面仍然刷新，显示一个新的 url。因此，当在 index.html 并单击 m1 时，url 更改为 /m1.html，而不是 index.html#m1 之类的东西（或类似的东西）。 jquerymobile 上提供的示例并没有说明这一点。你还有其他例子可以分享吗？ 我认为你可能是对的......而我的期望是错误的......我注意到在 m1 时，我点击了菜单标签（引用“#”）它正确地返回到索引页。我需要进一步研究，例如，如何将 click() 之类的事件应用于新添加的 DOM 内容。让我再测试一下…… 我的预期错了吗？我希望在单击我的 m1 链接后可以使用在 index.html 中加载的脚本 - 因此，我希望 m1 页面能够像托管多页面一样插入到 DOM 中。我没有插入 m1，也没有任何从 index.html 加载的脚本可用，这让我相信我的 m1 页面被视为外部页面而不是内部页面。 @fiprojects，您的期望是正确的。外部页面应该加载到当前的 DOM 中，并且 Index 中的所有现有脚本都应该可用。你能创建一个 plunker (plnkr.co) 来重现你的问题吗？ @fiprojects，这是我制作的一个 plunker：plnkr.co/edit/q3Dgaq02DxYjiqa6O9fF?p=preview以上是关于jQuery 移动多页内部的主要内容，如果未能解决你的问题，请参考以下文章