在 karma 环境中使用 Blob 中的 importsScripts

Using importsScripts within Blob in a karma environment(在 karma 环境中使用 Blob 中的 importsScripts)
本文介绍了在 karma 环境中使用 Blob 中的 importsScripts的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

I am working on a small project of mine using karma, and jasmine. My targeted browser is chrome 32.

I am trying to import scripts within a web worker whom I have instanciated through a blob as follows :

describeAsyncAppliPersephone("When the application project to DOM", function()
{
    it("it should call the function of DomProjection in the project associated with its event", function()
    {
        var eventSentBack = {
            eventType: 'testReceived',
            headers: { id: 14, version: 4 },
            payLoad: { textChanged: 'newText' }
        };
        var isRendered = false;
        var fnProjection = function(event, payload)
        {
            isRendered = true;
        }

        var bootstrap = [
            { eventType: 'testReceived', projection: fnProjection },
            { eventType: 'test2Received', projection: function() { } }
        ];

        runs(function()
        {
            var factory = new WorkerFactory();

        var worker = factory.CreateByScripts('importScripts("/base/SiteWeb/project/js/app/application.js"); var app = new application(self); app.projectOnDOM(' + JSON.stringify(eventSentBack) + '); ');

            console.log(worker.WorkerLocation);

            var applicationQueue = new queueAsync(worker);
            var projectQueue = new queueSync(worker);
            var p = new project(applicationQueue, persephoneQueue, bootstrap);

            applicationQueue.publish(eventSentBack);
        });

        waitsFor(function() { return isRendered }, "Projection called", 500);

        runs(function()
        {
            expect(isRendered).toBe(true);
        });


    });
});

workerFactory is as follows :

this.CreateByScripts = function(scripts, fDefListener, fOnError)
    {
        var arrayScripts = scripts;

        if (!arrayScripts)
            throw "unable to load worker for undefined scripts";

        if (Object.prototype.toString.call(arrayScripts) !== '[object Array]')
            arrayScripts = [arrayScripts];

        var blob = new Blob(arrayScripts, { type: "text/javascript" });

        var w = createWorker(window.URL.createObjectURL(blob));

        return new QueryableWorker(w, fDefListener, fOnError);
    }

where createWorker is :

createWorker = function(sUrl)
        {
            return new Worker(sUrl);
        }

But the importScripts throws me the following error :

Uncaught SyntaxError: Failed to execute 'importScripts': the URL '/base/SiteWeb/project/js/app/application.js' is invalid.

I have tried with the path within the browser :

http://mylocalhost:9876/base/SiteWeb/project/js/app/application.js

and it does work well.

What is the path I should use to make importScripts working successfully ?

Thanks,

解决方案

You can't use relative path in worker created with Blob.

Had this problem today. Solution is explained in "The Basics of Web Workers", but a little hidden in length of the article:

The reason being: the worker (now created from a blob URL) will be resolved with a blob: prefix, while your app will be running from a different (presumably http://) scheme. Hence, the failure will be due to cross origin restrictions.

If you are determined to avoid hardcoding domain name in your workers the article has also a solution for this. Import your scripts on receiving a message with URL as one of its parameters:

self.onmessage = function(e) {
    importScripts(e.data.url + 'yourscript.js');
};

and start your worker with sending that url

worker.postMessage({url: document.location.protocol + '//' + document.location.host});

The code above is simplified for clarity.

这篇关于在 karma 环境中使用 Blob 中的 importsScripts的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Drag amp; Drop with Protractor by Repeater(拖动amp;通过中继器使用量角器掉落)
Getting the position of the element in a list when it#39;s drag/dropped (ui.sortable)(拖放时获取元素在列表中的位置(ui.sortable))
Detecting HTML5 Drag And Drop support in javascript(在 javascript 中检测 HTML5 拖放支持)
HTML5 drop event doesn#39;t work unless dragover is handled(除非处理了拖动,否则 HTML5 放置事件不起作用)
How to use jQuery#39;s drop event to upload files dragged from the desktop?(如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?)
Drop image into contenteditable in Chrome to the cursor(将图像拖放到 Chrome 中的 contenteditable 到光标处)