Skip to main content

JS Cookbook

// 简单的播放音频
var audio = new Audio('audio_file.mp3');
audio.play();

// JSON 序列化缩进
JSON.stringify({ a: 1, b: 2, c: { d: 1, e: [1, 2] } }, null, 4); // Indented 4 spaces
JSON.stringify({ a: 1, b: 2, c: { d: 1, e: [1, 2] } }, null, '\t'); // Indented with tab

// 模拟按键
var keyboardEvent = document.createEvent('KeyboardEvent');
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? 'initKeyboardEvent' : 'initKeyEvent';

keyboardEvent[initMethod](
  'keydown', // event type : keydown, keyup, keypress
  true, // bubbles
  true, // cancelable
  window, // viewArg: should be window
  false, // ctrlKeyArg
  false, // altKeyArg
  false, // shiftKeyArg
  false, // metaKeyArg
  40, // keyCodeArg : unsigned long the virtual key code, else 0
  0, // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);

// 模拟 jq 按键事件
jQuery.event.trigger({ type: 'keypress', which: character.charCodeAt(0) });

/**
 * 全屏
 *
 * @see http://fullscreen.spec.whatwg.org/
 * @see https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
 */
function fullscreen() {
  var element = document.body;
  // Check which implementation is available
  var requestMethod =
    element.requestFullScreen ||
    element.webkitRequestFullscreen ||
    element.webkitRequestFullScreen ||
    element.mozRequestFullScreen ||
    element.msRequestFullscreen;

  if (requestMethod) {
    requestMethod.apply(element);
  }
}
//
if (!String.prototype.startsWith) {
  Object.defineProperty(String.prototype, 'startsWith', {
    value: function (search, rawPos) {
      var pos = rawPos > 0 ? rawPos | 0 : 0;
      return this.substring(pos, pos + search.length) === search;
    },
  });
}

检测方向​

var query = window.matchMedia('(orientation:landscape)');
var isPortrait = !query.matches;

function getOrientation() {
  return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
}

// https://developer.mozilla.org/en-US/docs/Web/API/Screen
// http://caniuse.com/screen-orientation/embed/
screen.orientation.type;

// https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange
window.addEventListener('orientationchange', function () {
  alert('the orientation of the device is now ' + screen.orientation.angle);
});

检测网络连通性​

function doConnectFunction() {}
function doNotConnectFunction() {}

var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
// CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE
i.src = 'http://server.com/some.png?t=' + Date.now();

检测窗口激活状态​

// 切换 tab 后会触发
document.addEventListener('visibilitychange', (e) => console.log('visibilitychange', e));
document.hidden;

// 窗口获取焦点后触发
window.addEventListener('focus', (e) => console.log('focus', e));
document.hasFocus();

sessionStorage 跨 Tab​

// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function (event) {
  if (!event) {
    event = window.event;
  } // ie suq
  if (!event.newValue) return; // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if (window.addEventListener) {
  window.addEventListener('storage', sessionStorage_transfer, false);
} else {
  window.attachEvent('onstorage', sessionStorage_transfer);
}

// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
}

检测虚拟机​

var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');

var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

console.log(vendor);
console.log(renderer);

formatBytes​

function formatBytes(bytes, decimals) {
  if (bytes == 0) return '0 Bytes';
  var k = 1024,
    dm = decimals || 2,
    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

// Usage:
// formatBytes(bytes,decimals)

formatBytes(1024); // 1 KB
formatBytes('1024'); // 1 KB
formatBytes(1234); // 1.21 KB
formatBytes(1234, 3); // 1.205 KB