使用 JQueryMobile 点击超链接提示“error loading page” 错误

使用jquery mobile创建dialog时出现加载错误，“Error Loading Page”。

原因是：jquery mobile页面默认采用ajax方式进行交互，而ajax方式下是不支持f://的，也就是本地文件，所以有两种解决办法:

1.给超链接增加data-ajax="false"属性或者加上 rel="external"就好了，以此来禁用ajax.

<a href="html/main.html" data-role="button" <a href="html/main.html" data-role="button"data-ajax="false" >进入主页面</a>

2.将跳转页面发布到服务器

对于其他的几种跳转，看下文。现在我们来了解一下各种连接各种跳转的本质

外部页面链接

JQuery Mobile 自动化了创建ajax站点和程序的过程.

默认情况下,当你点击一个链接时会指向一个外部页面(如.products.html), 但是框架会解析该链接的 href属性然后发出一个ajax请求(Hijax)并显示正在加载的提示.

如果ajax请求成功,新页面内容会添加到DOM当中,所有mobile widget都是自动初始化的,然后新页面会动画过渡显示出来.

如果ajax请求失败,框架会显示一个小小的错误消息提示('e'调板的样式),并会在一小段时间内消失, 并且不会破坏当前的导航流(译注:即页面不会刷新也不会对前进后退按钮有影响)

内部页面链接

单个HTML文档可以包含多个'page',只需要在一个页面包含多个data-role="page"的div即可,每个pagediv必须由一个唯一的ID (id="foo") ,而链接到相应页面使用锚记即可(href="#foo").当点击一个链接时, 框架会寻找id为锚记href的内部'page'并显示到当前界面中.

要注意如果你正在通过ajax从一个mobile页面链接到一个含有多个内部页面的页面,你需要为该链接添加一个 rel="external" 或者 data-ajax="false" . 该属性告知框架对页面进行重新加载 ,url hash也将清零.这点十分关键,因为ajax 页面使用 hash(#)来追踪ajax历史,当含有多个内部page的页面使用hash 来指示内部page时会发生冲突.

举例来说,一个指向含有多个内部page的页面的链接会像这样:

<a href="multipage.html" rel="external">Multi-page link</a>

这儿有个2 'page'页面的例子,由两个jQuery Mobile div构建,每个div由其ID来导航,要注意这些page上的ID只需要支持内部的页面链接,如果每个页面是分离的HTML文档,这些ID则是可选的. 以下是两个page,在body 元素里面.

<body>

	<!-- Start of first page -->

	<div data-role="page" id="foo">

		<div data-role="header">

			<h1>Foo</h1>

		</div>

		<!-- /header -->

		<div data-role="content">

			<p>I'm first in the source order so I'm shown as the page.</p>

			<p>

				View internal page called <a href="#bar">bar</a>

			</p>

		</div>

		<!-- /content -->

		<div data-role="footer">

			<h4>Page Footer</h4>

		</div>

		<!-- /header -->

	</div>

	<!-- /page -->

	<!-- Start of second page -->

	<div data-role="page" id="bar">

		<div data-role="header">

			<h1>Bar</h1>

		</div>

		<!-- /header -->

		<div data-role="content">

			<p>I'm first in the source order so I'm shown as the page.</p>

			<p>

				<a href="#foo">Back to foo</a>

			</p>

		</div>

		<!-- /content -->

		<div data-role="footer">

			<h4>Page Footer</h4>

		</div>

		<!-- /header -->

	</div>

	<!-- /page -->

</body>

 请注意: 由于我们使用了hash来为所有ajax 'page' 追踪历史记录,现目前来说, 在一个jQuery Mobile page里还不可能把链接作为普通的锚记(index.html#foo), 因为框架会寻找一个 ID 为#foo 'page' 来跳转,而不是像普通HTML页面那样滚动含有该ID的内容.

后退链接

如果你对一个a标签使用 data-rel="back" 属性,任何在上面的点击都会模拟后退按钮,而忽略它的href属性. 这点在链接回一个已命名的页面十分有用,比如当有一个到'home'链接或者当用javascript生成一个后退按钮时, 或者一个按钮用来关闭一个对话框.当在你的源代码使用这个特性的时候,一定要提供一个有意义的href实际指出引用页面的URL (这会使得该特性也能在C级浏览器中也能起作用). 同样,请记住如果你只是单纯使用一个后退过渡而不在历史记录中真正后退,你可以使用 data-direction="reverse"来替代.

重定向和链接到目录

当链接至一个目录地址时(比如用 href="typesofcats/"来替代 href="typesofcats/index.html"), 你必须提供一个后置斜杠.这是因为jQuery Mobile假定在url中最后一个"/" 后面的部分是一个文件名,jQuery Mobile会移除该部分,以便在未来有页面被引用时创建基地址.

然而,你可以通过返回已经指定了data-url属性的page div来解决该问题. jQuery Mobile会使用该属性的值来更新URL来替换过去请求的那个页面. 这也允许你返回url的更改来作为重定向的结果,举例来说,你可以提交一个表单到"/login.html",但是成功提交后返回一个 url "/account".

这个链接指向"docs-links-urltest/index.html",该链接是一个目录里的索引页 : Test Link 返回的页面会用"docs/pages/docs-links-urltest/"(包含后置斜杠)来更新hash,这是通过那个页面的data-url的值来完成的. 谨记这个值会替换整个hash,是否替换取决于你自己,当刷新或者深入链接时URL发出的请求能解析正确的页面.