[英]Javascript / jQuery page change event on mobile browsers
I am designing a mobile website keeping in mind all leading browsers - Safari, Chrome, Dolphin, Opera. 我正在设计一个移动网站,牢记所有领先的浏览器 - Safari,Chrome,Dolphin,Opera。
I want to show a "loading" element as and when the page navigates / changes / new page is requested . 我想在页面导航/更改/新页面请求时显示“加载”元素。
I cannot use click event on anchor tags as there are many ones present with preventDefault();
我不能在锚标签上使用click事件,因为存在许多与preventDefault();
. 。
I tried the following: 我尝试了以下方法:
$(window).on('beforeunload', function() { ... });
But it does not work in Dolphin or Opera . 但它在Dolphin或Opera中不起作用。
Can someone suggest a cross-browser solution ? 有人可以建议跨浏览器解决方案吗?
-- -
EDIT : I realize I wasn't very clear in asking my question, apologies. 编辑 :我知道我不是很清楚地问我的问题,道歉。 I created a fiddle here- http://jsfiddle.net/hiteshpachpor/7dadA/5/ based on the response. 我在这里创建了一个小提琴 - http://jsfiddle.net/hiteshpachpor/7dadA/5/基于响应。 The example makes use of event bubbling. 该示例使用事件冒泡。
Now here's the problem I am facing. 现在这是我面临的问题。 I would be showing that loader ( $('.jacket').show();
) each time page changes / navigates. 每次页面更改/导航时,我都会显示加载程序( $('.jacket').show();
)。 But I don't want it to show up if a link is clicked; 但我不希望它显示是否点击了链接; I want to do other operations on my page instead. 我想在我的页面上做其他操作。 Now, adding the $('.jacket').hide();
现在,添加$('.jacket').hide();
line in all such actions would totally suffice but it will not be very ideal for scaling reasons. 在所有这些行动中的行完全就足够了,但对于缩放原因来说它不是很理想。
This is why I was evaluating the 'beforeunload'
method, but no luck there as it is not cross-browser compatible. 这就是为什么我在评估'beforeunload'
方法,但没有运气,因为它不是跨浏览器兼容的。
Any kind suggestions to tackle this issue? 有什么建议可以解决这个问题吗?
I think what you are trying to achieve are basic AJAX requests? 我认为你想要实现的是基本的AJAX请求? But you are going about it the wrong way. 但是你会以错误的方式去做。 You could instead, used a div to load in the requested pages and then setup an ajax start handler to display your loading message. 您可以改为使用div加载请求的页面,然后设置ajax启动处理程序以显示加载消息。
your page markup would look something like 你的页面标记看起来像
<nav>
<button data-url="homeURL">Home</button>
<button data-url="anotherURL">Other</button>
</nav>
<div id="loadhere"></div>
the resulting jquery would be like this: 结果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');
});
here is an example codepen 这是一个示例代码
hope this helps 希望这可以帮助
You could have a onLoad function in the body element that calls a loading div to appear, then setTimeout to lets say 3 seconds then hide loading div and show all other divs/the rest of body 你可以在body元素中有一个onLoad函数调用一个加载div来显示,然后setTimeout让我们说3秒然后隐藏加载div并显示所有其他div /其余的body
EDIT: I'm pretty sure this will work on all browsers. 编辑:我很确定这适用于所有浏览器。 I'll attach a code snippet once I get on my computer (on my phone now) ;) 一旦我上电脑(现在在我的手机上),我会附上一个代码片段;)
As was mentioned in the comments. 正如评论中提到的那样。 However I prefer event delegation instead of attaching events all over the dom. 但是我更喜欢事件委托而不是在整个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.');
});
Update: 更新:
Perhaps you should not trigger $('.jacket').show()
for "links". 也许你不应该为“链接”触发$('.jacket').show()
。
$('.jacket').hide();
$('a:not(.prevent)').click(function() {
$('.jacket').show();
});
$('.prevent').click(function(event) {
event.preventDefault();
$('.jacket').hide();
});
There is a jquery mobile widget for this. 有一个jquery移动小部件。 This is used till version 1.4 这使用到版本1.4
$.mobile.loading( "show", { //show loading image
text: "Your request is processing. please wait ...",
textVisible: true,
theme: "b",
textonly: false,
});
For help Jquery Mobile Loader Widget . 寻求帮助Jquery Mobile Loader Widget 。
In response to your edit: 为了回应您的编辑:
You can use event.isDefaultPrevented()
. 您可以使用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/ JSFiddle: http : //jsfiddle.net/F4uPx/
Caveat: Make sure you assign the $('a').click()
event handler after the other event handlers; 警告:确保在其他事件处理程序之后分配$('a').click()
事件处理程序; otherwise it will execute first and will fail since preventDefault()
won't have fired yet. 否则它将首先执行并将失败,因为preventDefault()
将不会被解雇。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.