我快疯了,需要你的帮助。
我正在处理一个 serviceworker 项目,我正在处理一个 javascript 问题。我有两个主要文件。 server.html 文件,我在 52 行调用外部 service-worker.js 文件。
这是我的 server.html 文件
<body>
<div class="container">
<h1>PRESENTER</h1>
<div id="nicky">Nickname: <span id="nickname"></span></div>
<form id="form-nick" name="form-nick" method="post" action="">
<div class="formelement">
<label name="labelnick" for="nick">Nickname:</label>
<input type="text" id="nick" name="nick">
<button type="submit">OK</button>
</div>
</form><br /><br />
<h1>--></h1><div id="talker"></div>
<button type="button" class="button blue" id="blue-display" disabled></button><br />
<button type="button" class="button red" disabled></button><br />
<button type="button" class="button lightblue" disabled></button>
</div> <!-- container -->
<script type="text/javascript">
$(document).ready(function() {
console.log("jquery ready function");
$('#nick').focus();
$('#form-nick').submit(function(){
var form = $('#form-nick');
var data = form.serialize();
$.post('nicky.php', data, function(response) {
if (response) {
$('#nicky').show();
$('#nickname').text(response);
$('#form-nick').hide();
$('.blue, .red, .lightblue').fadeIn(100);
if('serviceWorker' in navigator){
// Register service worker
navigator.serviceWorker.register('service-worker.js').then(function(reg){
console.log("SW registration succeeded. Scope is "+reg.scope);
}).catch(function(err){
console.error("SW registration failed with error "+err);
});
}
} else {
}
});
return false;
});
});
</script>
</body>
这是service-worker.js文件
// Install Service Worker
self.addEventListener('install', function(event){
console.log('>> sw installed!');
});
// Service Worker Active
self.addEventListener('activate', function(event){
console.log('>> sw activated!');
});
// Service Worker reveives message
self.addEventListener('message', function(event){
console.log(event.data);
send_message_to_all_clients(event.data);
document.getElementById("talker").innerHTML = event.data;
});
在最后一行中,我想将收到的消息插入 div“talker”中。但我总是收到错误 service-worker.js:17 Uncaught ReferenceError: document is not defined
我小心翼翼地在加载文档后加载 js 文件。 现在我不知道我做错了什么。 谢谢。
最佳答案
Service worker——通常是网络 worker ——根本无法直接访问 DOM。相反,让工作人员将信息发布到主线程,并让主线程中的代码适本地更新 DOM。浏览器上 JavaScript 的 theading 模型是只有一个主 UI 线程(运行页内代码的默认线程),它可以访问 DOM。其他人与它隔开。
This page和 this page两者都谈论服务人员和客户之间的消息传递。这是一个非常简单的示例:
页面中加载 service worker 的脚本:
(function() {
"use strict";
if (!navigator.serviceWorker || !navigator.serviceWorker.register) {
console.log("This browser doesn't support service workers");
return;
}
// Listen to messages from service workers.
navigator.serviceWorker.addEventListener('message', function(event) {
console.log("Got reply from service worker: " + event.data);
});
// Are we being controlled?
if (navigator.serviceWorker.controller) {
// Yes, send our controller a message.
console.log("Sending 'hi' to controller");
navigator.serviceWorker.controller.postMessage("hi");
} else {
// No, register a service worker to control pages like us.
// Note that it won't control this instance of this page, it only takes effect
// for pages in its scope loaded *after* it's installed.
navigator.serviceWorker.register("service-worker.js")
.then(function(registration) {
console.log("Service worker registered, scope: " + registration.scope);
console.log("Refresh the page to talk to it.");
// If we want to, we might do `location.reload();` so that we'd be controlled by it
})
.catch(function(error) {
console.log("Service worker registration failed: " + error.message);
});
}
})();
在 service-worker.js 中:
self.addEventListener("message", function(event) {
event.source.postMessage("Responding to " + event.data);
});
这依赖于当前版本的 Chrome 和 Firefox 支持的 event.source。
或者,不使用 event.source,您可以使用 self.clients.matchAll 向 service worker 的多个客户端发送消息;再次在 service-worker.js 中:
self.addEventListener("message", function(event) {
self.clients.matchAll().then(all => all.forEach(client => {
client.postMessage("Responding to " + event.data);
}));
});
matchAll接受一些 filtering options .
你说过你在让它工作时遇到了麻烦。这是在 Chrome 和 Firefox 中对我有用的完整版本:
service-worker.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Service Worker</title>
</head>
<body>
(Look in the console.)
<script>
(function() {
"use strict";
if (!navigator.serviceWorker || !navigator.serviceWorker.register) {
console.log("This browser doesn't support service workers");
return;
}
// Listen to messages from service workers.
navigator.serviceWorker.addEventListener('message', function(event) {
console.log("Got reply from service worker: " + event.data);
});
// Are we being controlled?
if (navigator.serviceWorker.controller) {
// Yes, send our controller a message.
console.log("Sending 'hi' to controller");
navigator.serviceWorker.controller.postMessage("hi");
} else {
// No, register a service worker to control pages like us.
// Note that it won't control this instance of this page, it only takes effect
// for pages in its scope loaded *after* it's installed.
navigator.serviceWorker.register("service-worker.js")
.then(function(registration) {
console.log("Service worker registered, scope: " + registration.scope);
console.log("Refresh the page to talk to it.");
// If we want to, we might do `location.reload();` so that we'd be controlled by it
})
.catch(function(error) {
console.log("Service worker registration failed: " + error.message);
});
}
})();
</script>
</body>
</html>
service-worker.js:
self.addEventListener("message", function(event) {
//event.source.postMessage("Responding to " + event.data);
self.clients.matchAll().then(all => all.forEach(client => {
client.postMessage("Responding to " + event.data);
}));
});
如您所见,这是使用 self.clients.matchAll 的版本,上面有注释掉的 event.source 版本。
如果我在两个窗口中运行它,每个窗口的每次刷新都会向其他窗口发送一条消息(因为我正在使用 self.clients.matchAll...)。
关于javascript - web worker访问dom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37704641/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
我想从then子句中访问case语句表达式,即food="cheese"casefoodwhen"dip"then"carrotsticks"when"cheese"then"#{expr}crackers"else"mayo"end在这种情况下,expr是食物的当前值(value)。在这种情况下,我知道,我可以简单地访问变量food,但是在某些情况下,该值可能无法再访问(array.shift等)。除了将expr移出到局部变量然后访问它之外,是否有直接访问caseexpr值的方法?罗亚附注我知道这个具体示例很简单,只是一个示例场景。 最佳答案
我理解(我认为)Ruby中类变量和类的实例变量之间的区别。我想知道如何从该类外部访问该类的实例变量。从内部(即在类方法中而不是实例方法中),它可以直接访问,但是从外部,有没有办法做MyClass.class.[@$#]variablename?我没有任何具体原因要这样做,只是学习Ruby并想知道是否可行。 最佳答案 classMyClass@my_class_instance_var="foo"class上述yield:>>foo我相信Arkku演示了如何从类外部访问类变量(@@),而不是类实例变量(@)。我从这篇文章中提取了上述内
我试图在我的网站上实现使用Facebook登录功能,但在尝试从Facebook取回访问token时遇到障碍。这是我的代码:ifparams[:error_reason]=="user_denied"thenflash[:error]="TologinwithFacebook,youmustclick'Allow'toletthesiteaccessyourinformation"redirect_to:loginelsifparams[:code]thentoken_uri=URI.parse("https://graph.facebook.com/oauth/access_token
我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
是否有可能以某种方式访问Class.new范围内的a?a=5Class.new{defb;aend}.new.b#NameError:undefinedlocalvariableormethod`a'for#:0x007fa8b15e9af0>#:in`b' 最佳答案 即使@MarekLipka的回答是正确的——改变变量范围总是有风险的。这是可行的,因为每个block都带有创建它的上下文,因此您的局部变量a突然变得不那么局部了——它变成了一个“隐藏的”全局变量:a=5object=Class.new{define_method(
使用散列定义的访问器方法动态创建对象的最简单方法是什么?例如,如果我有一个散列:{foo:"Foo",bar:"Bar"}我想要一个具有访问器方法foo、foo=、bar和bar=的对象,其初始值分别为"Foo"和"Bar"。我可以想到这样做:moduleObjectWithAccessordefself.newh;Struct.new(*h.keys).new(*h.values)endendo=ObjectWithAccessor.new(foo:"Foo",bar:"Bar")o.foo#=>"Foo"但是,我不需要它们的多个实例具有相同的特定键集,而是希望每次都使用可能不同的键
我在这方面尝试了很多URL,在我遇到这个特定的之前,它们似乎都很好:require'rubygems'require'nokogiri'require'open-uri'doc=Nokogiri::HTML(open("http://www.moxyst.com/fashion/men-clothing/underwear.html"))putsdoc这是结果:/Users/macbookair/.rvm/rubies/ruby-2.0.0-p481/lib/ruby/2.0.0/open-uri.rb:353:in`open_http':404NotFound(OpenURI::HT