美文网首页
2018-07-29

2018-07-29

作者: 苦苦修行 | 来源:发表于2018-08-04 13:35 被阅读0次

    为什么js不能操作本地文件

    Html5——File、FileReader、Blob、Fromdata对象

    Angular 4.x 修仙之路

    Web Worker 详细介绍

    HTML5新特性 多线程(Worker SharedWorker)

    我们在main1.html的文本框输入数据,点击set,然后在main2.html中点击get法现能够获取到我们在main1.html中设置的数据,这说明我们的sharedWorker事实上是单例的,就像java中的static类一样,不管new多少个,实际上只有一个,这样我们的不同线程就可以共享到sharedWorker中的数据了

    //shared.js
    var data;
    onconnect = function(e) {
      var port = e.ports[0];
      port.onmessage = function(e) {
        if(e.data=='get'){
            port.postMessage(data);
        }else{
            data=e.data;
        }
      }
    }
    
    //main1 和main2都是这样
    
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Shared workers: demo 2</title>
    </head>
    <body>
    <div id="log"></div>
    <input type="text" name="" id="txt">
    <button id="get">get</button>
    <button id="set">set</button>
    <script>
      var worker = new SharedWorker('shared.js');
      var get = document.getElementById('get');
      var set = document.getElementById('set');
      var txt = document.getElementById('txt');
      var log = document.getElementById('log');
      worker.port.addEventListener('message', function(e) {
        log.innerText = e.data;
      }, false);
      worker.port.start(); // note: need this when using addEventListener
      set.addEventListener('click',function(e){
          worker.port.postMessage(txt.value);
      },false);
      get.addEventListener('click',function(e){
          worker.port.postMessage('get');
      },false);
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:2018-07-29

          本文链接:https://www.haomeiwen.com/subject/qfdtvftx.html