jQurey浏览器页卡切换 用于实时接口的长轮询

加页卡切换,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript" src="http://mat1.gtimg.com/www/js/jquery/jquery-1.11.1.min.js"></script>
    <script>

/***
   切换浏览器tab,判断当前tab是否活跃
***/

    (function(g, h, $, b) {
        var e, i, f = ‘onfocusin‘ in h && ‘hasFocus‘ in h ? ‘focusin focusout‘ : ‘focus blur‘,
            d = [‘‘, ‘moz‘, ‘ms‘, ‘o‘, ‘webkit‘],
            c = $.support,
            a = $.event;
        while ((i = e = d.pop()) != b) {
            i = (e ? e + ‘H‘ : ‘h‘) + ‘idden‘;
            if (c.pageVisibility = typeof h[i] == ‘boolean‘) {
                f = e + ‘visibilitychange‘;
                break
            }
        }
        $(/blur$/.test(f) ? g : h).bind(f,
            function(m) {
                var l = m.type,
                    j = m.originalEvent,

                    k = j.toElement;

                if (!/^focus./.test(l) || (k == b && j.fromElement == b && j.relatedTarget == b)) {
                    a.trigger((i && h[i] || /^(?:blur|focusout)$/.test(l) ? ‘hide‘ : ‘show‘) + ‘.visibility‘)
                }
            })
    }(this, document, jQuery));

    var o={}
    o.$tabFlag = true;
     /**  切换页卡 **/  

    var changeTab=function() {

        //var _this = this;
        //var o = this.options;
        console.log(333)
        $(document).bind({
            ‘show.visibility‘: function() { // 当前活跃
                o.$tabFlag = true;

                console.log(222)
            },

            ‘hide.visibility‘: function() { // 失去当前状态
                o.$tabFlag = false;
                console.log(11111)
            }
        });
    }

    changeTab();

    </script>

</head>
<body>

</body>
</html>
  
时间: 2024-10-18 19:47:19

jQurey浏览器页卡切换 用于实时接口的长轮询的相关文章

轮询、长轮询与Web Socket的前端实现页面数据实时

Web Socket 应用场景:实现即时通讯:如股票交易行情分析.聊天室.在线游戏等,替代轮询和长轮询 1.轮询 轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器.这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽. var xhr = new XMLHtt

Web 通信 之 长连接、长轮询(long polling)---实时推送

由于浏览器属于无状态端,页面数据如果想得到及时更新,那需要与服务端保持状态连接,以便有变更能即使改变相关状态. 推荐几篇总结不错的关于长连接.长轮询帖子: 使用:setInterval\iframe\ajax方式来保持长连接: http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html使用框架,signalR.comet SignalR:http://www.codeproject.com/Articles/3

Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)

我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,应该知道,这里面代码可用作 app 通用的底部栏导航,通过它能快速的实现类似微信6.0版本以底部导航的 app 整体架构,并且在 MainActivity 中需要编写的代码非常简洁.如果有兴趣的朋友可以去看看. 效果: 今天这篇 blog的内容同样可以拿来做 app 的整体架构,但与前面那篇 blog 不同,不同之

基于轮询实现实时的在线投票系统

需求 用户在投票的页面可以实时的监测到,投票详情 在这里我会通过轮询和长轮询(推荐使用这个,可以减少请求数,实时性也好)的方法来实现 基于轮询实现投票系统 大致的思路是前端开启一个定时器每隔10秒定时的向服务器获取投票的结果 from flask import Flask,render_template,request,jsonify app = Flask(__name__) USERS = { '1':{'name':'贝贝','count':1}, '2':{'name':'小东北','c

一次优化列表页卡顿的经历

写下这篇文章的日期是2016年4月初.当时来到公司,项目之前是外包出去的,代码乱糟糟的,需要重构掉, 摆在面前的问题不是重构项目,而是一些列表页的紧急的性能优化. 1.先优化item的层级 其实层级只要不是太深的话,比如5层,6层,对性能的差别在中等性能的机器上几乎看不出来的,但是想要做到 极致, 我就得死扣细节,原来代码是有4层的,其实有一点点接近可优化的范围了,我把原来的4层降到1层. 1层的话在item的话,在cpu进行计算测量的时候就速度很快了. 下面是我用DDMS去查看某台和我台的列表

扒皮下腾讯网站地图页面页卡的滚动特效

今天要扒的是腾讯网站地图页面(http://www.qq.com/map/)页卡滚动效果,见下图 有兴趣的童鞋可以去那页面试一试,其动画效果见下图: 那么先理下思路:上方的按钮对应下方的某个栏目,点击某按钮时,其对应的栏目(暂且称为A吧)滚到最上方,原本在A前方的栏目则在滚动结束后自动跳到最后面(这里要注意顺序,比如在A前面有2个栏目B和C,那么B滚完便跳到最后,然后C开始滚,C滚完跳到最后面). 咱这里说的“跳”可以用append实现,即把前面的元素有序地移到最后.至于滚动,可以在全部栏目外围

ViewPager实现页卡的3种方法(谷歌组件)

----方法一:---- 效果图: 须要的组件: ViewPager+PagerTabStrip 布局文件代码: <!--xmlns:android_custom="http://schemas.android.com/apk/res/com.pengkv.bigo"--> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou

jquery tag页签切换

? $(document).ready(function () {     var tag=$(".tags");     tag.mouseover(function(){         $(this).addClass("tagOn").siblings().removeClass("tagOn");         var index =  tag.index(this);         $("#tagsBody")

ViewPager设置 缓存个数、页卡间距、数据更新

在使用ViewPager常用设置 1)mViewPager.setOffscreenPageLimit(2);//设置缓存view 的个数(实际有3个,缓存2个+正在显示的1个)2)mViewPager.setPageMargin((int)getResources().getDimensionPixelOffset(R.dimen.ui_5_dip));//设置viewpager每个页卡的间距,与gallery的spacing属性类似 3)ViewPager更新数据问题: 直接使用notify