使用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发出的请求能解析正确的页面.

使用 JQueryMobile 点击超链接提示“error loading page” 错误的更多相关文章

  1. Chrome A标签的迁移错误:【Error loading page】

    在IE中经常使用A标签用来迁移,正确的写法是 <a href="001.html"></a>即可,不过在chrome上面可能会引发错误无法迁移. 比如用下面 ...

  2. 解决Eclipse启动Tomcat时报Error loading WebappClassLoader错误

    最近新建了一个JSF项目(网上查到用Struts,Spring MVC也会如此),配置好以后用Eclipse启动Tomcat报了如下错误:严重: Error loading WebappClassLo ...

  3. Error loading page Domain: WebKitErrorDomain Error Code: 101

    使用 WebView 组件,loading的过程中出现这个错误. 解决方案: webVIew 里面加 renderError={ (e) => { if (e === 'WebKitErrorD ...

  4. 登录MySQL提示ERROR 1045 (28000)错误解决方法

    今天,登录服务器准备修改数据库的一些东西.但输入密码,却进不了数据库并提示一个错误,如下图 再确认密码没错的情况下,还是进不了数据库.便在网上找到了解决方法,记录下来,供参考学习. 解决方法: 总体思 ...

  5. [react native] Error loading page

    如上图显示的错误,解决方法如下: 在react native ios项目的info.plist文件中,新增一个属性. 在Info.plist中添加NSAppTransportSecurity类型Dic ...

  6. Saiku2.6 保存查询后,重新打开报 Error Loading Query错误。

    发现Saiku2.6的查询保存后重新打开就会报如下错误,同等的Schema文件和数据库环境在3.15环境里面打开是一切正常的. 后面对比了一下2.6和3.15的启动环境,发现有些差异的地方. 2.6启 ...

  7. 编译Uboot时提示error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory

    在Ubuntu14.04 64位系统中已经安装了libc6:i386的库,编译Uboot时提示error while loading shared libraries: libz.so.1: cann ...

  8. VMWare------启动虚拟机时出现“start booting fron CD... Error loading image:DFEAULT.EZB”提示

    提示详情: start booting fron CD... Error loading image:DFEAULT.EZB 解决方法: iso镜像文件有问题,需要下载正确的镜像文件 MSDN下载地址 ...

  9. Outlook 2013 在邮件里面点击超链接时弹出&ldquo;组织策略阻止我们为您完成此操作&rdquo;

    现象描叙:     在Outlook在邮件里面点击超链接时,打不开超链接页面,弹出如下提示: 这个是因为之前安装了其它浏览器(例如,我安装了360的浏览器),并且设置为了默认浏览器,后来卸载了该浏览器 ...

随机推荐

  1. iOS开发 GET、POST请求方法(NSURLSession篇)

    NSURLConnection,在iOS9被宣布弃用,本文不使用NSURLConnection进行网络编程,有兴趣的童鞋可以参考: [iOS开发 GET.POST请求方法(NSURLConnectio ...

  2. 理解IEnumerator+IEnumerable这种接口思想

    前言 本文不想过多篇幅来介绍IEnumerator和IEnumerable这两个接口的具体说明,只是把它作一个例子作引言而已,本文将根据自己的理解来描述微软为何要这样设计这种关联风格的接口.这种风格的 ...

  3. TP框架整合Swagger UI接口文档

    1.下载swagger ui:http://swagger.io/swagger-ui/: 2.在应用目录里新建一个目录xxx:如图 3.解压后把dist目录的所有文件拷贝到新建的目录里面: 4.在新 ...

  4. 【解题报告】zju-1145 Dreisam Equations

    原题地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=145 题目大意:在给定的等式右边数字之间加上加.减.乘运算符,使等式成 ...

  5. [札记]IL经典指令解析之方法调度

    call.callvirt和calli指令用于完成方法调用,有何区别呢? 1)call使用静态调度,也就是根据引用类型的静态类型来调度方法.call指令根据引用变量的类型来调用方法,因此通常用于调用非 ...

  6. VC 隐藏托盘图标

    苦苦寻找的隐藏托盘图标的方法,今天终于搞定,献给大家! #include <atlbase.h> #include <atlconv.h> #include <CommC ...

  7. Javascript 文件的同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面b ...

  8. Aliyun EMR 集群重启

    1.如果Core节点有Down掉,ActiveNodes少于Core节点数. 处理: a.登陆到Master节点,到目录 /opt/apps/hadoop-2.7.2/sbin b.执行 ./stop ...

  9. 成都Java培训机构太多,该如何选择呢?

    Java培训的势头愈发火热.越来越多的人看到了Java培训的前途所在,可是最好的Java培训机构是哪家呢?如何推断一家Java培训机构的专业性呢?140610lscs" target=&qu ...

  10. Android Camera Api的心得

    (一) 前言最近看Camera的api,觉得写的真的不错.现在翻译过来,给大家分享分享,译文可能不太好,大家将就着看哈. (二) 正文1. CameraCamera是Android framework ...