精华内容
下载资源
问答
  • 如何监听页面关闭刷新动作

    千次阅读 2018-06-14 01:41:57
    原文:如何监听页面关闭刷新动作-fengxianqi 其实这篇文章也可以叫如何监听并上传用户观看的视频时长。最近有需求做到,监听用户播放视频的动作并上报播放事件,需要上报的是用户观看视频的时长。这里就有几种...

    原文:如何监听页面关闭或刷新动作-fengxianqi

    其实这篇文章也可以叫如何监听并上传用户观看的视频时长。最近有需求做到,监听用户播放视频的动作并上报播放事件,需要上报的是用户观看视频的时长。这里就有几种情况了,一是用户点击播放,然后直到视频播放完毕,触发video.ended事件,此时上报用户的观看时长,这个比较好处理。第二种情况是用户点击播放后离开或刷新页面,在用户离开前需要把事件上报,这里主要会触发window.onunload事件,看起来可以做到,其实有坑。

    由于公司采用的技术方案是.m3u8(hls),而这种格式目前PC浏览器只有Safari才支持,chrome、Firefox或移动端安卓其他的大部分浏览器都不支持播放这种格式。因此,用原生video标签的方案是不行了,得找一些插件或播放器。最终选择了DPlayer这个播放器,一个比较不错的开源播放器,简单易用。 说回正事,上报用户观看视频的时长。

    重要更新

    经评论区 @音客 指点,使用Navigator.sendBeacon()将会更好的支持上报事件,这是一个专门处理数据埋点的api,但是使用时请注意浏览器兼容性问题,目前(2018.06)移动端Android 5以上支持,ios需要11.3版本以上,具体请看CanIUse。 本篇使用new Image()方法可以作为sendBeacon()的不兼容时的降级处理方法,更多请参考:使用 navigator.sendBeacon() 上报数据

    目标

    用户观看视频结束时上报观看时长。

    准备工作

        const dp = new DPlayer({
            container: document.getElementById('dplayer'),
            screenshot: true,
            video: {
                url: 'xx.m3u8',
                pic: 'xx.jpg',
                type: 'customHls',
                customType: {
                    'customHls': function (video, player) {
                        const hls = new Hls();
                        hls.loadSource(video.src);
                        hls.attachMedia(video);
                    }
                }
            }
        });
    
        // 是否播放的标记
        var isPlay = false;
        dp.on('play', function () {
            console.log('player start');
            isPlay = true;
        });
    复制代码

    第一种常规的情况,用户完整地看完了视频。

        dp.on('ended', function () {
          console.log('player ended');
          sendVideoPlayEvent(); //上报事件方法
          isPlay = false;
        });
    复制代码

    第二种情况,关闭浏览器或刷新页面

    用户关闭页面或刷新浏览器时会触发onunload事件,用户开始观看视频到离开页面,这一段时间就是用户观看视频的时长。

        window.onunload = function () {
          sendVideoPlayEvent();
          isPlay = false;
          console.log('onunload');
        };
    复制代码

    坑点

    经测试发现,sendVideoPlayEvent时,如果采用ajax,无论是post或get方式,将无效。这里的原因可能是页面关闭太快,ajax无法执行。 查了很多解决方案,最后发现,需要通过巧妙的方法来发起这个事件。就是利用img标签的src属性,将img插入到body中时会发起一个请求来获取资源,而服务端可以对这个路由进行处理,最后发现这种方法是可行的,成功地在onunload中上报事件了。

        function sendVideoPlayEvent() {
          if (isPlay) {
            var videoId = getQueryString('videoId');
            var duration = dp.video.currentTime; // 视频播放时间可以直接通过currentTime获得
            var img = new Image();
            img.style.display = 'none';
            img.src = `/api/video/play?duration=${duration}&videoId=${videoId}`; // 服务端处理接口
            document.body.appendChild(img);
          }
        }
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    复制代码

    总结

    1. 后来想想,script标签的src应该也可以实现,没去验证。
    2. 坑总是很多,多动脑筋。。。
    3. 思路有点局限,应该还有其他解决方案,欢迎建议。
    展开全文
  • 在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接、关闭页面、表单提交时等情况,会提示我们是否确认该操作等信息。 这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。 相同点: ...

    在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接、关闭页面、表单提交时等情况,会提示我们是否确认该操作等信息。

    这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。

    相同点:

    两者都是在对页面的关闭或刷新事件作个操作。

    不同点:

    unbeforeunload()事件执行的顺序在onunload()事件之前发生。(因为,unbeforeunload()是在页面刷新之前触发的事件,而onubload()是在页面关闭之后才会触发的)。

    unbeforeunload()事件可以禁止onunload()事件的触发。

    onunload()事件是无法阻止页面关闭的。

    浏览器的兼容

    onunload:

    IE6,IE7,IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行;

    IE9 刷新页面 会执行,页面跳转、关闭浏览器不能执行;

    firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行,但关闭浏览器不能执行;

    Safari 刷新页面、页面跳转之后会执行,但关闭浏览器不能执行;

    Opera、Chrome 任何情况都不执行。

    onbeforeunload:

    IE、Chrome、Safari 完美支持

    Firefox 不支持文字提醒信息

    Opera 不支持

    IE6,IE7会出现bug

    示例代码:

    onbeforeunload():

    方式一:html元素中添加

    
    
    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4. <meta charset="utf-8"
    5. <title></title> 
    6. </head> 
    7. <body οnbefοreunlοad="return myFunction()"
    8.   
    9. <p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p> 
    10. <p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p> 
    11. <a href="http://www.qqtimezone.top">博客地址</a>      
    12. <script> 
    13. function myFunction() { 
    14.     return "自定义内容"
    15. </script> 
    16.   
    17. </body> 
    18. </html> 

    方式二:javascript中添加

    
    
    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4. <meta charset="utf-8"
    5. <title>菜鸟教程(runoob.com)</title> 
    6. </head> 
    7. <body> 
    8.   
    9. <p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p> 
    10. <p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p> 
    11. <a href="http://www.runoob.com">点击调整到菜鸟教程</a> 
    12. <script> 
    13. window.onbeforeunload = function(event) { 
    14.     event.returnValue = "我在这写点东西..."
    15. }; 
    16. </script> 
    17.   
    18. </body> 
    19. </html> 

    方式三:添加addEventListener()事件(不过此方法IE8以下不支持)

    
    
    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4. <meta charset="utf-8"
    5. <title></title> 
    6. </head> 
    7. <body> 
    8.   
    9. <p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p> 
    10. <p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p> 
    11. <a href="http://www.qqtimezone.top">跳转地址</a> 
    12. <script> 
    13. window.addEventListener("beforeunload"function(event) { 
    14.     event.returnValue = "我在这写点东西..."
    15. }); 
    16. </script> 
    17.   
    18. </body> 
    19. </html> 

    onunload():

    方式一:html元素中添加

    
    
    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4.     <title></title> 
    5.     <script type="text/javascript"
    6.         function fun() { 
    7.             // dosomethings 
    8.         } 
    9.     </script> 
    10. </head> 
    11. <body οnunlοad="fun()"
    12.   
    13. </body> 
    14. </html> 

    方式二:javascript添加

    
    
    1. <!DOCTYPE html> 
    2. <html> 
    3.   
    4. <head> 
    5.     <title></title> 
    6.     <script type="text/javascript"
    7.     window.onunload = function() { 
    8.         // dosomethings 
    9.     }; 
    10.     </script> 
    11. </head> 
    12.   
    13. <body> 
    14. </body> 
    15.   
    16. </html> 


    本文作者:太平洋警察

    来源:51CTO

    展开全文
  • 有一个需求,当用户在页面中进行刷新和关闭页面的时候显示一个弹框提示用户功能。于是自己就想到onbeforeunload、onunload、onload这几个事件,但是在使用的过程中有种心累的感觉。。。onbeforeunload:在页面刷新和...

    有一个需求,当用户在页面中进行刷新和关闭页面的时候显示一个弹框提示用户功能。

    于是自己就想到onbeforeunload、onunload、onload这几个事件,但是在使用的过程中有种心累的感觉。。。

    onbeforeunload:在页面刷新和关闭的时候触发事件,表示正要去服务器读 取新的页面时调用,此时还没开始读取,

    onunload:则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。

    onload就不用说了

    onbrforeunload和onunload都会在刷新和关闭页面是触发,但是onbeforeunload在onunload之前执行,并且它还可以阻止onunload的执行。那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload

    但是在使用的过程中,自己深深的踩了一个坑

    首先是是兼容性的问题:

    正如你看到的菜鸟教程和w3c上的介绍是多么的赏心悦目

    bcd8147283d5c1d5f6ded626344c0079.png

    285e18ca1cc23d4b7fb1e39c40254c7d.png

    但是现实总是残酷的,onbeforeunload事件在ie和谷歌中都没有问题,但是在火狐中却没有任何反应,代码如下:

    Document

    //这个在火狐下不起作用

    window.οnbefοreunlοad=function(e){

    return "我在这写点东西";

    }

    window.οnunlοad=function(){

    alert("离开")

    }

    window.οnlοad=function(){

    alert("加载完成");

    }

    onbeforeunload中的return是自定义提示信息,并且如果没有return在谷歌中是不会有反应,ie则不会出现这个情况。

    onunload事件也只有在ie中才起作用,在其他浏览器中也没有反应。

    不知道哪位大神可以解答一下,怎么解决这些问题(百度找了好多,都是一些没有用的方法...)

    展开全文
  • layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新页面列表。 layer.closeAll(); parent.layer.closeAll(); window.parent.location.reload(); 转载于:...

    layer.open打开一个新的jsp页面弹框,如何关闭呢?

    在新的页面提交完毕之后,关闭并刷新父页面列表。

    layer.closeAll();
    parent.layer.closeAll();
    window.parent.location.reload();

     

    转载于:https://www.cnblogs.com/yangyuke1994/p/10168785.html

    展开全文
  • 亲测;以下代码对ie,360,qq,chrom浏览器有效。。。beforeunload事件和unload事件请自行百度。... //发送请求,刷新一次,后台数据自增一次,大家查看后台数据就知道了,这两个事件是起了作用的 ...
  • date) var time = newTime - date if(time){ console.log('判断为刷新') }else { console.log('判断为关闭') } } body.onbeforeunload = function(e){ // 无论是关闭页面还是刷新页面都会调用这个生命周期函数 ...
  • 上一层页面有两个tag ... <code class="language-javascript"> success: function (data) { var result = data; if (result) { jeBox.msg("...现在写的这个返回并刷新在第一...让他返回对应上一层页面刷新</p>
  • 因为要做关闭页面退出功能,但页面跳转和刷新时并不做退出事件,需要甄别刷新和关闭,也查找了很多方法,踩了许多深坑,在这里记录一下自己的方法吧。 不同的浏览器刷新和关闭时对onbeforeunload()和onunload()...
  • 页面拦截(beforeunload事件) window.addEventListen(“beforeunload”,(e) => { const message = '即将离开当前页面,确认吗??' e.returnValue = message; return message; })
  • 有一个需求,当用户在页面中进行刷新和关闭页面的时候显示一个弹框提示用户功能。 于是自己就想到onbeforeunload、onunload、onload这几个事件,但是在使用的过程中有种心累的感觉。。。 onbeforeunload:在页面...
  • websocket在不用时需要及时关闭,否则会对造成服务端压力 思路(错误) 将关闭websocket的方法放在beforeDestroy钩子函数中 data(){ return{ ws:"", } }, methods:{ //关闭websocket closeWebsocket(){ if...
  • 页面用的easyui写的,如何在iframe页面点击添加 关闭iframe页面并且刷新之前的父页面,或者各路大神有其他写法和建议 求指导 点击添加 跳出iframe页面 [img=...
  • 一个层关闭之后,就算刷新页面了也不显示...除非关闭页面再次打开 #myDiv{ border:1px solid red; background:#cccccc; width:100px; height:100px; } #mySpan{ cursor:pointer; } 关闭 [Ctrl+A 全选
  • c# activex 控件如何监控页面刷新关闭啊 最好有代码,谢谢
  • 后期补充: window.open模式 window.onbeforeunload=...这段代码问题:只有手动关闭页面,才能刷新页面。。。用<script>alert('xx');window.close();</script>这种方式是不行的。。。 方案: ...
  • 请问如何判断页面刷新还是关闭浏览器,主要是处理浏览器异常关闭 1.我尝试用onbeforeunload方法 发现不管用,我咋搞个超链接,点击的时候也触发了obbeforeunload事件呢 2、怎么判断浏览器是刷新还是关闭呢...
  • 关闭A页面 刷新 B页面

    2011-12-22 09:55:11
    如何在asp.net中关闭B页面时,自动刷新A页面? 前提条件:B页面是由A页面打开的。 方法: 在A页面的前台代码中加入以下代码: function DownDvasp(htmlurl){var newwin=window.open(htmlurl,'','toolbar...
  • 现在我要记录页面PV,页面关闭和跳转时记录,但是刷新时不记录, 现在无法真正将”刷新“隔离出来,还要支持主流的浏览器,网上很多方法不是很好使。
  •  页面刷新时先执行onbeforeunload,然后onunload,最后onload。这样我们可以在onbeforeunload中加一个标记,在onunload中判断该标记,即可达到判断页面是否真的关闭了。 <html>  <head>  <title&...
  • 见代码 layer.open({ type : 2, area : [ w + 'px', h + 'px' ], fix : false, // 不固定 ... 这样就能在你修改完数据之后,关闭修改框,会自动刷新当前数据。 如您在阅读中发现不足,欢迎留言!!!
  • 最近在做实时视频这块的封装,需要客户端Ajax实时上报状态给服务端,以确认用户的当前的通话状态。这个时候,涉及到当用户离开客户端时候(关闭浏览器),发送离线状态给...1、beforeunload在用户即将离开页面时触...
  • 在tomcat服务启动下,父页面通过showmodaldialog()方法打开子页面,子页面关闭时未提交任何东西,请问为何子页面关闭时,父页面刷新如何控制父页面刷新

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 619
精华内容 247
关键字:

如何关闭页面刷新