SUI Mobile 异步 AJAX 加载页面执行 JavaScript 脚本

发布于 2017-09-18 17:31:48 字数 1512 浏览 3210 评论 0

SUI Mobile 是一个比较好用的移动端开发框架,里面包含了很多个组件,几乎涵盖了手机端的基本特效,其自带的 路由 功能简直用起来不要太爽,这也是我一直使用它的原因。

SUI Mobile 异步 AJAX 异步加载页面执行 JavaScript 脚本

不过再好的插件也有一些 缺点,或者说这并不是 SUI Mobile 的缺点,只是框架的约定和我们以往编写代码的方式有点不同,其实你能想到的问题,框架的作者也基本想到了,可能在开发文档里面没有写明。

SUI Mobile 的路由功能,能够在当前页面 异步加载 另外的页面,不需要我们做任何配置,框架给我们自动完成,只要两个页面都遵循框架的格式编写,那就基本没有问题。

这里就会遇到一个经常遇到的问题,那就是异步加载的 JS 会不执行,其实这个问题早在 SUI Mobile 的常见问题里面提到,作者也给出了相应的解决方法,但是可能很多开发者不知道到底该怎么写。

切换到的新页面中的 js 不执行

由于浏览器安全性考虑的限制以及可能的 js 重复执行或覆盖的问题,目前是不支持运行 ajax 载入的页面里面的 js 的。

解决方法:所有页面都引用相同的 js,而这个 js 里面包含了所有的逻辑,事件部分使用委托来绑定。

SUI Mobile 官方有一个示例,细心的朋友可能会发现,里面也是通过路由加载页面,但是里面的一些JS插件照样能够执行,仔细看看作者写的 DEMO 就能明白怎么回事。

作者是将所有的 JS 事件都写到一个文件里面,然后每个页面都引用,这样所有的页面都是相同的执行脚本,然后通过给每个页面设置不同的页面 ID,然后判断改执行那段 JS 脚本。

$(document).on("pageInit", "#page-flow-picker", function(e, id, page) {
    $("#datetime-picker").datetimePicker({
      toolbarTemplate: '<header class="bar bar-nav">\
      <button class="button button-link pull-right close-picker">确定</button>\
      <h1 class="title">选择日期和时间</h1>\
      </header>'
    });
});

#page-flow-picker 就是需要被加载页面的PageID,给根元素绑定一个页面初始化完成的事件,也就是SUI的加载事件,完成以后执行下面的代码。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。