通过javascript判断浏览器是否支持webp

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}
check_webp_feature('lossy', function(f, r){ console.log(f, r);});

原文发址:https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_using_javascript

history对象

概述

浏览器窗口有一个history对象,用来保存浏览历史。比如,该窗口先后访问了三个地址,那么history对象就包括三项,length属性等于3。

history.length // 3

history对象提供了一系列方法,允许在浏览历史之间移动。

back():移动到上一个访问页面,等同于浏览器的后退键。
forward():移动到下一个访问页面,等同于浏览器的前进键。
go():接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward(),go(-1)相当于back()。

history.back();
history.forward();
history.go(-2);

如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是默默的失败。

以下命令相当于刷新当前页面。

history.go(0);

history.pushState(),history.replaceState()

HTML5为history对象添加了两个新方法,history.pushState() 和 history.replaceState(),用来在浏览历史中添加和修改记录。所有主流浏览器都支持该方法(包括IE10)。

if (!!(window.history && history.pushState)){
// 支持History API
} else {
// 不支持
}

上面代码可以用来检查,当前浏览器是否支持History API。如果不支持的话,可以考虑使用Polyfill库History.js。

history.pushState方法接受三个参数,依次为:

state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

假定当前网址是example.com/1.html,我们使用pushState方法在浏览记录(history对象)中添加一个新记录。

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");

添加上面这个新记录后,浏览器地址栏立刻显示example.com/2.html,但并不会跳转到2.html,甚至也不会检查2.html是否存在,它只是成为浏览历史中的最新记录。假定这时你访问了google.com,然后点击了倒退按钮,页面的url将显示2.html,但是内容还是原来的1.html。你再点击一次倒退按钮,url将显示1.html,内容不变。

注意,pushState方法不会触发页面刷新。

如果 pushState 的url参数,设置了一个当前网页的#号值(即hash),并不会触发hashchange事件。

history.replaceState方法的参数与pushState方法一模一样,区别是它修改浏览历史中当前页面的值。假定当前网页是example.com/example.html。

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // url显示为http://example.com/example.html?page=1
history.back(); // url显示为http://example.com/example.html
history.go(2); // url显示为http://example.com/example.html?page=3

popstate事件

每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。需要注意的是,仅仅调用pushState方法或replaceState方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用JavaScript调用back、forward、go方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

使用的时候,可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象,它的state属性指向pushState和replaceState方法为当前url所提供的状态对象(即这两个方法的第一个参数)。

window.onpopstate = function(event) {
console.log("location: " + document.location);
console.log("state: " + JSON.stringify(event.state));
};
// 或者
window.addEventListener('popstate', function(event) {
console.log("location: " + document.location);
console.log("state: " + JSON.stringify(event.state));
});

上面代码中的event.state,就是通过pushState和replaceState方法,为当前url绑定的state对象。

这个state对象也可以直接通过history对象读取。

var currentState = history.state;

另外,需要注意的是,当页面第一次加载的时候,在onload事件发生后,Chrome和Safari浏览器(Webkit核心)会触发popstate事件,而Firefox和IE浏览器不会。

JavaScript小技巧:如何检测一个函数是否是JavaScript原生函数

在我的开发工作中经常会遇到需要判断一个函数是否是JavaScript原生函数的情况,有时候这是一个很必要的工作,你需要知道这个函数是浏览器自身提供的,还是由第三方封装、伪装成原生函数。当然,最好的方法是考察执行这个函数的toString方法的返回值。

The JavaScript

完成这个任务的方法非常简单:

function isNative(fn) {
	return (/\{\s*\[native code\]\s*\}/).test('' + fn);
}

toString方法会返回这个方法的字符串形式,然后用正则表达式判断里面包含的字符。

更强悍的方法

Lodash的创始人John-David Dalton找到了一个更佳的方案:

;(function() {

  // Used to resolve the internal `[[Class]]` of values
  var toString = Object.prototype.toString;
  
  // Used to resolve the decompiled source of functions
  var fnToString = Function.prototype.toString;
  
  // Used to detect host constructors (Safari > 4; really typed array specific)
  var reHostCtor = /^\[object .+?Constructor\]$/;

  // Compile a regexp using a common native method as a template.
  // We chose `Object#toString` because there's a good chance it is not being mucked with.
  var reNative = RegExp('^' +
    // Coerce `Object#toString` to a string
    String(toString)
    // Escape any special regexp characters
    .replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')
    // Replace mentions of `toString` with `.*?` to keep the template generic.
    // Replace thing like `for ...` to support environments like Rhino which add extra info
    // such as method arity.
    .replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
  );
  
  function isNative(value) {
    var type = typeof value;
    return type == 'function'
      // Use `Function#toString` to bypass the value's own `toString` method
      // and avoid being faked out.
      ? reNative.test(fnToString.call(value))
      // Fallback to a host object check because some environments will represent
      // things like typed arrays as DOM methods which may not conform to the
      // normal native pattern.
      : (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
  }
  
  // export however you want
  module.exports = isNative;
}());

现在你也看到了,很复杂,但更强大。当然,这不是为了做安全防护,它只是给你提供是否是原生函数的相关信息。

iframe实现无刷新上传文件[升级版本]

【改进】
使用label的for属性来取代js的event转移,解决IE下“SCRIPT5: 拒绝访问”的问题;

【html】

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
// 当前上传对象
var _current    = null;
// 上传回调方法
function onUploadSuccess(info){
    // 控制台调试,可能是因为console没定义导致IE无法使用此功能
    typeof console.dir!=='undefined' && console.dir(info);
    // 上传成功
    if(typeof info.status!=='undefined' && typeof info.path!=='undefined' && info.status==1 && info.path!=''){
        // 改变图片src,实现实时预览
        if(_current.find('img').size()>0)
            _current.find('img:eq(0)').prop('src', info.path);
        else
            _current.html('<img src="'+info.path+'" width="100%" height="100%" />');
        // 返回
        return;
    }
    // 上传失败则提示错误信息
    alert(info.info);
    // 返回
    return;
}
$(function(){
    $('label[for]').click(function(){
        _current    = $(this);
        $('.uploadform')[0].reset();
    });
    $('.uploadform input:file').change(function(){
        $(this).parent().submit();
    });
});
</script>
</head>
<body>

<label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label>
<label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label>

<form style="display:none;" class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe">
    <input type="file" name="photo1" id="photo1" />
    <iframe style="display:none;" name="uploadiframe"></iframe>
</form>

</body>
</html>

【php】

<?php
$retval = array('status'=>0, 'info'=>'', 'path'=>'');
if(/*upload success*/){
    $retval['status'] = 1;
    $retval['path'] = 'somepath';
}else{
    $retval['info'] = 'someerror';
}
echo "<script>{$_GET['callback']}(".json_encode($retval).");</script>";
exit;

使用console.table()调试javascript

或许你已经习惯了console.log()来调试js,非常好用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于:

主要用来输出对象和数组;
更加直接的可视化,以表格形式展现;
可以单独输出某个或某几个属性;
详情点击:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

javascript文件中获取当前文件路径

在开发javascript插件的过程中,我们有时候需要获取当前JS文件的路径,用于自动加载一些图片、CSS等外部资源,但是javascript文件中并没有像PHP那样的__FILE__常量来供我们取得当前文件路径。
在开发javascript插件的过程中,我们有时候需要获取当前JS文件的路径,用于自动加载一些图片、CSS等外部资源,但是javascript文件中并没有像PHP那样的__FILE__常量来供我们取得当前文件路径。研究了下,发现我们可以用下面几种方法来实现:

1,在jQuery中获取当前JS文件路径

在jQuery中获取当前JS文件的路径比较简单,只需要如下一行代码就搞定。

var __FILE__ = $("script").last().attr("src");

复制代码

注意,我们一般把这行代码放到文件的开头,让文件加载的时候就立即执行,这样页面中的script元素中,当前文件恰好是最后一个script。我们千万不要把这行代码放到

$(document).ready();
$(function(){   });

复制代码
中运行,因为如果放到这些语句中去的话,页面的DOM对象已经加载完毕,当前的script就不一定是最后一个script了,从而导致获取的路径不正确。

2,原生javascript获取当前JS文件路径

在原生的javascript中,要获取当前JS文件路径有两种方法。第一种其实思路和在jQuery中是一样的:

var __FILE__, scripts = document.getElementsByTagName("script");
__FILE__ = scripts[scripts.length - 1].getAttribute("src");

第二种方法是利用浏览器的异常处理机制,但是这种方法不支持IE10以下版本的IE浏览器:

    var __FILE__;
    try {
        throw Error("获取JS路径有误");
    }catch(ex){
        if(ex.fileName) //Firefox
            __FILE__ = ex.fileName;
        else if(ex.stack)//Chrome 或 IE10
            __FILE__ = (ex.stack.match(/at\s+(.*?):\d+:\d+/)||['',''])[1];
        else if(ex.sourceURL)//Safari
            __FILE__ = ex.sourceURL;
    }

在原生的javascript中获取当前文件路径的时候,建议使用第一种方法,兼容所有浏览器,第二种方法仅供参考。

使用new Image()打点时的一个注意事项

网站分析中,我们经常会用new Image()的方式向服务器发送一条打点消息,例如:

(new Image()).src = "http://log.mysite.com/1.gif?a=1&b=2&c=xxx";

这种方式简单易用,因而被广泛采用。但上面这段代码的问题是这个new Image()是一个没有引用的临时变量,随时可能被浏览器的垃圾回收机制回收。如果这个图片的HTTP请求尚未建立,那么在被回收时这个请求就会被取消,导致打点并没有真正发出。如果打点所在的页面比较复杂,浏览器垃圾回收机制可能会被频繁触发,那么这种方式打点的丢失率可能会高达10%以上。

解决方法很简单,将这个图片赋值给一个全局变量即可,例如:

var img = new Image();
var rnd_id = "_img_" + Math.random();
 
window[rnd_id] = img; // 全局变量引用
 
img.onload = img.onerror = function () {
    window[rnd_id] = null; // 删除全局变量引用
}
 
img.src = "http://log.mysite.com/1.gif?a=1&b=2&c=xxx";

Javascript 严格模式 strict mode

“严格模式”(strict mode)是ECMA-262 Edition 5定义的新语法,表示要用严格的Javascript语法来执行,有一些过去惯用的写法就会抛出SyntaxError异常,例如:
变量前没有用var宣告
使用八进制语法:var n = 023和var s = “\047”
使用with语句
使用delete删除一个变量名(而不是属性名):delete myVariable
使用eval或arguments作为变量名或函数名
使用未来保留字(也许会在ECMAScript 6中使用):implements, interface, let, package, private, protected, public, static,和yield作为变量名或函数名
在语句块中使用函数声明:if(a继续阅读Javascript 严格模式 strict mode

使用javascript生成PDF的类库 – jsPDF


曾经生成PDF都是服务器端代码的专利,在今天的这篇文章中,我们将介绍一个javascript类库 – jsPDF,使用它能够帮助你使用前端脚本生成PDF文件,是不是很棒,试试吧!
jsPDF支持不同类型的PDF文件格式,包括:文本,数字,图形,图片,同时你可以自由的编辑标题或者其它类型元素。
支持互动的内容制作,例如,你可以输入文字或者数字,然后jsPDF帮助生成最后的PDF内容。
支持现代浏览器,如果是老式浏览器的话,可以很好的使用flash来实现兼容。不过貌似支持Firefox不是很好,如果要查看演示,使用Chrome吧!
类库依赖:无
网站地址:http://jspdf.com/

stopPropagation, preventDefault 和 return false 的区别

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.

术语

监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.
浏览器默认动作, 指特定页面元素上带有的功能. 如: 点击 a 链接节点的跳转动作, 表单提交动作.
继续阅读stopPropagation, preventDefault 和 return false 的区别