javascript

检测浏览器是否安装flash

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。
Author: 吕大豹

Email: 670818517(at)qq.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function hasFlash(){
  if (navigator.plugins && navigator.plugins.length && navigator.plugins['Shockwave Flash']) {
    return true;
  } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
    var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];
    return mimeType && mimeType.enabledPlugin;
  } else {
    try {
      var ax = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
      return true;
    } catch (e) {}
  }
  return false;
}

Author： 墨尘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * [isSupportFlash description]
 * @return {number} [ -1（不支持flash） | flash版本号]
 */
function getFlashVersion() {
    var version = -1;
    if( window.ActiveXObject ) {
        try{
            var swf = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
            version = parseInt( swf.GetVariable("$version").split(" ")[1].split(",")[0]);
        }
        catch(e){}
    }
    else{
        if( navigator.plugins && navigator.plugins["Shockwave Flash"] ) {
            var arr = navigator.plugins['Shockwave Flash'].description.split(' ');
            var i = 0;
            var length = arr.length;
            if ( arr ) {
                for ( ; i < length ; i++) {
                    if (!isNaN( Number(arr[i]) )) {
                        version = Number(arr[i]);
                        break;
                    }
                }
            }
        }
    }
    return version;
}
javascript

图片懒加载

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
!function(window){
  var $q = function(q, res){
        if (document.querySelectorAll) {
          res = document.querySelectorAll(q);
        } else {
          var d=document
            , a=d.styleSheets[0] || d.createStyleSheet();
          a.addRule(q,'f:b');
          for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
            l[b].currentStyle.f && c.push(l[b]);

          a.removeRule(0);
          res = c;
        }
        return res;
      }
    , addEventListener = function(evt, fn){
        window.addEventListener
          ? this.addEventListener(evt, fn, false)
          : (window.attachEvent)
            ? this.attachEvent('on' + evt, fn)
            : this['on' + evt] = fn;
      }
    , _has = function(obj, key) {
        return Object.prototype.hasOwnProperty.call(obj, key);
      }
    ;

  function loadImage (el, fn) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;

      fn? fn() : null;
    }
    img.src = src;
  }

  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()

    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }

    var images = new Array()
      , query = $q('img.lazy')
      , processScroll = function(){
          for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
              loadImage(images[i], function () {
                images.splice(i, i);
              });
            }
          };
        }
      ;
    // Array.prototype.slice.call is not callable under our lovely IE8
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };

    processScroll();
    addEventListener('scroll',processScroll);

}(this);​
javascript

html5 标签在 IE 下使用

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

1
2
3
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
javascript

highstock rangeSelector

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。
Author: john

Email: john(at)hcharts.cn

Some thing about Highstock

1、rangeSelector

1) rangeSelector.buttons
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
rangeSelector: {
    buttons: [{
        type: 'day',
        count: 7,
        text: '1 周'
    }, {
        type: 'month',
        count: 1,
        text: '月'
    }, {
        type: 'month',
        count: 3,
        text: '季度'
    }, {
        type: 'all',
        text: '所有'
    }]
}

type 取值可以是：millisecond、second、minute、day、week、month、ytd（今年迄今）、year、all
text：显示的文字

2) rangeSelector 生效，但是不显示相应的按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Highcharts.setOptions({
  lang: {
      rangeSelectorZoom: ''    // hidden the text 'Zoom' show in chart
  }
})

$('#container').highcharts('Stock', {
    // ... 省略代码
    rangeSelector: {
        buttonTheme: {
            display: 'none'     // 不显示按钮
        },
        selected: 1,
        inputEnabled: false     // 不显示日期输入框
    }
});

3）获取当前 rangeSelector 选中的范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
xAxis: {
    events: {
        afterSetExtremes: function(e) {
            var extremes = chart.xAxis[0].getExtremes();

            // extremes.min 和 extremes.max 为当前的时间范围
            var start = Highcharts.numberFormat('%Y-%m-%d %H:%M:%S',extremes.min);
            var end = Highcharts.numberFormat('%Y-%m-%d %H:%M:%S',extremes.min);

            /**
              * use moment.js to format date
             * var start = moment(extremes.min).formate('YYYY-MM-DD HH:mm:ss');
             * var end = moment(extremes.max).formate('YYYY-MM-DD HH:mm:ss');
             */
        }
    }
}

4）设置 rangeSelector 按钮的宽高

1
2
3
4
5
6
rangeSelector: {
    buttonTheme: {
        width: 100,
        height: 20
    }
}

注：buttonTheme.width 和 buttonTheme.height 为 API 为公开的参数配置，可以通过源码知晓。

javascript

获取 url 的 param

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
2
3
4
5
6
7
8
9
function getQueryVariable(variable) {
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}

使用

比如地址：http://www.example.com/index.php?id=1&image=awesome.jpg

1
2
getQueryVariable("id") // 1
getQueryVariable("image") //awesome.jpg
javascript

获取全局产生的变量

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
2
3
4
5
6
7
8
9
10
11
;(function(){
  var ifr = document.createElement('iframe');
  document.body.appendChild(ifr);
  var pure = Object.getOwnPropertyNames(ifr.contentWindow);
  document.body.removeChild(ifr);
  var cur = Object.getOwnPropertyNames(window);
  var diff = cur.filter(function(item){
    return pure.indexOf(item) == -1 && item !== '__commandLineAPI';
  });
  console.log(diff, diff.length);
})();

javascript

修复 winPhone8 的 IE10 viewport 问题

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
2
3
4
5
6
7
8
9
(function() {
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
      document.createTextNode("@-ms-viewport{width:auto!important}")
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
  }
})();

Refer

Matt Stow: Responsive Design in IE10 on Windows Phone 8

Tim Kadlec: Windows Phone 8 and Device-Width

javascript

dispatchEvent模拟事件

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。
Author: Hawk

Email: whktk(at)qq.com

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

用JS手动修改input的值后，可以手动促发事件