html5 worker 例子（一）_worker api案例-优快云博客

本文链接：https://blog.youkuaiyun.com/gointoit/article/details/9154817

本文介绍HTML5 Worker API的使用，强调测试时需将Worker代码部署到服务器上，否则无法正常运行。并提供了一个简单的js代码test.js作为Worker的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多人在测试worker api的时候，总是会出现异常，根本测试不错效果。

在使用worker的时候有个必须注意的地方，就是单纯的文本文件是实现不了worker的，你写的实际代码必须部署到服务器（tomcat.jBoss等）才能运行worker api。

下面写个简单例子

js代码test.js（worker）

function messageHandler(e) {
  postMessage("worker says: " + e.data + " too");
}

addEventListener("message", messageHandler, true);
postMessage("2222222222");

html代码 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <script type="text/javascript">
    if(typeof(Worker)!=="undefined"){
    	console.log("zhichi worke");
    	}else{
    		console.log("no support!");
    		}
    function messageHandler(e){
    	console.log(e.data);
    }
    function errorHandler(e){
    	console.log(e.message, e);
    }
      var myWorker = new Worker("task.js");
      myWorker.addEventListener("message", messageHandler, true);
      myWorker.addEventListener("error", errorHandler, true);
      myWorker.postMessage("1 fangsong d");
    </script>
  </body>
</html>

不是之后直接访问index.html页面，然后在浏览器的console面板中将看到worker发送的字符串（实际应用中一般使用json传送）。