JqueryMobile链接一个页面,而链接页面中图片需刷新才显示的问题

发布时间:2016-03-21 浏览次数:2011 文章来源:个人博客

 

最近在做一个项目,由于涉及到跨平台性,所以采用了jquerymobile这个框架,在开发过程中,一开始为了图测试方便,采用了chrome浏览器来测试运行。现叙述如下问题:


当在first.html中,有个链接如:<a href="second.html" data-role="button" id="submit">登录</a>

   

而在second.html中,譬如我引用了highcharts这个jquery图表插件,会在second.html页面中生成一些图表。

   

可是这种情况,当我用chrome浏览器点击“登录”按钮时,链接到second页面,可是second页面的图表不会显示,需要刷新一下才能显示图表, 于是我结合了phonegap,把此项目布到android手机中进行测试,也是如此。我很是郁闷,我后来换了360浏览器进行测试,虽然不支持 jquerymobile框架主题样式显示,不过它链接过去能一下子出现图表的,而不需要刷新。对此,我就开始怀疑是否是浏览器链接加载页面的方式不一样 的问题了。


反正中间耗费了很多时间去定位问题的所在。也是由于刚接触此类技术,并不是很精。

后来想想还是追本还原,回到最起点,把jquerymobile的链接看了一下,有这么一段话:

    Jquery Mobile支持所有标准的html格式,为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求,并且用动画的转场效果实现切换

指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载,页面会整体被刷新。


对此,我就考虑到了,是否是因为chrome为了提高页面的加载速度,采用了ajax加载,页面不会整体被刷新。于是我就在button按钮上加上了data-ajax="false",然后果然行了。

正确的方式如下:<a href="second.html" data-role="button" id="submit" data-ajax="false" >登录</a>


key-word
JqueryMobile JqueryMobile链接 JqueryMobile刷新 JqueryMobile的AJAX