2011-09-26 67 views
10

我想要一个动画效果,当人们离开一个页面时开始。我可以在beforeUnload中放入什么?

我用这个目前:

window.onbeforeunload = function(){ 
    alert("test"); 
    console.log("test"); 
    sliderIntervalId = setInterval('SlideDown()',1); 
} 

虽然“测试”确实记录到控制台,无论在功能了slideDown也没有测试警报产生...

这是正常的行为?我们可以使用beforeunload函数仅用于后端目的吗?

P.S.我正在使用chrome进行测试,这就是为什么我不得不在onLoad上使用onbeforeUnload i.s.o,这似乎不被Chrome支持?

+0

我不认为你可以推迟新的页面加载onbeforeunload。提醒实际上会停止执行并冻结页面,直到您单击该提醒。 – ChrisR

+2

P.S.在不相关的注释中,你不应该将字符串传递给'setTimeout',你应该传递函数。 'setInterval(SlideDown,1);' –

+1

Chrome会阻止'onbeforeunload'中的'alert'。如果您在控制台中查看,您会在beforeunload期间看到'Blocked alert('test')'。 Chrome支持'onunload',但它的功能非常有限。检查这个小提琴:http://jsfiddle.net/EE4Md/3/ –

回答

16

onbeforeunload可以延迟页面卸载只有一个情况:当return语句返回一个定义值。在这种情况下,用户会得到一个确认对话框,它向用户提供一个不离开页面的选项。

您的期望结果不能以任何方式强制。你的动画将运行,直到浏览器开始加载下一页:

[User] Navigates away to http://other.website/ 
[Your page] Fires `beforeunload` event 
[Your page] `unload` event fires 
[Browser] Received response from http://other.website/ 
[Browser] Leaves your page 
[Browser] Starts showing content from http://other.website/ 
3

Jorrebor, 如果你想,当他们离开你的网站或接近预期的,它不会工作的浏览器有这个动画火。但是,您可以在用户在网站中旅行时创建此动画,方法是删除链接的“href”属性并创建具有设置window.location属性的回调函数的动画。喜欢的东西:工作

document.getElementById('home').onclick(function(){ 
    yourAnimationFunction(function(){ 
      window.location="example.com"; 
    }); 
}); 

了很多,不会是搜索引擎友好然而

3

我与onbeforeunload工作,我能搞清楚的是:

  • onbeforeunload处理程序被阻止浏览器从销毁当前页面
  • 如果您不返回任何内容,弹出窗口不会出现。

因此,只要事件处理程序运行,您的代码就会工作。 这意味着定时器功能不可用。他们只是添加到执行队列中,所以他们要做的任何事情都是在之后排队当前正在运行的处理程序的末尾,这是在最后一个时间点之后,您确保您的代码仍在运行。

所以只有一个办法,从动画完成之前卸载停止浏览器:

  • 投入阻塞循环,浪费了一些时间在beforeunload处理
  • 通过设置相应的类
  • 开始CSS3动画循环之前的元素
  • 使循环结束时,在动画完成(使循环检查的元素或某事的实际高度)

噢,是的,这是所有的最蹩脚的黑客攻击,但我能找到一种方法来阻止浏览器卸载该页面,对吧?

我会很高兴评论什么投入循环的想法。 我采取了一些选项考虑:

  • 大数
  • 访问的localStorage(同步调用,IO operration)
  • 访问DOM(该解决方案已经具备)
来吧数学浪费CPU

有没有想法?

4

假设的jQuery为简洁起见:

$('nav a').click(function (e) { 

    //ignore any "modified" click that usually doesn't open in the current window 
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) { 
     return; 
    } 

    //where you going here? 
    var place = this.href; 

    //you're not going anywhere, buddy 
    e.preventDefault(); 

    //watch me dance, first 
    $('.animate-me').fadeOut(1000, function afterAnimation() { 

     //you're free to go! 
     document.location = place; 
    }); 
}); 

基本上,你不使用onbeforeunload。一个好处是,你可以保持用户只要你想要的,一个缺点是,当使用nav以外的链接时,用户不会看到动画(但你可以改变选择器)

显然保留动画快,就像suddenlyoslo.com呢。

+1

这将工作,如果用户点击'a'链接。如果他们在地址栏中直接输入* www.othersite.com *,或者iframe中的某个站点想要重定向到www.someothersites.com,这将会失败。您可以在** http://jsfiddle.net/** *中测试我的意思,尝试输入任何输入,然后尝试退出页面*。 – ErickBest

+0

这是正确的。除非导航是触发**页内**,否则不能可靠地持有浏览器,特别是如果您期望动画完成。我通常在'onbeforeunload'上将这个方法与**更简单的**动画结合使用,所以我抓住了这两种情况。 –

相关问题