移動瀏覽器上的Javascript / jQuery頁面更改事件

Question

我正在設計一個移動網站，牢記所有領先的瀏覽器 - Safari，Chrome，Dolphin，Opera。

我想在頁面導航/更改/新頁面請求時顯示“加載”元素。

我不能在錨標簽上使用click事件，因為存在許多與preventDefault(); 。

我嘗試了以下方法：

$(window).on('beforeunload', function() { ... });

但它在Dolphin或Opera中不起作用。

有人可以建議跨瀏覽器解決方案嗎？

-

編輯 ：我知道我不是很清楚地問我的問題，道歉。 我在這里創建了一個小提琴 - http://jsfiddle.net/hiteshpachpor/7dadA/5/基於響應。 該示例使用事件冒泡。

現在這是我面臨的問題。 每次頁面更改/導航時，我都會顯示加載程序（ $('.jacket').show(); ）。 但我不希望它顯示是否點擊了鏈接; 我想在我的頁面上做其他操作。 現在，添加$('.jacket').hide(); 在所有這些行動中的行完全就足夠了，但對於縮放原因來說它不是很理想。

這就是為什么我在評估'beforeunload'方法，但沒有運氣，因為它不是跨瀏覽器兼容的。

有什么建議可以解決這個問題嗎？

Answer 1

我認為你想要實現的是基本的AJAX請求？ 但是你會以錯誤的方式去做。 您可以改為使用div加載請求的頁面，然后設置ajax啟動處理程序以顯示加載消息。

你的頁面標記看起來像

<nav>
  <button data-url="homeURL">Home</button>
  <button data-url="anotherURL">Other</button>
</nav>
<div id="loadhere"></div>

結果jquery將是這樣的：

//on button click
$('nav button').click(function(){
  //set the url 
  url = $(this).attr('data-url');
    //load the page
    $('#loadhere').load(url);
});

//ajax start handler
$(document).ajaxStart(function(){
  $('#loadhere').text('LOADING');
});

這是一個示例代碼

希望這可以幫助

Answer 2

你可以在body元素中有一個onLoad函數調用一個加載div來顯示，然后setTimeout讓我們說3秒然后隱藏加載div並顯示所有其他div /其余的body

編輯：我很確定這適用於所有瀏覽器。 一旦我上電腦（現在在我的手機上），我會附上一個代碼片段;）

Answer 3

正如評論中提到的那樣。 但是我更喜歡事件委托而不是在整個dom附加事件。

// this is your original eventListener which prevents the default action (aka, navigating away)
$('#random-link').click(function(event){
    event.preventDefault();
    $('#result').text('I was clicked from random-link event.')
});

// this would be the delegated listener. It wouldn't have to be all "a" tags 
// that you respond to. It could be any css selector that causes the 
// loading message that you want.
$(window).on('click', 'a', function() {
   alert('I still bubble up.');
});

更新：

也許你不應該為“鏈接”觸發$('.jacket').show() 。

$('.jacket').hide();

$('a:not(.prevent)').click(function() {
    $('.jacket').show();
});

$('.prevent').click(function(event) {
    event.preventDefault();
    $('.jacket').hide();
});

Answer 4

有一個jquery移動小部件。 這使用到版本1.4

  $.mobile.loading( "show", { //show loading image
    text: "Your request is processing. please wait ...",
    textVisible: true,
    theme: "b",
    textonly: false,
  });

尋求幫助Jquery Mobile Loader Widget 。

Answer 5

為了回應您的編輯：

您可以使用event.isDefaultPrevented() 。

$(function() {
    $('.jacket').hide();

    $('.prevent').click(function(event) {
        event.preventDefault();
    });

    $('a').click(function(event) {
        if (!event.isDefaultPrevented())
            $('.jacket').show();
    });
});

JSFiddle： http ： //jsfiddle.net/F4uPx/

警告：確保在其他事件處理程序之后分配$('a').click()事件處理程序; 否則它將首先執行並將失敗，因為preventDefault()將不會被解雇。