【html5】history、拖放、定位、Worker

历史记录 history
    //h5之前
    history.length --- 返回历史列表中的网址数
    history.back() --- 回退
    history.forward() --- 前进
    go(num) --- go(-1)、go(0)、go(1)
    //h5
    pushState与replaceState仅仅是记录状态，如：滚动条状态、url参数状态（页面并不刷新）
    history.pushState(data, title, [url])
        data：传给onpopstate事件对象，用e.state访问
        title: 网页标题
        url：默认为当前页URL
    history.replaceState(data, title, [url]) --- 替换当前
    window.addEventListener( 'popstate', function(e){ e.state } ) --- 前进或回退之后触发

    参考：http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?area=pudong



拖放 (通过event对象进行数据交互)
    html：
        <div id="divDrag" draggable="true"></div>  //可能值auto|true|false，链接和图片不需要设置draggable
        <div id="divDrop"></div>
    拖动什么：
        divDrag.addEventListener('dragstart', function(e){
            var data = "xxx";
            e.dataTransfer.setData("text", data);
        });
    放到何处：
        divDrop.addEventListener('dragover', function(e){
            e.preventDefault(); --- 必须的，说明放到此处
        });
    进行放置：
        divDrop.addEventListener('drop', function(e){
            e.preventDefault(); --- 当拖动文件时能防止浏览器直接打开文件
            var data = e.dataTransfer.getData("text");
        });

    参考：http://www.cnblogs.com/jscode/archive/2013/05/10/3575024.html
    拖动目标事件：
        ondragstart
        ondrag  //触发间隔为350毫秒，移动时加剧
        ondragend
    释放目标事件
        ondragenter
        ondragover  //触发间隔为350毫秒，移动时加剧
        ondragleave
        ondrop
    dataTransfer对象属性
        effectAllowed：定义被放置的行为，all|copy|link|move|copyLink|copyMove|linkMove|uninitialized，在ondragstart事件中使用
            dropEffect：受限于上，定义放置行为，move|copy|link|none，在ondragover事件中使用（决定鼠标手型）
        files：FileList
        types：储存在DataTransfer对象的数据的类型
    dataTransfer对象方法
        setData(name, data)： 当data不是字符串时会自动toString
        getData(name)
        clearData() | clearData(name)
        setDragImage(element, x, y)： 拖动过程中显示的图像，x与y表示相对于鼠标位置，在ondragstart事件中使用
            element必须是可见的



定位 navigator.geolocation
    参考：http://blog.csdn.net/smok56888/article/details/20628161
    var fSuccess = function(e){
        e.coords.latitude; //十进制的纬度
        e.coords.longitude; //十进制的经度
        e.coords.accuracy; //位置精度
    };
    var fError = function(e){
        switch(e.code){
            case 1:
                //获取位置时被拒绝
                break;
            case 2:
                //获取的位置信息不可用
                break;
            case 3:
                //获取位置时超时
                break;
        }
    };
    navigator.geolocation.getCurrentPosition(fSuccess, fError, {
        enableHighAccuracy: false|true, //以增加功耗及响应时间来获取高精度的位置
        timeout: 5000, //超时
        maximumAge: 3000 //位置缓存有效期
    });

    跟踪模式
    var watch = navigator.geolocation.watchPosition(fSuccess, fError, {...});
    navigator.geolocation.clearWatch(watch);



Worker
    //main js
    var w = new Worker('worker_socket.js');
    w.onmessage = function(e){
        console.log(e.data);
        w.terminate();
    };

    //worker js
    postMessage(data);