移动浏览器上的 Javascript / jQuery 页面更改事件

Question

我正在设计一个移动网站，同时考虑到所有领先的浏览器 - Safari、Chrome、Dolphin、Opera。

我想在页面导航/更改/请求新页面时显示“加载”元素。

我不能在锚标记上使用点击事件，因为preventDefault(); 存在很多。

我尝试了以下方法：

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

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

谁能推荐一个跨浏览器解决方案？

--

编辑：我意识到我问的不是很清楚，抱歉。我根据响应在这里创建了一个小提琴-http://jsfiddle.net/hiteshpachpor/7dadA/5/。该示例使用了事件冒泡。

现在这是我面临的问题。每次页面更改/导航时，我都会显示该加载程序 ($('.jacket').show();)。但是如果单击链接，我不希望它显示出来；我想在我的页面上执行其他操作。现在，在所有此类操作中添加 $('.jacket').hide(); 行就足够了，但出于扩展原因，它并不是非常理想。

这就是我评估 'beforeunload' 方法的原因，但没有运气，因为它不兼容跨浏览器。

有什么好的建议来解决这个问题？

Answer 1

响应您的编辑：

您可以使用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() 还没有触发。

Answer 2

为此有一个 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 3

正如 cmets 中所提到的。不过我更喜欢事件委托，而不是在整个 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

我认为您想要实现的是基本的 AJAX 请求？但是你的做法是错误的。您可以改为使用 div 加载请求的页面，然后设置 ajax start 处理程序来显示您的加载消息。

你的页面标记看起来像

<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');
});

这是example codepen

希望对你有帮助

Answer 5

您可以在 body 元素中有一个 onLoad 函数，该函数调用加载 div 出现，然后 setTimeout 让我们说 3 秒，然后隐藏加载 div 并显示所有其他 div/body 的其余部分

编辑： 我很确定这适用于所有浏览器。一旦我进入我的电脑（现在在我的手机上），我会附上一个代码 sn-p ;)