HTML5 学习笔记一

文章目录：

　　html5 新特性

获取地理位置：

　　原理：包含GPS硬件的设备上，通过GPS单元可以获取精确的位置信息。如果没有，通过web IP地址分析属于那个城市那个位置。

　　函数举例：

        navigator.geolocation.getCurrentPosition(function(pos){
            console.log(pos);
        })

历史管理记录：利用 history保存历史记录的状态信息。　　

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title></title>
    <script>
        "use strict"
        window.onload = newGame;
        window.onpopstate=popstate;

        /**
         * pushState方法保存历史状态
         * 这个方法会接受一个状态对象并为该对象创建一份私有副本。（深复制深拷贝）
         * */
        var state = {
            "info":'11'
        }

        history.replaceState(state, '','p1.html#hah')

        function newGame() {
            var ui = {
                'prompt': null,
                'input': null,
                'info': null
            }
            for (var i in ui) { //用判断属性是否存在与ui中。
                ui[i] = document.getElementById(i);
            }

            /*给input添加一个事件处理函数*/
            ui.input.onchange = handleGuess;
//            console.log(ui.input.onchange);
        }
        function handleGuess() {
            var g = parseInt(this.value);
            if (g % 7 == 0) {
                save(state);
                //display(state);
            }
        }

        function save(state) {
            if (!history.pushState)return;
            var url ="xxx";
            history.pushState(state, "", url); //利用pushState把信息保存在历史状态中。
        }

        function popstate(){

        }

    </script>
</head>
<body>
<div id="heading">
    测试历史记录管理
</div>
<div id="info"></div>
<label id="prompt"></label>
<input id="input" type="text"/>
</body>
</html>

跨域消息传递：

　　如果你上网页，想把页面直接翻译成英文，那么你可以定义一个gadget小工具框。当划过中文，这个框就会显示中文了。

　　这样做的好处：第一，如果将第三方直接嵌入到脚本文件，不安全。

　　两个文件：

　　p2_1.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
       window.addEventListener("message",handleMessage,false);
       function handleMessage(e){
//        console.log(e);
          var input= document.getElementById('display');
          input.value= e.data;
       }
    </script>
</head>

<body>
<input id="display" type="text" value="显示" onclick="handleMessage" />
</body>
</html>

gadget

　　p2_2.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title></title>
    <script src="p2.js"></script>
</head>
<body>
    <p>你好</p>
    <p>我好</p>
    <p>她也好</p>
</body>
</html>

View Code

　　p2.js

window.addEventListener('load', function () {
    origin = 'http://localhost';//指定目标窗口的源，包括协议，主机名以及URL端口部分。

    iframe = document.createElement("iframe");
    iframe.src = 'http://localhost/web/javascript/p2_1.html';
    iframe.width = 800;
    iframe.height = 500;
    iframe.style.cssFloat = 'right';
    document.body.insertBefore(iframe, document.body.firstChild);

    var links = document.getElementsByTagName('p');
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('mouseover', function () {
            console.log(this.innerHTML); //用this 而不是 lists[i],因为for循环结束后i的值恒定=3;
            iframe.contentWindow.postMessage(this.innerHTML, origin)
        }, false);
    }
}, false)

客户端多线程：

　　web workers

<!DOCTYPE html>
<html>
<head>
    <script>
        function smear(img) {
            var canvas = document.createElement('canvas');
            canvas.width = 500;
            canvas.height = 300;
            var context = canvas.getContext("2d");
            context.drawImage(img, 0, 0);
            var pixels = context.getImageData(0, 0, img.width, img.height)
            var worker = new Worker('p3.js'); //这个会暂存在游览器缓存中，不关闭游览器，修改p3.js不会起作用。
            worker.postMessage(pixels);
//        worker.terminate();
        }
        window.addEventListener('load',function(){
            var input = document.getElementById('input');
            input.addEventListener('click', function () {
                console.log("done!");
            }, false);
        },false);
    </script>
</head>

<body>
<img src="img/girl.jpg" onclick="smear(this)"/>
<input id="input" type="button"/>
</body>
</html>

p3.html

onmessage=function(e){
    sleep(4000);
    console.log("web worker");
}

function   sleep(n)
{
    var   start=new   Date().getTime();
    while(true)
    {
        debugger;
        if(new   Date().getTime()-start> n)   break;
    }
}

p3.js

Worker作用域

　　通过Ｗorker()构造函数运行的js代码会运行在一个全新的Ｊavascript环境中。ＷorkerGlobalScope全局对象。有onmessage属性，postMessage()方法。因此在该环境中使用postMessage()和onmessage方法看起来就想全局函数和全局变量。WorkerGlobalScope全局对象可以用importScripts()来加载所有任何需要的库代码。

类型化数组和ＡrrayBuffer

Blob

input type=file支持本地游览而不仅仅限于上传到服务器。

元素上的files属性是一个ＦileList对象，其中对应的Ｆile对象就是一个Ｂlob.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function fileInfo(file){
            console.log(file);
            debugger;
        }
    </script>
</head>
<body>
<input type="file" onchange="fileInfo(this.files)"/>
<input type="file" multiple onchange="fileInfo(this.files)"/> <!--可以上传多个文件-->

</body>
</html>

XHR2 XMLHttpRequest对象脚本化HTTP.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var blob

        BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder
        str='111';
        if (typeof(BlobBuilder) !== 'undefined') {
            var bb = new BlobBuilder();
            bb.append(str);
            blob = bb.getBlob('x-optional/mine-type-here');
        } else {
            blob = new Blob([str]);
        }

        /*getBlobURL函数将返回一个blob对象。*/
        var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||
                (window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)||
                (window.createObjectURL));

        /*手动使blobURL失效*/
        var revokeBlobURL = (window.URL && URL.revokeObjectURL.bind(URL)) ||
                (window.webkitURL && webkitURL.revokeObjectURL.bind(webkitURL)||
                        (window.revokeObjectURL));

        function fileInfo(file){
            console.log(getBlobURL(file[0])); //前面说过 一个file[0]就是一个blob.
            revokeBlobURL(getBlobURL(file[0]));
        }
    </script>
</head>
<body>
<input type="file" onchange="fileInfo(this.files)">
</body>
</html>

BlobURL

使用 FileReader来读取文件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
       function readFile(file){
           var reader = new FileReader();
           reader.readAsText(file[0]);
           reader.onload=function(){
               var text = reader.result;
               console.log(text);
           }
       }
    </script>
</head>
<body>
<input type="file" onchange="readFile(this.files)">
</body>
</html>

ＦileReader

web操作文件系统：

IndexDB对象数据库

web套接字

posted @ 2014-11-03 14:57 UCanBeFree 阅读(217) 评论(0) 收藏举报

刷新页面返回顶部

canbefree

HTML5 学习笔记一

公告