使用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. 完美解决iis下JWplayer提示Error loading media: File could not be played错误

    最近开发项目需要使用JWplayer插件播放视频,但是无论换那个版本.换什么样的视频总是提示Error loading media: File could not be played错误,废了好大的劲 ...

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

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

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

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

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

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

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

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

  6. 使用webView的时候,出现Error loading page Domain:WebKitErrorDomain Error Code:101 Description: The URL can&#39;t be shown

    onShouldStartLoadWithRequest = (e) => {// Implement any custom loading logic here, don't forget t ...

  7. [react native] Error loading page

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

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

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

  9. Office EXCEL 创建图片超链接打不开怎么办 Excel打开图片提示发生了意外错误怎么办

    如下图所示,点击超链接提示无法打开指定的文件   如果使用Office打开,则提示发生了意外错误   你需要先把IE浏览器打开,这样就可以打开了,并非是图像的相对位置不正确导致的.      

随机推荐

  1. yum安装出错

    [root@lxh yum.repos.d]# yum install -y samba Loaded plugins: fastestmirror, refresh-packagekit, secu ...

  2. 使用SQL如何把用逗号等字符隔开的字符串转换成列表(转)

    如何把用逗号等字符隔开的字符串转换成列表,下面依逗号分隔符为例: 比如有一个字符串,其值为:香港,张家港,北京,上海用SQL把这个字符串转换成列表的方法是: 1.方法一 WITH A AS (SELE ...

  3. oracle一点记录

    查看数据库实例名(SERVICE_NAME): sql: select instance_name from v$instance; 如何知道oracle客户端是32位还是64的.windows下启动 ...

  4. android 25 跨进程启动activity

    跨进程启动activity,启动系统预定义的activity就是跨进程的. client项目启动server项目的activity. clientActivity.java package com.s ...

  5. Windows Phone开发(2):竖立自信,初试锋茫

    原文:Windows Phone开发(2):竖立自信,初试锋茫 上一篇文章中,我们聊了一些"大炮"话题,从这篇文章开始,我们一起来学习WP开发吧. 一.我们有哪些装备. 安装完VS ...

  6. Android - 和其他APP交互 - 让其他app启动你的activity

    前面的两篇文章主要讲了一个方面:从app中启动其他app.但是如果你的app可以处理对其他app有用的操作,你的app也应该响应其他app的操作请求.例如,如果你创建了一个社交app可以分享信息和图片 ...

  7. LeetCode_算法及数据结构覆盖统计

    [输入]共计151道题的算法&数据结构基础数据 (见附录A) [输出-算法]其中有算法记录的共计 97道 ,统计后 结果如下  top3(递归,动态规划,回溯) 递归 动态规划 回溯 BFS ...

  8. 转载 Deep learning:六(regularized logistic回归练习)

    前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...

  9. php写留言板

    简单的PHP留言板制作 做基础的留言板功能  需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method=&qu ...

  10. [编织消息框架][netty源码分析]12 ByteBuf 实现类UnpooledDirectByteBuf职责与实现

    public class UnpooledDirectByteBuf extends AbstractReferenceCountedByteBuf { private final ByteBufAl ...