转自:https://yq.aliyun.com/ziliao/265393
最近在做一个项目,由于涉及到跨平台性,所以采用了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>