近期在研究微信开发，发现之前那种PC端的WEB网页全页刷新的方式，在移动端体验起来非常不方便，因为在移动端因为屏幕小，显示一些其它内容时，需要加载另一个页面，然后后退回来。
一开始我用 jquery-pjax 这个插件（git地址），在页面定义一个内容区域，然后加载内容后把之前的内容替换掉，本来一开始用得满爽的，后来我用上了一个 knob 插件（一个圆盘进度条，其原理是用canvas画图），发现我加载其它页面后，再后退，之前knob渲染的图像不见了。所以我猜pjax它应该是将原内容区域的html内容缓存起来，后退时，又将内容恢复回来，可是 canvas恢复回来时是空的。
发现太麻烦了，还是重新找找有没有符合我要求的插件，几经搜索，让我发现了这个国产插件 mobilebone（git地址），非常不错的一个插件，跟我想象中要求的差不多。
它跟 jquery-pjax 插件不同的是，它是将 ajax 加载的内容重新装在一个 page 里挡提之前的内容，这种方式就不会出现之前那种现象了。
具体使用方法我就不介绍了，大家可以看它的git里面介绍，全是中文的，看一下就懂了，我要写的是我对它的修改，因为我发现它的作者好久不对它进行更新了。。。
因为我用的是Thinkphp 框架，所有的网址是/index.php?s=/admin/admin/index 这样，都是以index.php为根目录，我发现 mobilebone这个插件，它 ajax加载的网页如果是同一个根目录的，它就会将同一个根目录的page页面替换掉，结果会出现一个问题，就是我加载一个页面后，在加载后的页面上再加载其它页面，然后点后退，会出现空白页，因为都是同一个根目录，所以后面加载的页面将之前页面给替换掉了。
所以我对源文件mobilebone.js做了以下修改
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
在源js文件里350行附近，以下代码下面 if (options.id) { // eg. get 'ajax.php' from 'ajax.php?xx=1' pageid = pageid.split("?")[0]; } 增加以下代码后，只要在a标签上增加data-pageid='页面id'，这样就可以让根目录相同的页面，重复加载后不会被删除了，只会删除pageid一致的页面 if(options.target){ options.pageid=options.target.getAttribute("data-pageid"); if(options.pageid){ pageid=options.pageid; pageInto.setAttribute("data-pageid",pageid); } }else{ pageid=pageInto.getAttribute("data-pageid")||pageid; } |
这样修改后，只要在 a 标签上加上data-pageid=不同的值，插件里就会以pageid 为根目录区分 page了，哈哈哈！
后来我又用上了jquery-weui 的tab，里面它自带了切换，不过同时用上mobilebone的话，就会重复跳转了，我希望加个属性让mobilebone对我这个链接不起作用
|
1 2 3 4 |
在源文件1140行附件，在下面这句代码 if (self_page == null || !target) return; 下面增加这个代码，那么A标签里有data-init='false'的就不起作用了 if(target.getAttribute("data-init")=="false") return; |
这样修改后，只要我加上data-init=’false’后就可以了，哈哈哈！