html5开发webworkers当中importScr…


html5开发webworkers当中importScripts使用实例


新建html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>web works 日志文件输出</title>
    <script>
      var worker=new Worker("js/worker-hello.js");

      //接受信息
      worker.onmessage=function(event){
          if(event.data.type=="log"){
              console.log(event.data.msg);
          }
      }

     function sendMsg(){
         var username=document.getElementByIdx_x("username").value;
         //向我们的worker发送信息
         worker.postMessage(username);
     }


    </script>
</head>
<body>
     <h2>importScripts使用:在控制台以日志的形式输出用户的信息</h2>
     请输入用户名
     <input type="text" id="username">
     <button onclick="sendMsg()">登陆</button>
</body>
</html>

新建worker-log.js

function log(msg){
    //输出日志
    postMessage({
        type:"log",
        msg:msg
    });
}

新建worker-hello.js
importScripts("worker-log.js")
//接收信息
onmessage=function(event){
      //输出信息到日志
      log("Worker收到了信息"+event.data);
}

你可能感兴趣的:(html5开发webworkers当中importScr…)