首頁 > 文章 > web前端 > 怎麼使用Mobile控制頁面返回時get請求

怎麼使用Mobile控制頁面返回時get請求

php中世界最好的语言原創: 2018-04-26 11:55:291683瀏覽

這次帶給大家怎麼使用Mobile控制頁面返回時get請求，使用Mobile控制頁面返回時get請求的注意事項有哪些，下面就是實戰案例，一起來看一下。

問題描述

假設在專案中，有三個頁面，分別是main.html、test1.html、test2.html（後面分別簡稱main、test1、test2），其中main頁面是包含一個轉向到test1頁面的連結（即a標籤），test1中有一個屬性為data-rel=」back」的連結和一個轉向到test2的鏈接， test2只有一個屬性為data-rel=”back”的連結。 main轉向到test1後，點擊back連結返回main（相當於點擊瀏覽器的返回按鈕），無需重新發送get請求；但是當test1轉向到test2，在test2頁面點擊back連結想返回test1時，會重新發送一個get請求。這樣導致的問題就是：test1所做的所有操作，在test2回來後，都會失效。例如A是一個分頁的列表頁面，翻到第二頁後轉向B，那麼當回到A後，就無法地位到第二頁。

原因分析

我先用firebug看了一下html的結構，發現jQuery Mobile會把main和test1加入到頁面結構中去，當從test1轉向到test2後，test1會被自動刪除，這樣dom樹中，只包含了main和test2，所以在test2返回test1就會在發送一個get請求。那麼是不是就代表，只要能把歷史頁面快取到dom中（就像main和test1一樣），就可以解決這個問題。

解決問題

經過一番查找，在jQuery Mobile官網看到一段《Caching pages in the DOM》的描述：

Caching pages in the DOM 
To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:
$.mobile.page.prototype.options.domCache = true;
Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page&#39;s container: 
<p data-role="page" id="cacheMe" data-dom-cache="true">
You can also cache a page programmatically like this: 
pageContainerElement.page({ domCache: true });
The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.

從這段引文中應該可以看到，這三種方法都可以快取頁面到dom中，於是我就使用了第二種方法，即在page的p上增加了data-dom-cache =」true」屬性，但卻出現了以下兩個問題：

1、如下圖所示，當我的存取路徑是main->test1->test2->test1（test2是history.back()回傳的）時，用firebug可以看到，test2仍然存在於dom中，這樣的結果就如紅色部分描述的：DOM會變得很大，結果會使頁面變慢和一些設備上的記憶體錯誤。

2、當我存在這樣一個頁面，它透過不同的參數顯示不同的內容，頁面上，有一段js腳本，會對頁面上的元素做些處理，而我們常用的方式就是用id來取得目標元素，由於我們是用了cache快取page，就會導致js事件或是操作混亂。例如這裡我增加了一個test1_1頁面，它的內容幾乎和test1一樣，他們都有相同id的p和相同事件處理的button，這個事件做的事情就是往這個p中增加內容，當存取路徑為main->test1->test1_1，在test1_1上點選按鈕，會發現好像沒有觸發這個事件，其實它已經觸發了，只是內容增加到test1中的p中了，分別入下圖

所以對於目前大多數應用，這個方案是不可取的，除非自己管理dom中頁面的生命週期。

優化方案

透過上面的實驗，我也知道了需要滿足我的需求，就只能自己管理dom中頁面的生命週期了。那麼就涉及到一個問題：頁面什麼時候過期（即從dom中刪除）呢？根據我的需求，從test2回到test1時，就應該從dom中刪除test2，同理從test1回到main時，從dom中刪除test1。如果再次從main導航到test1，就得發起一個get請求，我認為這是合理的，因為使用者不會認為點擊連結到新頁面還需要快取。所以我應該在頁面顯示前或顯示後，刪除它之後的history，於是我就在pagebeforeshow、pageshow的時候做了刪除操作，即如下腳本（插件形式）：

(function($, undefined) {
$.fn.subpage = function(options) {
$(document).bind(
"pagebeforeshow",
function() {
var forword = $.mobile.urlHistory.getNext();
if (forword) {
var dataUrl = forword.url;
var forwordPage=$.mobile.pageContainer
.children(":jqmData(url='" + dataUrl + "')");
if(forwordPage){
forwordPage.remove();
}
}
$.mobile.urlHistory.clearForward();
});
};
$(document).bind("pagecreate create", function(e) {
$(":jqmData(role='page')", e.target).subpage();
});
})(jQuery);

結果事與願違，在頁面返回時，出現了js腳本錯誤，如下圖：

那么是什么原因呢？不在这个事件里做处理，那在哪里处理呢？于是我仔细研读了一下jQuery Mobile源码，发现了下面一段：

transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function() {
removeActiveLinkClass();
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
if ( settings.duplicateCachedPage ) {
settings.duplicateCachedPage.remove();
}
//remove initial build class (only present on first pageshow)
$html.removeClass( "ui-mobile-rendering" );
releasePageTransitionLock();
// Let listeners know we're all done changing the current page.
mpc.trigger( "pagechange", triggerData );
});

页面在切换完后，会触发pagechange事件，于是我把pagebeforeshow改成了pagechange，一切都按预期运行，并且没有错误，终于大功告成了。

总结

在使用该插件时，请注意以下几点：

1、必须在引用该脚本之前，引用jquery和jquery mobile脚本文件；

2、必须在page上增加data-dom-cache="true"。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

怎麼使用Mobile控制頁面返回時get請求

相關文章