JQuery Mobile ajax加载外部链接

时间:2012-07-18 10:43:50

标签: jquery-mobile

我正在开发一个从两个不同域加载的JQuery Mobile应用程序。 (有些页面来自example1.com,其他页面来自example2.com,但所有页面都是由JQuery设计的)

据我所知,如果我有一个从example1.com到example2.com的链接,它将完全重新加载页面。

有没有办法对该页面进行动态ajax加载,就像内部链接一样?

2 个答案:

答案 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元素内部的内容。