英文:
worker.js: window is not defined
问题
I am trying to make a worker that will run automatically and constantly check the browser's width, but, I am getting this error: worker.js:1 Uncaught ReferenceError: window is not defined at worker.js:1:18
This is the code:
var intervalID = window.setInterval(myCallback, 500);
function myCallback() {
var nav = document.getElementById("navigation-bar");
if (window.screen.width >= 1200) {
console.log(window.screen.width, 'Stay In desktop version');
}
else {
console.log(window.screen.width, 'Switch to mobile version');
}
}
I saw this issue and had questions about it. Although This issue for some people was solved, their solutions are not helpful in my case.
英文:
I am trying to make a worker that will run automatically and constantly check the browser's width, but, I am getting this error: worker.js:1 Uncaught ReferenceError: window is not defined at worker.js:1:18
This is the code:
var intervalID = window.setInterval(myCallback, 500);
function myCallback() {
var nav = document.getElementById("navigation-bar");
if (window.screen.width >= 1200) {
console.log(window.screen.width, 'Stay In desktop version');
}
else {
console.log(window.screen.width, 'Switch to mobile version');
}
}
I saw this issue and had questions about it. Although This issue for some people was solved, their solutions are not helpful in my case.
答案1
得分: 2
请参阅MDN:
> 并非所有的接口和函数都对 Worker 内的脚本可用
以及链接文档:
> Workers 在与当前窗口不同的全局上下文中运行!虽然 Window 对于 Workers 不是直接可用的,但许多相同的方法在一个共享的混合对象(WindowOrWorkerGlobalScope)中被定义,并通过它们自己的 WorkerGlobalScope 派生上下文提供给 Workers。
因此,您无法访问 window
,但只需将其视为全局变量而不是从不存在的 window
中读取,就可以访问 setInterval
。
然后,您将遇到 document
和 screen
不可用的问题。
在您尝试的操作中,使用 Worker 没有意义。
Workers 用于在主事件循环之外运行 CPU 密集型代码,以避免阻塞页面的其余部分。
与 DOM 或主窗口的任何交互都需要在主事件循环内完成。消息 可用于在 worker(执行昂贵计算的任务)和主事件循环(具有窗口和 DOM 访问权限)之间传递数据。
您并没有执行任何 CPU 密集型操作,因此根本不需要使用 Worker。
另外:轮询窗口大小也是低效的。如果您想知道窗口大小何时更改,可以监听事件,甚至鉴于存在CSS 媒体查询,这可能也是不必要的。
英文:
See MDN:
> Not all interfaces and functions are available to scripts inside a Worker
And the linked document:
> Workers run in a different global context than the current window! While Window is not directly available to workers, many of the same methods are defined in a shared mixin (WindowOrWorkerGlobalScope), and made available to workers through their own WorkerGlobalScope-derived contexts
So you can't access window
but you can get access to setInterval
just by reading it as a global instead of from the non-existent window
.
Then you run into the document
and screen
not being available.
There is no point in using a Worker what you are trying to do.
Workers are for running CPU-intensive code outside the main event loop so it doesn't block the rest of the page.
Any interaction with the DOM or main window needs to be done inside the main event loop. Messages can be used to pass data between a worker (doing expensive calculations) and the main event loop (which has access to the window and DOM).
You aren't doing anything CPU intensive, so you don't need to use a worker at all.
Aside: Polling the size of the window is inefficient too. You can listen for an event if you want to know when the window size changes and even that is probably isn't needed given the existence of CSS media queries.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论