我正在开发一个从两个不同域加载的JQuery Mobile应用程序。 (有些页面来自example1.com,其他页面来自example2.com,但所有页面都是由JQuery设计的)
据我所知,如果我有一个从example1.com到example2.com的链接,它将完全重新加载页面。
有没有办法对该页面进行动态ajax加载,就像内部链接一样?
答案 0 :(得分:2)
根据jQuery Mobile documentation,如果该页面位于另一个域上,则会加载具有整页刷新的页面。
我自己没有对它进行过测试,但您应该首先使用$.mobile.loadPage
方法加载页面,然后链接或更改为该页面,该页面现在将成为同一DOM的一部分。
答案 1 :(得分:1)
见下文:
外部页面链接
jQuery Mobile自动化构建基于Ajax的站点的过程 应用
默认情况下,当您单击指向外部页面的链接时 (例如products.html),框架将解析链接的href 制定一个Ajax请求(Hijax)并显示加载微调器。
如果Ajax请求成功,则会添加新的页面内容 DOM,所有移动小部件都自动初始化,然后是新页面 通过页面转换动画到视图中。
如果Ajax请求失败,框架将显示一个小错误 消息覆盖(在“e”样本中设计)在a之后消失 短暂的时间,所以这不会打破导航流程。查看示例 错误信息。
本地,内部关联的“网页”
单个HTML文档可以包含多个已加载的“页面” 通过将多个div与数据角色“page”堆叠在一起。每 'page'块需要一个用于链接的唯一ID(id =“foo”) 在'pages'之间(href =“#foo”)。单击链接时, 框架将查找具有ID和转换的内部“页面” 进入视野。
重要的是要注意您是否通过移动页面进行链接 通过Ajax加载到包含多个内部页面的页面,您 需要在链接中添加rel =“external”或data-ajax =“false”。这个 告诉框架进行整页重新加载以清除Ajax URL中的哈希值。这很关键,因为Ajax页面使用哈希(#) 跟踪Ajax历史记录,而多个内部页面使用哈希 表示内部页面,因此哈希中会有冲突 这两种模式之间。
例如,指向包含多个内部页面的页面的链接 看起来像这样:
多页链接这是一个 用两个jQuery Mobile div导航构建的2“页面”站点的示例 通过链接到每个页面包装器上的ID。请注意,ID上 页面包装器只需要支持内部页面 链接,如果每个页面都是单独的HTML文档,则是可选的。 这是两个页面在body元素内部的内容。