jQuery Mobile中如何动态加载或执行脚本

jQuery Mobile是我新的项目中要用到的移动端框架,之所以要使用它,仅仅是因为它的兼容性很好,页面之间的轮转及其优雅。但是jQuery Mobile的UI我并不喜欢,因此又引入bootstrap。在开发中发现,因为JQM采用ajax的方法加载链接到的页面,所以无法像我们之前的设计一样,把不同页面的脚本放在head之间,即使将这些脚本转移到body之间,也可能造成一些代码无法执行。本文简单的提几个我自己开发中遇到的情况。

1.框架的init初始事件

使用jquery的习惯就是$(document).ready开头,然而这在jqm中行不通,因为ready事件只执行一次。当你打开一个URL时,jqm拦截了jquery的ready事件,在ready之前要执行一大通,其中主要的是mobileinit事件。因此,如果对mobile的一些核心配置,应该放在mobileinit事件钩子中。

$(document).on('mobileinit',function(){
  $.mobile.pageLoadErrorMessage="加载出错了!"
});

但是有一个非常重要的点是,mobileinit之后DOM还没有加载完,因此如果你把对DOM的操作放在mobileinit事件钩子中的话,是没有用的,比如说append、remove等。

ready事件发生在DOM刚刚加载完的时候,这个时候基本上各种操作都可以做了。如果你的移动端web用了jqm,你要记住,点击一个链接虽然URL变化了,看到的页面也变化了,但是ready事件早都执行完毕了,所以不会再执行ready事件了,除非再刷新一下页面。如果你通过审查元素查看,可以发现,加载的页面其实是将链接指向的页面的body内容抓取过来,放在一个div data-role='page'中,把前面的一个页面隐藏起来。所以实际上很简单,如果你在ready中使用了on或者古老的live等函数来绑定新事件,还是可以的,例如:

$(document).ready(function(){
  $(document).on('click','.btn',function(){
     alert('ok');
  });
});

上面这段代码中因为使用了on来绑定click事件,所以通过ajax加载出来的页面中的.btn点击时也可以响应。但是有些插件要求在DOM加载时就执行的,那就没有办法了。JQM提供了新的事件来解决这个问题,即pageinit。

pageinit发生在通过点击链接加载新页面的时候,因为整个应用都是通过ajax实现的加载,所以当一个新页面打开的时候,仅仅是一个DOM append和element hide的就可以实现的,要在一个新页面打开的时候执行某个动作怎办呢?靠pageinit。比如你现在有两个页面A、B,同时使用了一个幻灯插件,但是幻灯插件只在ready事件中执行了,入口如果是A页面,你进入A时可以看到幻灯,但是点击进入B的时候发现幻灯没有加载。这个时候把幻灯的代码放到pageinit事件钩子中。

$(document).on('pageinit',function(){
  flash_set();
});

可是问题还是来了,有的时候即使你在pageinit事件钩子中使用代码也无法执行。你是否想起来mobileinit和ready的区别了,前者在DOM加载完之前,后者在DOM刚刚加载完的时候。我们完全可以形象的把pageinit比作mobileinit,那么谁来顶替ready呢?jqm提供了一个pageshow事件,pageshow则是发生在一个新的页面完全展现出来之后,这个时候不要说DOM了,基本上可以说是一个页面加载的最后阶段,所以这个时候做什么事都可以,包括jqm通过ajax操作新加载进来的DOM。

2.如何放置你的代码

通过上面的解说你可能会觉得,全部放在pageshow里面不就好了么。但事实是没有必要每个页面都执行那么多脚本,而且你还要考虑如何把它们安排在不同的页面位置。例如css,如果你打算直接在某一个页面中使用单独的css,那么不要用link放在head之间,因为如果它是被新加载进来的,head之间的任何代码都不会被加载进来,你只能把这堆css放在页面的body中间。

如果你的代码放置的不好,可能导致脚本执行混乱。例如你的HTML元素中在不同的页面使用相同的id,就可能因为ajax加载导致同一个DOM中出现两个一样的id,导致执行混乱。即使你在新页面中使用了新的javscript代码,也有可能无法执行,例如你希望在新的页面中对提交的表单进行检查,于是在新页面的body中间加入了下面的代码

$('#form').submit(function(){
  ...
});

结果发现根本不执行,原因很简单,submit事件只有在ready的时候被加入事件监听的序列,而新加的js早就过了ready的时间了,因此,上面这段代码应该换为

$(document).on('pageshow',function(){
$('#form').submit(function(){
  ...
});
});

3.页面跳转问题

jqm遇到使用PHP header location做的页面跳转时,就傻了,什么也加载不出来。如果遇到你要页面跳转,我教几个办法,应对你应用中的跳转问题。

第一种,使用data-ajax="false"取消Ajax页面加载。虽然jqm的页面轮转看上去确实很酷,但在不得已的情况下,只能舍弃了。这个时候你必须注意:如果重新执行页面DOM,你新的页面中引入的css、js等能否满足之后打算加载的页面,因为一旦你取消了Ajax,就相当于换了一个入口页面,网页的标题变了,加载的文件也变了。

第二种,通过PHP判断,在不同的情况下显示不同的链接。例如需要用户登录的页面,有些页面必须用户登录了才能看,可以用PHP判断,如果没哟登录,那些内页的链接直接统一换成登录页的链接,如果已经登录,则正常显示。但这个地方要注意,比如首页,可能也有这样的链接,如果你登录了,首页DOM中的链接是不会变的,所以你需要在登录操作之后刷新URL,或者通过Ajax的success回调函数中,修改这些链接。

第三种,使用$.mobile.changePage实现间接跳转。jqm之所以不能实现跳转,是因为它的Ajax加载页面无法绕过header,所以如果你最好不要有跳转,比如你需要跳转的地方,干脆直接引入跳转到的页面,把页面显示出来。但是这样明显是不大好的,所以实在没有办法的时候,使用这里提出来的间接跳转。比如你打算某一个地方使用header location了,这个时候打住,把这个跳转代码换成下面的代码:

<html>
<head>
<title>跳转页面...</title>
<meta charset="utf-8">
</head>
<body>
<script>
$.mobile.changePage('{$url}');
</script>
</body>
</html>

$url就是要跳转到的目标地址。这个实现的原理很简单,Ajax加载的代码就是上面的<script>部分,激活了changePage,于是开始跳转。不过这个动作实际上在用户体验上并不好,因为这个跳转会出现一个空白页,虽然不影响大局,而且还非常流畅的实现了跳转,但是如果用户追求细节,可能就需要你对这个界面进行进一步的美化,例如加入一些跳转提示图片等。

好了,今天就谈这三个问题,如果你有自己的疑问或想法,欢迎通过下方的评论框与我讨论。

2014-08-19