如何在HTML 5 Web Worker中访问jQuery

2021/01/31 07:51 · jquery ·  · 0评论

我无法在HTML5网络工作者中访问jQuery 有办法吗?

tl; dr:在jQuery之前包含此脚本

JQuery最初访问许多document属性以检查浏览器功能。document未在Worker中定义,并且您目前实际上无法Document在Web Worker中创建实例。JQuery并没有为此做好准备-正如您在对问题的评论中可以看到的那样,似乎没有人似乎不了解没有DOM的JQuery会做什么。

正如我所说,由于JQuery需要document初始化,因此我创建了一个虚拟的伪造文档对象。在JQuery测试期间,此对象充当真实文档:

var document = self.document = {parentNode: null, nodeType: 9, toString: function() {return "FakeDocument"}};
var window = self.window = self;
var fakeElement = Object.create(document);
fakeElement.nodeType = 1;
fakeElement.toString=function() {return "FakeElement"};
fakeElement.parentNode = fakeElement.firstChild = fakeElement.lastChild = fakeElement;
fakeElement.ownerDocument = document;

document.head = document.body = fakeElement;
document.ownerDocument = document.documentElement = document;
document.getElementById = document.createElement = function() {return fakeElement;};
document.createDocumentFragment = function() {return this;};
document.getElementsByTagName = document.getElementsByClassName = function() {return [fakeElement];};
document.getAttribute = document.setAttribute = document.removeChild = 
  document.addEventListener = document.removeEventListener = 
  function() {return null;};
document.cloneNode = document.appendChild = function() {return this;};
document.appendChild = function(child) {return child;};

请注意,该伪造文档仅旨在允许jQuery加载,而不允许任何实际的DOM操作。

用法示例:

importScripts("workerFakeDOM.js");
importScripts('jquery-2.1.4.min.js');
console.log("JQuery version:", $.fn.jquery);

测试脚本

允许您使用我的脚本尝试各种版本的JQuery。

JS小提琴

检查您是否正在使用http://,我的域无法使用https://

作为脚本下载

TomášZato的答案是正确的,但不再适用于较新的jQuery版本。我为jQuery 3.1.1添加了更多内容:

var document = self.document = { parentNode: null, nodeType: 9, toString: function () { return "FakeDocument" } };
var window = self.window = self;
var fakeElement = Object.create(document);
fakeElement.nodeType = 1;
fakeElement.toString = function () { return "FakeElement" };
fakeElement.parentNode = fakeElement.firstChild = fakeElement.lastChild = fakeElement;
fakeElement.ownerDocument = document;

document.head = document.body = fakeElement;
document.ownerDocument = document.documentElement = document;
document.getElementById = document.createElement = function () { return fakeElement; };
document.createDocumentFragment = function () { return this; };
document.getElementsByTagName = document.getElementsByClassName = function () { return [fakeElement]; };
document.getAttribute = document.setAttribute = document.removeChild =
    document.addEventListener = document.removeEventListener =
    function () { return null; };
document.cloneNode = document.appendChild = function () { return this; };
document.appendChild = function (child) { return child; };
document.childNodes = [];
document.implementation = {
    createHTMLDocument: function () { return document; }
}

有没有人尝试过jQuery-No DOM Edition?https://github.com/kpozin/jquery-nodom

这是jQuery库的一小部分,旨在用于Web Worker上下文中,其中大多数浏览器API都不存在。

这主要是通过修改jQuery构建指令(Makefile)以仅包括非DOM模块来实现的。

这可能有助于解决此问题,因为此版本没有DOM依赖关系,这是在Webworker中导入jQuery时的障碍。会尽快为此提供一些示例代码

jQuery的一个负责人提供了一个不错的插件,可将Web Worker与jQuery一起使用。在GitHub上查看他的插件

是否使用:

importScripts("jQueryWhatever.js");
$.blahblahblah();

不能按预期工作?我怀疑它会毫无问题地加载jQuery,但是与good-ole $相关的大多数调用将无法按预期方式工作,因为WebWorker内部没有DOM访问权限。

或者,您可以使用Cheerio

专为服务器设计的核心jQuery的快速,灵活和精益实现。

你只需要简单地browserify模块,并加载生成的文件到您的网络工作者。然后,您将能够解析您的字符串文档并像jQuery一样查询它:

$ = cheerio.load('<h2 class="title">Hello world</h2>')
本文地址:http://jquery.askforanswer.com/ruhezaihtml-5-web-workerzhongfangwenjquery.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!