HTML5开发之web workers--简…

HTML5开发之web <wbr>workers--简单的Hello程序

新建一个html5文件
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单的web workers实例</title>
    <script type="text/javascript" src="js/hellowebwork.js"></script>
    <script>
        //创建worker的实例
        var worker=new Worker("js/hellowebwork.js");

        //接收后台webworks传来的信息
        worker.onmessage=function(event){
            alert(event.data);
        }

        //将用户名这个变量发送到后台workers
        function hello(){
            var name=document.getElementByIdx_x("name").value;
            //将该用户名发送给后台的Workers
            worker.postMessage(name);
        }
    </script>
</head>
<body>
     <h2>Hello,Web Workers!</h2>
     姓名:<input id="name" required="required">
     <button onclick="hello()">提交</button>
</body>
</html>

新建一个 hellowebwork.js

onmessage=function(event){
    //为了看出他是在后台执行我们加上时间限制,看我们的画面是否凝固不动了
    for(var i=0;i<1000000000;i++){
        ;
    }


    //接受发送而来的数据,并将该数据返回给页面
    postMessage("您好"+event.data+" "+"欢迎您的光临 ");
}

你可能感兴趣的:(HTML5开发之web workers--简…)