Search completed in 0.93 seconds.
149 results for "onmessage":
Your results are loading. Please wait...
Worker.onmessage - Web APIs
Web › API › Worker › onmessage
the onmessage property of the worker interface represents an eventhandler, that is a function to be called when the message event occurs. these events are of type messageevent and will be called when the worker's parent receives a message (i.e. from the dedicatedworkerglobalscope.postmessage method). note: the message payload is available in the message event's data property. syntax myworker.onmessage = function(e) { ... } example the following code snippet shows creation of a worker object using the worker() constructor. messages are passed to the worker when the value inside the form input first changes. an onmessage handler is also present, to deal with messages that are passed back from the worker. var myworker = new worker('worker.js'); first.onchange = function() { myworker.postme...
...ject using the worker() constructor. messages are passed to the worker when the value inside the form input first changes. an onmessage handler is also present, to deal with messages that are passed back from the worker. ...
...handler is also present, to deal with messages that are passed back from the worker. ...
...And 3 more matches
DedicatedWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the dedicatedworkerglobalscope interface represents an eventhandler to be called when the message event occurs and bubbles through the worker — i.e. when a message is sent to the worker using the worker.postmessage method. syntax self.onmessage = function() { ... }; example the following code snippet shows creation of a worker object using the worker() constructor. messages are passed to the worker when the value inside the form input first changes. a worker.onmessage handler is also present, to deal with messages are passed back from the worker. ...
...ect using the worker() constructor. messages are passed to the worker when the value inside the form input first changes. a worker.onmessage handler is also present, to deal with messages are passed back from the worker. ...
...nt, to deal with messages are passed back from the worker. ...
...And 2 more matches
MediaKeySession.onmessage - Web APIs
this interface inherits from the extendableevent interface. ...
... recommendation initial definition. ...
... recommendation initial definition. ...
BroadcastChannel.onmessage - Web APIs
the broadcastchannel.onmessage event handler is a property that specifies the function to execute when a message event, of type messageevent, is received by this broadcastchannel. such an event is sent by the browser with a message broadcasted to the channel. note: this feature is available in web workers. syntax channel.onmessage = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of type messageevent. ...
...broadcasted to the channel. note: this feature is available in web workers. syntax channel.onmessage = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of type messageevent. example bc.onmessage = function(ev) { console.log(`message event received! '${ev.data}'`); }; specifications specification status comment html living standardthe definition of 'broadcastchannel.onmessage' in that specification. living standard initial definition. ...
MessagePort.onmessage - Web APIs
the onmessage event handler of the messageport interface is an eventlistener, called whenever an messageevent of type message is fired on the port — that is, when the port receives a message. note: this feature is available in web workers. syntax channel.onmessage = function() { ... }; example in the following code block, you can see a new channel being created using the messagechannel.messagechannel constructor. when the iframe has loaded, we pass messagechannel.port2 to the iframe using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = documen...
...gechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment html living standardthe definition of 'onmessage' in that specification. living standard ...
RTCDataChannel.onmessage - Web APIs
the function receives as its sole input parameter a messageevent object describing the event. example this code snippet creates a peer connection, adds a data channel to it, and starts creating new <p> (paragraph) elements each time a message arrives, with the message's contents displayed inside it. the new elements are then attached to the end of the document. ...
...t parameter a messageevent object describing the event. example this code snippet creates a peer connection, adds a data channel to it, and starts creating new <p> (paragraph) elements each time a message arrives, with the message's contents displayed inside it. the new elements are then attached to the end of the document. let pc = new rtcpeerconnection(); let dc = pc.createdatachannel(); dc.onmessage = function(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onmessage' in that specification. candidate recommendation ...
ServiceWorkerContainer.onmessage - Web APIs
the onmessage property of the serviceworkercontainer interface is an event handler fired whenever a message event occurs — when incoming messages are received to the serviceworkercontainer object (e.g., via a client.postmessage() call). note: messages received from service worker contexts (e.g. as the event object of onmessage) are represented by messageevent objects in modern browsers, for consistency with other web messaging features. (they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworkercontainer.onmessage = function(messageevent) { ... ...
... received from service worker contexts (e.g. as the event object of onmessage) are represented by messageevent objects in modern browsers, for consistency with other web messaging features. (they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworkercontainer.onmessage = function(messageevent) { ... } example navigator.serviceworker.onmessage = function(messageevent) { console.log(`received data: ${messageevent.data}`); } specifications specification status comment service workersthe definition of 'serviceworkercontainer: onmessage' in that specification. working draft initial definition. ...
BroadcastChannel.onmessageerror - Web APIs
the onmessageerror event handler of the broadcastchannel interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the broadcastchannel instance — that is, when it receives a message that cannot be deserialized. note: this feature is available in web workers. syntax bc.onmessageerror = function() { ... }; specifications specification status comment html living standardthe definition of 'onmessageerror' in that specification. living standard ...
DedicatedWorkerGlobalScope.onmessageerror - Web APIs
the onmessageerror event handler of the dedicatedworkerglobalscope interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the worker—that is, when it receives a message that cannot be deserialized. note: this feature is available in web workers. syntax onmessageerror = function() { ... }; specifications specification status comment html living standardthe definition of 'onmessageerror' in that specification. living standard ...
EventSource.onmessage - Web APIs
the onmessage property of the eventsource interface is an eventhandler called when a message event is received, that is when a message is coming from the source. event objects of onmessage event handers are of type messageevent. syntax eventsource.onmessage = function examples evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php. specifications specification status comment html living standardthe definition of 'onmessage' in that specification. living standard initial definition ...
HTMLObjectElement.validationMessage - Web APIs
the validationmessage read-only property of the htmlobjectelement interface returns a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. syntax var string = htmlobjectelement.validationmessage; value a domstring. specifications specification status comment html living standardthe definition of 'validationmessage' in that specification. living standard initial definition. ...
MessagePort.onmessageerror - Web APIs
the onmessageerror event handler of the messageport interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the port—that is, when it receives a message that cannot be deserialized. note: this feature is available in web workers. syntax port.onmessageerror = function() { ... }; specifications specification status comment html living standardthe definition of 'onmessageerror' in that specification. living standard ...
ServiceWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the serviceworkerglobalscope interface is an event handler fired whenever a message event occurs — when incoming messages are received. note: service workers define the extendable event to allow extending the lifetime of the event. for the message event, service workers use the extendablemessageevent interface which extends the extendableevent interface. note: messages received from service worker contexts (e.g. as the event object of onmessage) are represented by messageevent objects in modern browsers, for consistency with other web messaging features. (they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworkerglobalscope.onmessage = function(extendablemessageevent) { ... }; example self.addeventli...
WebSocket.onmessage - Web APIs
the websocket.onmessage property is an eventhandler that is called when a message is received from the server. it is called with a messageevent. syntax awebsocket.onmessage = function(event) { console.debug("websocket message received:", event); }; value an eventlistener. specifications specification status comment html living standardthe definition of 'websocket: onmessage' in that specification. living standard initial definition ...
WindowEventHandlers.onmessage - Web APIs
the onmessage property of the windoweventhandlers mixin is the eventhandler called whenever an object receives a message event. syntax window.addeventlistener('message', function(event) { ... }) window.onmessage = function(event) { ... } specifications specification status comment html living standardthe definition of 'onmessage' in that specification. living standard initial definition. ...
WindowEventHandlers.onmessageerror - Web APIs
the onmessageerror event handler of the windoweventhandlers interface is an eventlistener, called whenever an messageevent of type messageerror is fired on a window—that is, when it receives a message that cannot be deserialized. note: this feature is available in web workers. syntax window.onmessageerror = function() { ... }; specifications specification status comment html living standardthe definition of 'onmessageerror' in that specification. living standard ...
Worker.onmessageerror - Web APIs
the onmessageerror event handler of the worker interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the worker instance — that is, when it receives a message that cannot be deserialized. note: this feature is available in web workers. syntax worker.onmessageerror = function() { ... }; specifications specification status comment html living standardthe definition of 'onmessageerror' in that specification. living standard ...
Index - Web APIs
Web › API › Index
366 broadcastchannel.name broadcast channel api, broadcastchannel, experimental, html api, property, read-only, reference the read-only broadcastchannel.name property returns a domstring, which uniquely identifies the given channel with its name. this name is passed to the broadcastchannel() constructor at creation time and is therefore read-only. 367 broadcastchannel.onmessage api, broadcast channel api, broadcastchannel, event handler, experimental, html api, property, reference the broadcastchannel.onmessage event handler is a property that specifies the function to execute when a message event, of type messageevent, is received by this broadcastchannel. such an event is sent by the browser with a message broadcasted to the channel. 368 broadcast...
..., broadcast channel api, broadcastchannel, event handler, experimental, html api, property, reference the broadcastchannel.onmessage event handler is a property that specifies the function to execute when a message event, of type messageevent, is received by this broadcastchannel. such an event is sent by the browser with a message broadcasted to the channel. 368 broadcastchannel.onmessageerror api, broadcastchannel, event handler, property, reference, onmessageerror the onmessageerror event handler of the broadcastchannel interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the broadcastchannel instance — that is, when it receives a message that cannot be deserialized. 369 broadcastchannel.postmessage() api, bro...
...globalscope.name api, dom, dedicatedworkerglobalscope, property, reference, worker, name the name read-only property of the dedicatedworkerglobalscope interface returns the name that the worker was (optionally) given when it was created. this is the name that the worker() constructor can pass to get a reference to the dedicatedworkerglobalscope. 817 dedicatedworkerglobalscope.onmessage api, dedicatedworkerglobalscope, property, reference, référence(2), web workers, onmessage the onmessage property of the dedicatedworkerglobalscope interface represents an eventhandler to be called when the message event occurs and bubbles through the worker — i.e. when a message is sent to the worker using the worker.postmessage method. 818 dedicatedworkerglobalscope.onm...
...And 20 more matches
Using Web Workers - Web APIs
operties of the window object. but you can use a large number of items available under window, including websockets, and data storage mechanisms like indexeddb. see functions and classes available to workers for more details. data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage event handler (the message is contained within the message event's data attribute.) the data is copied rather than shared. workers may, in turn, spawn new workers, as long as those workers are hosted within the same origin as the parent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return...
...lowing (main.js): if (window.worker) { ... } spawning a dedicated worker creating a new worker is simple. all you need to do is call the worker() constructor, specifying the uri of a script to execute in the worker thread (main.js): var myworker = new worker('worker.js'); sending messages to and from a dedicated worker the magic of workers happens via the postmessage() method and the onmessage event handler. when you want to send a message to the worker, you post messages to it like this (main.js): first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } so here we have two <input> elemen...
...ve two <input> elements represented by the variables first and second; when the value of either is changed, myworker.postmessage([first.value,second.value]) is used to send the value inside both to the worker, as an array. you can send pretty much anything you like in the message. in the worker, we can respond when the message is received by writing an event handler block like this (worker.js): onmessage = function(e) { console.log('message received from main script'); var workerresult = 'result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(workerresult); } the onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute. here we simply multiply to...
...And 17 more matches
context-menu - Archive of obsolete content
e function attached to the global self object, passing it some json-able data. the menu item's "message" event listener will be called with that data. var cm = require("sdk/context-menu"); cm.item({ label: "edit image", context: cm.selectorcontext("img"), contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + '});', onmessage: function (imgsrc) { openimageeditor(imgsrc); } }); updating a menu item's label each menu item must be created with a label, but you can change its label later using a couple of methods. the simplest method is to set the menu item's label property. this example updates the item's label based on the number of times it's been clicked: var numclicks = 0; var myitem = require("sdk/context-...
...st be created with a label, but you can change its label later using a couple of methods. the simplest method is to set the menu item's label property. this example updates the item's label based on the number of times it's been clicked: var numclicks = 0; var myitem = require("sdk/context-menu").item({ label: "click me: " + numclicks, contentscript: 'self.on("click", self.postmessage);', onmessage: function () { numclicks++; this.label = "click me: " + numclicks; // setting myitem.label is equivalent. } }); sometimes you might want to update the label based on the context. for instance, if your item performs a search with the user's selected text, it would be nice to display the text in the item to provide feedback to the user. in these cases you can use the second method. r...
...it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. ...
...And 6 more matches
MessageEvent - Web APIs
the messageevent interface represents a message received by a target object. this is used to represent messages in: server-sent events (see eventsource.onmessage). web sockets (see the onmessage property of the websocket interface). cross-document messaging (see window.postmessage() and window.onmessage). channel messaging (see messageport.postmessage() and messageport.onmessage). cross-worker/document messaging (see the above two entries, but also worker.postmessage(), worker.onmessage, serviceworkerglobalscope.onmessage, etc.) broadcast channels (see broadcastchannel.postmessage()) and broadcastchannel.onmessage). webrtc data channels (see rtcdatachannel.onmessage). the action triggered by this event is defined in a function set as the event handler for the relevant message event (e.
... note: this feature is available in web workers. ...
... calculation — they can both access it, even if their pages are running inside different windows. the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...
...And 3 more matches
MessagePort - Web APIs
iving at the other. note: this feature is available in web workers. methods inherits methods from its parent, eventtarget postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts. ...
...nds a message from the port, and optionally, transfers ownership of objects to other browsing contexts. start() starts the sending of messages queued on the port (only needed when using eventtarget.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active. event handlers inherits event handlers from its parent, eventtarget onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message. ...
...messages queued on the port (only needed when using eventtarget.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active. event handlers inherits event handlers from its parent, eventtarget onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message. onmessageerror an eventlistener called when a messageevent of type messageerror is fired—that is, when it receives a message that cannot be deserialized. events message fired when a messageport object receives a message. also available via the onmessage property. ...
...And 3 more matches
Add a Context Menu Item - Archive of obsolete content
you should see the new item appear: click it, and the selection is logged to the console (or the shell, if you're running an instance of firefox from the command line): info: elephantine lizard details all this add-on does is to construct a context...
...ion is logged to the console (or the shell, if you're running an instance of firefox from the command line): info: elephantine lizard details all this add-on does is to construct a context menu item. you don't need to add it: once you have constructed the item, it is automatically added in the correct context. the constructor in this case takes four options: label, context, contentscript, and onmessage. label the label is just the string that's displayed. context the context describes the circumstances in which the item should be shown. the context-menu module provides a number of simple built-in contexts, including this selectioncontext(), which means: display the item when something on the page is selected. if these simple contexts aren't enough, you can define more sophisticated context...
... contexts, including this selectioncontext(), which means: display the item when something on the page is selected. if these simple contexts aren't enough, you can define more sophisticated contexts using scripts. contentscript this attaches a script to the item. in this case the script listens for the user to click on the item, then sends a message to the add-on containing the selected text. onmessage the onmessage property provides a way for the add-on code to respond to messages from the script attached to the context menu item. in this case it just logs the selected text. so: the user clicks the item the content script's click event fires, and the content script retrieves the selected text and sends a message to the add-on the add-on's message event fires, and the add-on code's handl...
...And 2 more matches
Using channel messaging - Web APIs
lementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; input.value = ''; } we start off by creating a new mes...
...finally we transfer messagechannel.port2 to the iframe using the window.postmessage method. let's explore how the iframe.contentwindow.postmessage line works in a bit more detail. ...
...ue entered in our text input to the iframe via the messagechannel. receiving the port and message in the iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem = document.createelement('li'); listitem.textcontent = e.data; list.appendchild(listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function. this saves the tra...
...And 2 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
({candidate}) => signaler.send({candidate}); this simply takes the candidate member of this ice event and passes it through to the signaling channel's send() method to be sent over the signaling server to the remote peer. handling incoming messages on the signaling channel the last piece of the puzzle is code to handle incoming messages from the signaling server. ...
...e sent over the signaling server to the remote peer. handling incoming messages on the signaling channel the last piece of the puzzle is code to handle incoming messages from the signaling server. that's implemented here as an onmessage event handler on the signaling channel object. this method is invoked each time a message arrives from the signaling server. ...
...if the incoming message has a description, it's either an offer or an answer sent by the other peer. if, on the other hand, the message has a candidate, it's an ice candidate received from the remote peer as part of trickle ice. the candidate is destined to be delivered to the local ice l...
...And 2 more matches
Communicating using "postMessage" - Archive of obsolete content
age events. handling message events in the content script to send a message from a content script, you use the postmessage function of the global self object: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value. to receive a message from the add-on script, use self's on function: self.on("message", function(addonmessage) { // handle the message }); like all event-registration functions, this takes two parameters: the name of the event, and the handler function. the handler function is passed the message payload. handling message events in the add-on script to send a message to a content script, use the worker's postmessage function. again, panel and page integrate worker directly: // post a message to the...
...nt-registration functions, this takes two parameters: the name of the event, and the handler function. the handler function is passed the message payload. handling message events in the add-on script to send a message to a content script, use the worker's postmessage function. again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addonmessage); however, for page-mod objects you need to listen to the onattach event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function. to simplify this most content module...
... for page-mod objects you need to listen to the onattach event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function. ...
...that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function. ...
event/target - Archive of obsolete content
ents are emitted. also see the tutorial on implementing event targets to get started with this api. instantiation it's easy to create event target objects, no special arguments are required. ...
... console.log(message); }); sometimes event listener may care only about very first event of specific type. eventtarget interface defines convenience method for adding one shot event listeners via method once. ...
...rface defines convenience method for adding one shot event listeners via method once. such listeners are called only once next time event of the specified type is emitted: target.once('ready', function onready() { // do the thing once ready! }); removing listeners eventtarget interface defines api for unregistering event listeners, via removelistener method: target.removelistener('message', onmessage); emitting events eventtarget interface intentionally does not define an api for emitting events. in majority of cases party emitting events is different from party registering listeners. in order to emit events one needs to use event/core module instead: let { emit } = require('sdk/event/core'); target.on('hi', function(person) { console.log(person + ' says hi'); }); emit(target, 'hi', 'mark...
...'); target.on('hi', function(person) { console.log(person + ' says hi'); }); emit(target, 'hi', 'mark'); // info: 'mark says hi' for more details see event/core documentation. ...
ui/frame - Archive of obsolete content
ychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message event. the data property of the event is the message payload. var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: (e) => { console.log("new city: " + e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); from add-on to all frames to send a message from the add-on code to all frames, attached to all open browser windows, you can use frame.postmessage(). you can specify the frame's url property as the targetorigin: frame.postmessage(message, frame.ur...
...pdates all frames across all browser windows with that city's current weather (it just reads this from a dictionary, where in a real case it might ask a web service): var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var weather = { "london" : "rainy", "toronto" : "snowy", "san francisco" : "foggy" } var frame = new frame({ url: "./city-info.html", onmessage: (e) => { updateweather(e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); function updateweather(location) { frame.postmessage(weather[location], frame.url); } to listen to these messages in the frame script, add a listener to the window's message event: window.addeventlistener("message", updateweather, false); function updateweath...
...or each browser window. to do this, you call postmessage() not on the frame itself but on the source attribute of the object passed into an event listener. for targetorigin, you can use the origin property of the event object passed to the message listener: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: function(e) { // message only the frame that pinged us e.source.postmessage("pong", e.origin); } }); var toolbar = toolbar({ name: "ping-pong", title: "ping pong", items: [frame] }); this does not have to be the message event: the other events frame can emit: attach, load and ready, also provide access to source and origin. to receive such messages in the frame script, listen ...
...create two frames with the same url. onattach function assign a listener to the frame's attach event. ondetach function assign a listener to the frame's detach event. onload function assign a listener to the frame's load event. onready function assign a listener to the frame's ready event. onmessage function assign a listener to the frame's message event. frame methods postmessage(message, targetorigin) send a message to scripts loaded into the frame. this will send the message to message is all viewport documents (one per browser window) of the frame: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ ur...
Using workers in extensions - Archive of obsolete content
v&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed. it starts by setting up an interval handler (in lines 26-28) that calls refreshinformation() every 10 minutes. then it sets the worker's onmessage event handler to a function which looks at the ev...
...rface(components.interfaces.nsiprefbranch2); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker = new worker("chrome://stockwatcher2/content/ticker_worker.js"); // small little dance to get 'this' to refer to stockwatcher, not the // worker, when a message is received. ...
... line 22 sends a message to the ticker thread to tell it what symbol to monitor. ...
...ic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker.postmessage(this.tickersymbol); break; } }, the key here is line 10, which sends the new ticker symbol to monitor to the ticker thread by calling its postmessage() method. this results in the ticker's onmessage handler being called. the watchstock() and refreshinformation() methods these two methods are very simple. watchstock() is updated to pass the symbol to the ticker thread, and refreshinformation(), whose main functionality is now in the worker, is updated to simply pass an empty message to the worker, which tells the worker to refresh the stock information immediately. watchstock: function(n...
Events
ondestroyingview the current folder view is being destroyed. ...
...saved searches, virtual folders, a quicksearch onsortchang...
...saved searches, virtual folders, a quicksearch onsortchanged the sort method in the messages list has been changed ...
...ded, includes deletion onloadingfolder a folder is being loaded onmakeactive a folderdisplaywidget becomes active onmessagecountschanged the counts of the messages changed onmessagesloaded the messages in the folder have been loaded onmessagesremovalfailed removing some messages from the current folder failed onmessagesremoved some messages of the current message list have been removed onsearching a folder view derived from a search is being loaded, e.g. saved searches, virtual folders, a quicksearch onsortchanged the sort method in the messages list has been changed ...
DedicatedWorkerGlobalScope.postMessage() - Web APIs
object handled by the structured clone algorithm, which includes cyclical references. the main scope that spawned the worker can send back information to the thread that spawned it using the worker.postmessage method. syntax postmessage(amessage, transferlist); parameters amessage the object to deliver to the main thread; this will be in the data field in the event delivered to the worker.onmessage handler. this may be any value or javascript object handled by the structured clone algorithm, which includes cyclical references. transferlist optional an optional array of transferable objects to transfer ownership of. if the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from and it becomes available only to the main thread it was sent to. o...
...st optional an optional array of transferable objects to transfer ownership of. if the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from and it becomes available only to the main thread it was sent to. only messageport and arraybuffer objects can be transferred. returns void. ...
...he main thread it was sent to. only messageport and arraybuffer objects can be transferred. returns void. example the following code snippet shows worker.js, in which an onmessage handler is used to handle messages from the main script. ...
...inside the handler a calculation is done from which a result message is created; this is then sent back to the main thread using postmessage(workerresult); onmessage = function(e) { console.log('message received from main script'); var workerresult = 'result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(workerresult); } in the main script, onmessage would have to be called on a worker object, whereas inside the worker script you just need onmessage because the worker is effectively the global scope (dedicatedworkerglobalscope). for a full example, see ourbasic dedicated worker example (run dedicated worker). note: postmessage() can only send a single object at once. as seen above, if you want to pass multiple values you can send an array.
MessagePort: messageerror event - Web APIs
the messageerror event is fired on a messageport object when it receives a message that can't be deserialized. ...
...tlistener('message', (event) => { received.textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port. ...
... console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port. ...
...er must call messageport.start() before any messages will be delivered to this port. ...
SharedWorker - Web APIs
calculation — they can both access it, even if their pages are running inside different windows. the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...
...'worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...
...st messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworkerglobalscope.onconnect handler to connect to the same port discussed above. ...
... myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworkerglobalscope.onconnect handler to connect to the same port discussed above. the ports associated with that worker are accessible in the connect event's ports property — we then use messageport start() method to start the port, and the onmessage handler to deal with messages sent from the main threads. onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener. otherwise called implicitly by onmessage setter. } specifications s...
dev/panel - Archive of obsolete content
gument to postmessage // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const { messagechannel } = require("sdk/messaging"); const channel = new messagechannel(); const addonside = channel.port1; const panelside = channel.port2; // messages from the panel arrive here addonside.onmessage = function(event) { console.log(event.data); } const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { // send a port to the panel document this.postmessage("message from the add-on", [panelside]); } }); // export the constructor exports.mypanel = mypanel; // creat...
...odules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", setup: function(options) { this.debuggee = options.debuggee; this.debuggee.start(); this.debuggee.onmessage = function(event) { console.log(event.data); } this.debuggee.postmessage({ "to":"root", "type":"listtabs" }); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); more usefully, you can pass debuggee from the main add-on to the panel d...
... volcan.js: a javascript api for the debugging protocol communicating with the debugger server by exchanging json messages can be cumbersome...
Storing annotations - Archive of obsolete content
this is implemented as a panel that's...
...el has three new files associated with it: a content-script which builds the panel content a simple html file used as a template for the panel's content a simple css file to provide some basic styling. these three files can all go in a new subdirectory of data which we will call list. ...
...te the panel, which can go in the main function. var annotationlist = panels.panel({ width: 420, height: 200, contenturl: data.url('list/annotation-list.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('list/annotation-list.js')], contentscriptwhen: 'ready', onshow: function() { this.postmessage(simplestorage.storage.annotations); }, onmessage: function(message) { require('sdk/tabs').open(message); } }); since this panel's content script uses jquery we will pass that in too: again, make sure the name of it matches the version of jquery you downloaded. when the panel is shown we send it the array of stored annotations. when the panel sends us a url we use the tabs module to open it in a new tab. finally we need to connect this ...
Working with Svelte stores - Learn web development
ng the notification, and we'll define a timeout to remove the alert. we'll also take care of clearing the timeout when the alert component is unmounted to prevent memory leaks. ...
... let visible let timeout const onmessagechange = (message, ms) => { cleartimeout(timeout) if (!message) { // hide alert if message is empty visible = false } else { visible = true // show alert if (ms > 0) timeout = settimeout(() => visible = false, ms) // and hide it after ms milliseconds } } $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.0...
...4l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814c12.098 19.02 9.365 20 8.309 20z"/></svg> <p>{ $alert }</p> </div> {/if} here we first create the prop ms with a default value of 3000 (milliseconds). then we create an onmessagechange() function that will take care of controlling whether the alert is visible or not. with $: onmessagechange($alert, ms) we tell svelte to run this function whenever the $alert store or the ms prop changes. whenever the $alert store changes, we'll clean up any pending timeout. if $alert is empty, we set visible to false and the alert will be removed from the dom. if it is not empty, we set v...
nsIWebProgressListener
t flags are popping up where. it puts the messages into the browser console. /** * this example assumes that it's being run within the context of a browser * window, and uses a frame script that will be loaded into every * browser tab. */ let mm = window.getgroupmessagemanager("browsers"); mm.loadframescript("chrome://path/to/some/example-framescript.js", true); mm.addmessagelistener("myaddonmessage", (message) => { let data = message.data; let browser = message.target; let outerwindowid = data.outerwindowid; // browser is now the <xul:browser> that saw the web progress activity // occur. if you need to hold onto an identifier for whichever frame // (be it the top-level, or a subframe) was using the webprogress, use // the outerwindowid. this can be communicated back down to th...
... "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("myaddonmessage", { name: "onstatechange", flag: aflag, status: astatus, }); }, onlocationchange: function(aprogress, arequest, auri, aflag) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) .outer...
... flag: aflag, status: astatus, }); }, onlocationchange: function(aprogress, arequest, auri, aflag) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("myaddonmessage", { name: "onlocationchange", outerwindowid: outerwindowid, uri: auri.spec, charset: auri.charset, flag: aflag, }); }, // for definitions of the remaining functions see related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogr...
nsIWebSocketListener
asynchronously after calling nsiwebsocketchannel.asyncopen(). ...
...( in nsisupports acontext, in pruint32 asize ); parameters acontext user defined context. asize number of bytes placed in os send buffer. onbinarymessageavailable() called when a binary message has been received. void onbinarymessageavailable( in nsisupports acontext, in acstring amsg ); parameters acontext user defined context. amsg the message data. onmessageavailable() called when a text message has been received. void onmessageavailable( in nsisupports acontext, in autf8string amsg ); parameters acontext user defined context. amsg the message data, as a utf-8 string. onserverclose() called when the server sends a close message. in the case of errors, onstop() may be called without this method ever getting called. no additional...
... when a text message has been received. void onmessageavailable( in nsisupports acontext, in autf8string amsg ); parameters acontext user defined context. amsg the message data, as a utf-8 string. onserverclose() called when the server sends a close message. in the case of errors, onstop() may be called without this method ever getting called. no additional messages through onmessageavailable(), onbinarymessageavailable()() or onacknowledge()() will be delievered to the listener after onserverclose() is called, but outgoing messages can still be sent through the nsiwebsocketchannel connection. void onserverclose( in nsisupports acontext, in unsigned short acode, in autf8string areason ); parameters acontext user defined context. acode the websocket clo...
DedicatedWorkerGlobalScope: messageerror event - Web APIs
the messageerror event is fired on a dedicatedworkerglobalscope object when it receives a message that can't be deserialized. ...
...n't be deserialized. ...
... no interface messageevent event handler property onmessageerror examples listen for messageerror using addeventlistener(): // inside worker.js self.addeventlistener('messageerror', (event) => { self.postmessage('error receiving message'); console.error(event); }); the same, but using the onmessageerror event handler property: // inside worker.js self.onmessageerror = (event) => { self.postmessage('error receiving message'); console.error(event); }; specifications specification status html living standard living standard ...
HTMLBodyElement - Web APIs
andlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised. windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised. windoweventhandlers.onlanguagechange is an eventhandler representing the code to be called when the languagechange event is raised. windoweventhandlers.onmessage is an eventhandler called whenever an object receives a message event. windoweventhandlers.onmessageerror is an eventhandler called whenever an object receives a messageerror event. windoweventhandlers.onoffline is an eventhandler representing the code to be called when the offline event is raised. windoweventhandlers.ononline is an eventhandler representing the code to be called when the ...
...andler representing the code to be called when the unload event is raised. specifications specification status comment html living standardthe definition of 'htmlbodyelement' in that specification. living standard technically, the event-related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers. htmlbodyelement implements this interface. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the following properties are now obsolete: alink, bgcol...
...nition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the following properties are now obsolete: alink, bgcolor, background, link, text, and vlink. the following properties have been added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload. document object model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlbodyelement' in that specification. obsolet...
MessagePort: message event - Web APIs
the message event is fired on a messageport object when a message arrives on that channel. ...
...indow.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port. ...
...ceived.textcontent = event.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port. ...
MessagePort.start() - Web APIs
Web › API › MessagePort › start
the start() method of the messageport interface starts the sending of messages queued on the port. this method is only needed when using eventtarget.addeventlistener; it is implied when using messagechannel.onmessage. note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
...ng of messages queued on the port. this method is only needed when using eventtarget.addeventlistener; it is implied when using messagechannel.onmessage. note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
...he port. this method is only needed when using eventtarget.addeventlistener; it is implied when using messagechannel.onmessage. note: this feature is available in web workers. syntax port.start() returns void. parameters none. ...
RTCDataChannel: message event - Web APIs
examples for a given rtcdatachannel, dc, created for a peer connection using its createdatachannel() method, this code sets up a handler for incoming messages and acts on them by adding the data contained within the message to the current document as a new <p> (paragraph) element. ...
...newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node. line 6 appends the new paragraph to the end of the document's body. ...
...cument.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node. line 6 appends the new paragraph to the end of the document's body. you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification. c...
RTCDataChannel - Web APIs
osing" state. for example, after rtcdatachannel.close() was called but the underlying data transport might not have been closed yet.onerror the rtcdatachannel.onerror property is an eventhandler which specifies a function to be called when the error event is received. when an error occurs on the data channel, the function receives as input an errorevent object describing the error which occurred.onmessage the rtcdatachannel.onmessage property stores an eventhandler which specifies a function to be called when the message event is fired on the channel. this event is represented by the messageevent interface. this event is sent to the channel when a message is received from the other peer.onopen the rtcdatachannel.onopen property is an eventhandler which specifies a function to be called when the ...
...events bufferedamountlow sent to the channel's onbufferedamountlow event handler when the number of bytes of data in the outgoing data buffer falls below the value specified by bufferedamountlowthreshold. close sent to the onclose event handler when the underlying data transport closes. error sent to the onerror event handler when an error occurs on the data channel. message sent to the onmessage event handler when a message has been received from the remote peer. the message contents can be found in the event's data property. open sent to the onopen event handler when the data channel is first opened, or when an existing data channel's underlying connection re-opens. data format the underlying data format is defined by the ieee draft specification draft-ietf-mmusic-sctp-sdp. the cur...
...format the underlying data format is defined by the ieee draft specification draft-ietf-mmusic-sctp-sdp. the current format specifies its protocol as either "udp/dtls/sctp" (udp carrying dtls carrying sctp) or "tcp/dtls/sctp" (tcp carrying dtls carrying sctp). older browsers may only specify "dtls/sctp". example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel' in that specification. candidate rec...
SharedWorkerGlobalScope: connect event - Web APIs
essageevent event handler property sharedworkerglobalscope.onconnect examples this example shows a shared worker file — when a connection to the worker occurs from a main thread via a messageport, the onconnect event handler fires. the event object is a messageevent. ...
...res. the event object is a messageevent. the connecting port can be referenced through the event object's ports parameter; this reference can have an onmessage handler attached to it to handle messages coming in through the port, and its postmessage() method can be used to send messages back to the main thread using the worker. ...
... living standard ...
Window: messageerror event - Web APIs
the messageerror event is fired on a window object when it receives a message that can't be deserialized. ...
...event is fired on a window object when it receives a message that can't be deserialized. ...
...ves a message that can't be deserialized. ...
page-worker - Archive of obsolete content
in your own add-ons, you will probably want to create your content scripts in separate files and pass their urls using the contentscriptfile property. unless your content script is extremely simple and consists only of a static string,...
...ce all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. onmessage function use this to add a listener to the page worker's message event. page a page object loads the page specified by its contenturl option and executes any content scripts that have been supplied to it in the contentscript and contentscriptfile options. the page is not displayed to the user. the page worker is loaded as soon as the page object is created and stays loade...
widget - Archive of obsolete content
t communicating bi-directionally with a content script. var widget = widgets.widget({ id: "message-test", label: "bi-directional communication!", content: "<foo>bar</foo>", contentscriptwhen: "ready", contentscript: 'self.on("message", function(message) {' + ' alert("got message: " + message);' + '});' + 'self.postmessage("ready");', onmessage: function(message) { if (message == "ready") widget.postmessage("me too"); } }); globals constructors widget(options) creates a new widget. the widget is immediately added to the add-on bar. parameters options : object required options: name type label string a string description of the widget used for accessibility, title bars, and err...
...e: if you also register a "click" listener, it will be called instead of the panel being opened. however, you can show the panel from the listener by calling this.panel.show(). width integer optional width in pixels of the widget. if not given, a default width is used. onclick function include this to listen to the widget's click event. onmessage function include this to listen to the widget's message event. onmouseover function include this to listen to the widget's mouseover event. onmouseout function include this to listen to the widget's mouseout event. onattach function include this to listen to the widget's attach event. tooltip string...
Creating annotations - Archive of obsolete content
code. the selector page mod can be switched on and off using a message from the main add-on code. it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event. when a mouseenter event is triggered the selector checks whether the element is eligible for annotation. an element is eligible if it, or one of its ancestors in the dom tree, has an attribute named "id". the idea here is to make it more ...
... updating main.js again now we'll update main.js again to create the editor and use it. first, import the panel module: var panels = require('sdk/panel'); then add the following code to the main() function: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) { console.log(this.annotationanchor); console.log(annotationtext); } annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); we create the editor panel but don't show it. we will send the editor panel the focus message when it is shown, so it will give the text area focus. when the editor ...
Web Console remoting - Firefox Developer Tools
in the inspector, if any. this nodeactor can then be referred to by the $0 jsterm helper. the response packet: { "from": "conn0.console9", "input": "document", "result": { "type": "object", "classname": "htmldocument", "actor": "conn0.consoleobj20" "extensible": true, "frozen": false, "sealed": false }, "timestamp": 1347306273605, "exception": null, "exceptionmessage": null, "helperresult": null } exception holds the json-ification of the exception thrown during evaluation. exceptionmessage holds the exception.tostring() result. result has the result objectactor instance. helperresult is anything that might come from a jsterm helper result, json stuff (not content objects!). in firefox 23: we renamed the error and errormessage properties to except...
...perresult": null } exception holds the json-ification of the exception thrown during evaluation. exceptionmessage holds the exception.tostring() result. result has the result objectactor instance. helperresult is anything that might come from a jsterm helper result, json stuff (not content objects!). in firefox 23: we renamed the error and errormessage properties to exception and exceptionmessage respectively, to avoid conflict with the default properties used when protocol errors occur. autocomplete and more the autocomplete request packet: { "to": "conn0.console9", "type": "autocomplete", "text": "d", "cursor": 1 } the response packet: { "from": "conn0.console9", "matches": [ "decodeuri", "decodeuricomponent", "defaultstatus", "devicepixelratio", "...
AudioWorkletNode.port - Web APIs
ities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. // ping-pong-processor.js class pingpongprocessor extends audioworkletprocessor { constructor (...args) { super(...args) this.port.onmessage = (e) => { console.log(e.data) this.port.postmessage('pong') } } process (inputs, outputs, parameters) { return true } } registerprocessor('ping-pong-processor', pingpongprocessor) now in our main scripts file we'll load the processor, create an instance of audioworkletnode passing the name of the processor, and connect the node to an audio graph. const audiocontext ...
...n audio graph. const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('ping-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will output "ping" and "pong" strings to the console every second. specifications specification status comment web audio apithe definition of 'port' in that specification. working draft ...
AudioWorkletProcessor.port - Web APIs
ities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. // ping-pong-processor.js class pingpongprocessor extends audioworkletprocessor { constructor (...args) { super(...args) this.port.onmessage = (e) => { console.log(e.data) this.port.postmessage('pong') } } process (inputs, outputs, parameters) { return true } } registerprocessor('ping-pong-processor', pingpongprocessor) now in our main scripts file we'll load the processor, create an instance of audioworkletnode passing the name of the processor, and connect the node to an audio graph. const audiocontext ...
...n audio graph. const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('ping-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will output "ping" and "pong" strings to the console every second. specifications specification status comment web audio apithe definition of 'port' in that specification. working draft ...
Using the Beacon API - Web APIs
nds a beacon using the url and data from the global context. ...
..."success" : "fail"); ...
BeforeUnloadEvent - Web APIs
ner("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box. an almost-cross-browser working example would be close to the below example. ...
..."; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box. an almost-cross-browser working example would be close to the below example. window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification. living standard initial definition ...
BroadcastChannel: messageerror event - Web APIs
the messageerror event is fired on a broadcastchannel object when a message arrives on the channel that can't be deserialized. ...
...ageevent event handler property onmessageerror examples this code uses addeventlistener to listen for messages and errors: const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); channel.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessage and onmessageerror event handler properties: const channel = new broadcastchannel('example-channel'); channel.onmessage = (event) => { received.textcontent = event.data; }; channel.onmessageerror = (event) => { console.log(event); }; specifications specification status html living standard living standard ...
BroadcastChannel - Web APIs
="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel. properties this interface also inherits properties from its parent, eventtarget. broadcastchannel.name read only returns a domstring, the name of the channel. event handlers broadcastchannel.onmessage an eventhandler property that specifies the function to execute when a message event is fired on this object. broadcastchannel.onmessageerror an eventhandler called when a messageevent of type messageerror is fired—that is, when it receives a message that cannot be deserialized. methods this interface also inherits methods from its parent, eventtarget. broadcastchannel.postmessage() s...
..., eventtarget. broadcastchannel.postmessage() sends the message, of any type of object, to each broadcastchannel object listening to the same channel. broadcastchannel.close() closes the channel object, indicating it won't get any new messages, and allowing it to be, eventually, garbage collected. events message fired when when a message arrives on the channel. also available via the onmessage property. messageerror fired when a message arrives that can't be deserialized. also available via the onmessageerror property. specifications specification status comment html living standardthe definition of 'broadcastchannel' in that specification. living standard initial definition. ...
DedicatedWorkerGlobalScope: message event - Web APIs
the message event is fired on a dedicatedworkerglobalscope object when the worker receives a message from its parent (i.e. when the parent sends a message using worker.postmessage()). ...
...c/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); the worker can listen for this message using addeventlistener(): // inside static/scripts/worker.js self.addeventlistener('message', (event) => { console.log(`received message from parent: ${event.data}`); }); alternatively, it could listen using the onmessage event handler property: // static/scripts/worker.js self.onmessage = (event) => { console.log(`received message from parent: ${event.data}`); }; specifications specification status html living standard living standard ...
DedicatedWorkerGlobalScope - Web APIs
the performance object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available. event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers. dedicatedworkerglobalscope.onmessage is an eventhandler representing the code to be called when the message event is raised. these events are of type messageevent and will be called when the worker receives a message from the document that started it (i.e. from the worker.postmessage method.) dedicatedworkerglobalscope.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. me...
...ion set using windowtimers.setinterval(). windowtimers.cleartimeout() cancels the repeated execution set using windowtimers.settimeout(). windowtimers.setinterval() schedules the execution of a function every x milliseconds. windowtimers.settimeout() sets a delay for executing a function. events message fired when the worker receives a message from its parent. also available via the onmessage property. messageerror fired when a worker receives a message that can't be deserialized. also available via the onmessageerror property. specifications specification status comment html living standardthe definition of 'dedicatedworkerglobalscope' in that specification. living standard ...
DirectoryReaderSync - Web APIs
) object. example in the following code snippet from html5rocks, we create web workers and pass data from it to the main app. // taking care of the browser-specific prefixes. window.resolvelocalfilesystemurl = window.resolvelocalfilesystemurl || window.webkitresolvelocalfilesystemurl; // create web workers var worker = new worker('worker.js'); worker.onmessage = function(e) { var urls = e.data.entries; urls.foreach(function(url, i) { window.resolvelocalfilesystemurl(url, function(fileentry) { // print out file's name. console.log(fileentry.name); }); }); }; worker.postmessage({'cmd': 'list'}); the following is worker.js code that gets the contents of the directory. // taking care of the browser-specific p...
... var entries = dirreader.readentries(); for (var i = 0, entry; entry = entries[i]; ++i) { // stash this entry's filesystem in url paths.push(entry.tourl()); // if this is a directory, traverse. if (entry.isdirectory) { getallentries(entry.createreader()); } } } // forward the error to main app. function onerror(e) { postmessage('error: ' + e.tostring()); } self.onmessage = function(e) { var data = e.data; // ignore everything else except our 'list' command. if (!data.cmd || data.cmd != 'list') { return; } try { var fs = requestfilesystemsync(temporary, 1024*1024 /*1mb*/); getallentries(fs.root.createreader()); self.postmessage({entries: paths}); } catch (e) { onerror(e); } }; method overview entrysync readentries ...
EventSource: message event - Web APIs
the message event of the eventsource api is fired when data is received through an event source. bubbles no cancelable no interface messageevent event handler property eventsource.onmessage examples in this basic example, an eventsource is created to receive events from the server; a page with the name sse.php is responsible for generating the events. ...
...ce is created to receive events from the server; a page with the name sse.php is responsible for generating the events. var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.addeventlistener('message', (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }); onmessage equivalent evtsource.onmessage = (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }; specifications specification status html living standardthe definition of 'message event' in that specification. living standard ...
EventSource - Web APIs
a domstring representing the url of the source. eventsource.withcredentials read only a boolean indicating whether the eventsource object was instantiated with cross-origin (cors) credentials set (true), or not (false, the default). event handlers eventsource.onerror is an eventhandler called when an error occurs and the error event is dispatched on an eventsource object. eventsource.onmessage is an eventhandler called when a message event is received, that is when a message is coming from the source. eventsource.onopen is an eventhandler called when an open event is received, that is when the connection was just opened. methods this interface also inherits methods from its parent, eventtarget. eventsource.close() closes the connection, if any, and sets the readystate attribu...
...onally, the event source itself may send messages with an event field, which will create ad-hoc events keyed to that value. examples in this basic example, an eventsource is created to receive unnamed events from the server; a page with the name sse.php is responsible for generating the events. var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } each received event causes our eventsource object's onmessage event handler to be run. it, in turn, creates a new <li> element and writes the message's data into it, then appends the new element to the list element already in the document. no...
ExtendableMessageEvent.data - Web APIs
e data read-only property of the extendablemessageevent interface returns the event's data. it can be any data type. syntax var mydata = extendablemessageevent.data; value any data type. ...
...sagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent. var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.data); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.data' in that specification. working draft initial definition. ...
ExtendableMessageEvent.lastEventId - Web APIs
rface represents, in server-sent events, the last event id of the event source. this is an empty string. syntax var mylasteventid = extendablemessageevent.lasteventid; value a domstring. ...
...sagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent. var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.lasteventid); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.lasteventid' in that specification. working draft initial definition. ...
ExtendableMessageEvent.origin - Web APIs
read-only property of the extendablemessageevent interface returns the origin of the client that sent the message. syntax var myorigin = extendablemessageevent.origin; value a usvstring. ...
...sagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent. var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.origin); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.origin' in that specification. working draft initial definition. ...
ExtendableMessageEvent.ports - Web APIs
ing the ports of the associated message channel (the channel the message is being sent through.) syntax var myports = extendablemessageevent.ports; value an array of messageport objects. ...
...sagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent. var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.ports' in that specification. working draft initial definition. ...
ExtendableMessageEvent.source - Web APIs
erface returns a reference to the client object from which the message was sent. syntax var mysource = extendablemessageevent.source; value a client, serviceworker or messageport object. ...
...sagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent. var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.source); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.source' in that specification. working draft initial definition. ...
HTMLButtonElement - Web APIs
on does nothing. menu: the button displays a menu. htmlbuttonelement.willvalidate read only is a boolean indicating whether the button is a candidate for constraint validation. it is false if any conditions bar it from constraint validation, including: its type property is reset or button; it has a <datalist> ancestor; or the disabled property is set to true. htmlbuttonelement.validationmessage read only is a domstring representing the localized message that describes the validation constraints that the control does not satisfy (if any). this attribute is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmlbuttonelement.validity read only is a validitystate representing the validity states that t...
...ribute has been added: menu. the type attribute can take one more value, "menu". html5the definition of 'htmlbuttonelement' in that specification. recommendation the attributes tabindex and accesskey, are now defined on htmlelement. the following attributes have been added: autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(). the type attribute is no more read-only. document object model (dom) level 2 html specificationthe definition of 'htmlbuttonelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 spec...
HTMLFieldSetElement - Web APIs
ent in the same document it is related to, or the null value if none matches. htmlfieldsetelement.name a domstring reflecting the name html attribute, containing the name of the field set. this can be used when accessing the field set in javascript. it is not part of the data which is sent to the server. htmlfieldsetelement.typeread only the domstring "fieldset". htmlfieldsetelement.validationmessage a domstring representing a localized message that describes the validation constraints that the element does not satisfy (if any). this is the empty string if the element is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmlfieldsetelement.validity a validitystate representing the validity states that this element is in. htmlfieldsetelemen...
... html living standardthe definition of 'htmlfieldsetelement' in that specification. living standard html 5.1the definition of 'htmlfieldsetelement' in that specification. recommendation html5the definition of 'htmlfieldsetelement' in that specification. recommendation the following properties have been added: disabled, elements, name, type, valdiationmessage, validity, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlfieldsetelement' in that specification. obsolete no change document object model (dom) level 1 specificationthe definition of 'htmlfieldsetelement' in that specification. obsolete in...
HTMLInputElement - Web APIs
ement's required attribute, indicating that the user must fill in a value before submitting a form. value string: returns / sets the current value of the control. note: if the user enters a value different from the value expected, this may return an empty string. validity read only validitystate object: returns the element's current validity state. validationmessage read only string: returns a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. this value can be set by the setcustomvalidity method. willvalidate read only boolean: returns whether the...
...are now defined on htmlelement. the following properties are now obsolete: align and usemap. the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown(). document object model (dom) level 2 html specificationthe definition of 'htmlinputelement' in that specification. obsolete the size property is now an unsigned long. the type property must be e...
HTMLObjectElement - Web APIs
pe html attribute, specifying the mime type of the resource. htmlobjectelement.typemustmatch is a boolean that reflects the typemustmatch html attribute, indicating if the resource specified by data must only be played if it matches the type attribute. htmlobjectelement.usemap is a domstring that reflects the usemap html attribute, specifying a <map> element to use. htmlobjectelement.validationmessage read only returns a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmlobjectelement.validity read only returns a validitystate with the validity states that this elemen...
... the w3c specification is a latest of a previous version of html living standard technically, the property tabindex is now defined on htmlelement. the following properties are now obsolete: align, archive, border, code, codebase, codetype, declare, hspace, standby, and vspace. the following properties have been added: typemustmatch, contentwindow, willvalidate, validity, and validationmessage. the following methods have been added: checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlobjectelement' in that specification. obsolete the contentdocument property has been added. document object model (dom) level 1 specificationthe definition of 'htmlobjectelement' in that specification. obsolete...
HTMLSelectElement - Web APIs
ected. htmlselectelement.size a long reflecting the size html attribute, which contains the number of visible items in the control. the default is 1, unless multiple is true, in which case it is 4. htmlselectelement.typeread only a domstring represeting the form control's type. when multiple is true, it returns "select-multiple"; otherwise, it returns "select-one". htmlselectelement.validationmessageread only a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this attribute is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmlselectelement.validityread only a validitystate reflecting the validity state that this control i...
...lselectelement' in that specification. living standard since the latest snapshot, html5, it adds the autocomplete property and the reportvalidity() method. html5the definition of 'htmlselectelement' in that specification. recommendation is a snapshot of html living standard. it adds the autofocus, form, required, labels, selectedoptions, willvalidate, validity and validationmessage properties. the tabindex property and the blur() and focus() methods have been moved to htmlelement. the methods item(), nameditem(), checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlselectelement' in that specification. obsolete options now returns an htmloptionscollection. length now returns an unsig...
HTMLTextAreaElement - Web APIs
his as the first argument, and selectionend as the second argument. tabindex long: returns / sets the position of the element in the tabbing navigation order for the current document. textlength read only long: returns the codepoint length of the control's value. same as reading value.length type read only string: returns the string textarea. validationmessage read only string: returns a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. validity read only validitystate object: returns the validity states that this element is in. valu...
... html5the definition of 'htmltextareaelement' in that specification. recommendation the attributes tabindex and accesskey, as well as the methods blur() and focus() are now defined on htmlelement. the following attributes have been added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), and setselectionrange(). document object model (dom) level 2 html specificationthe definition of 'htmltextareaelement' in that specification. obsolete the property defaultvalue doesn't contain the initial value of the value attribute, but the initial value of the content of the <text...
MessageChannel() - Web APIs
nel(); returns a newly created messagechannel object. example in the following code block, you can see a new channel being created using the messagechannel.messagechannel constructor. when the iframe has loaded, we pass port2 to the iframe using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage), putting it into a paragraph. messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*'...
...gechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment html living standardthe definition of 'messagechannel()' in that specification. living standard ...
MessageChannel.port1 - Web APIs
hed to the context that originated the channel. example in the following code block, you can see a new channel being created using the messagechannel() constructor. when the <iframe> has loaded, we pass messagechannel.port2 to the <iframe> using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the <iframe> (using messageport.onmessage), putting it into a paragraph. the handlemessage method is associated to the port1 to listen when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the ...
...hod is associated to the port1 to listen when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } specifications specification status comment html living standardthe definition of 'port1' in that specification. living standard ...
MessageChannel.port2 - Web APIs
ttached to the context at the other end of the channel. example in the following code block, you can see a new channel being created using the messagechannel.messagechannel constructor. when the iframe has loaded, we pass port2 to the iframe using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage), putting it into a paragraph. messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*'...
...gechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment html living standardthe definition of 'port2' in that specification. living standard ...
MessageChannel - Web APIs
nnel.port1 read only returns port1 of the channel. messagechannel.port2 read only returns port2 of the channel. constructor messagechannel() returns a new messagechannel object with two new messageport objects. example in the following example, you can see a new channel being created using the messagechannel.messagechannel constructor. when the iframe has loaded, we register an onmessage handler for messagechannel.port1 and transfer messagechannel.port2 to the iframe using the window.postmessage method along with a message. when a message is received back from the iframe, the onmessage function simply outputs the message to a paragraph. var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait fo...
...essage. when a message is received back from the iframe, the onmessage function simply outputs the message to a paragraph. var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment ht...
MessagePort.postMessage() - Web APIs
so are no longer usable by the sending browsing context. example in the following code block, you can see a new channel being created using the messagechannel.messagechannel constructor. when the iframe has loaded, we pass messagechannel.port2 to the iframe using window.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '...
...gechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment html living standardthe definition of 'postmessage()' in that specification. living standard ...
RTCPeerConnection.createDataChannel() - Web APIs
re in use. examples this example shows how to create a data channel and set up handlers for the open and message events to send and receive messages on it (for brievity, the example assumes onnegotiationneeded is set up). ...
...on(options); var channel = pc.createdatachannel("chat"); channel.onopen = function(event) { channel.send('hi you!'); } channel.onmessage = function(event) { console.log(event.data); } // answerer side var pc = new rtcpeerconnection(options); pc.ondatachannel = function(event) { var channel = event.channel;  channel.onopen = function(event) { channel.send('hi back!'); } channel.onmessage = function(event) { console.log(event.data); } } alternatively, more symmetrical out-of-band negotiation can be used, using an agreed-upon id (0 here): // both sides var pc = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat", {negotiated: true, id: 0}); channel.onopen = function(event) { channel.send('hi!'); } channel.onmessage = function(event) { console.log(...
RTCPeerConnection: datachannel event - Web APIs
tcdatachannelevent event handler property ondatachannel examples this example sets up a function that handles datachannel events by gathering the information needed to communicate with the newly added rtcdatachannel and by adding event handlers for the events that occur on that channel. pc.addeventlistener("datachannel", ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; }, false); receivechannel is set to the value of the event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one. this same code can also instead use the rtcpeerconnection interface's ondatachannel event handler prop...
...leclose; }, false); receivechannel is set to the value of the event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one. this same code can also instead use the rtcpeerconnection interface's ondatachannel event handler property, like this: pc.ondatachannel = ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'datachannel' in that specification. candidate recommendation basic definition. ...
Using server-sent events - Web APIs
a new eventsource object should be created with both the url and an options dictionary. for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html. you...
..., followed by the text data for that field's value. fields each message received has some combination of the following fields, one per line: event a string identifying the type of event described. if this is specified, an event will be dispatched on the browser to the listener for the specified event name; the website source code should use addeventlistener() to listen for named events. the onmessage handler is called if no event name is specified for a message. data the data field for the message. when the eventsource receives multiple consecutive lines that begin with data:, it concatenates them, inserting a newline character between each one. trailing newlines are removed. id the event id to set the eventsource object's last event id value. retry the reconnection time to use when att...
ServiceWorkerGlobalScope - Web APIs
ted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. an active service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage. additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. <div id="interfacediagram" style="dis...
...ble via the serviceworkerglobalscope.oninstall property. message occurs when incoming messages are received. controlled pages can use the messageport.postmessage() method to send messages to service workers. the service worker can optionally send a response back via the messageport exposed in event.data.port, corresponding to the controlled page. also available via the serviceworkerglobalscope.onmessage property. notificationclick occurs when a user clicks on a displayed notification. also available via the serviceworkerglobalscope.onnotificationclick property. notificationclose occurs — when a user closes a displayed notification. also available via the serviceworkerglobalscope.onnotificationclose property. push occurs when a server push notification is received. also available via t...
ServiceWorkerMessageEvent.data - Web APIs
tures. the data read-only property of the serviceworkermessageevent interface returns the event's data. it can be any data type. syntax var mydata = serviceworkermessageeventinstance.data; value any data type. ...
...n the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... ...
ServiceWorkerMessageEvent.lastEventId - Web APIs
y of the serviceworkermessageevent interface represents, in server-sent events, the last event id of the event source. syntax var mylasteventid = serviceworkermessageeventinstance.lasteventid; value a domstring. ...
...n the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... ...
ServiceWorkerMessageEvent.origin - Web APIs
only property of the serviceworkermessageevent interface returns the origin of the service worker's environment settings object. syntax var myorigin = serviceworkermessageeventinstance.origin; value a domstring. ...
...n the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... ...
ServiceWorkerMessageEvent.ports - Web APIs
returns an array of messageport objects connected with the message channel the message is being sent through. syntax var myports = serviceworkermessageeventinstance.ports; value an array of messageport objects. ...
...n the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... ...
ServiceWorkerMessageEvent.source - Web APIs
eturns a reference to the serviceworker object of the associated service worker that sent the message. syntax var mysource = serviceworkermessageeventinstance.source; value a serviceworker or messageport object. ...
...n the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... ...
ServiceWorkerMessageEvent - Web APIs
d only returns a reference to the service worker that sent the message. serviceworkermessageevent.ports read only returns an array of messageport objects. methods inherits methods from its parent, event. ...
...n the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... ...
SharedWorkerGlobalScope.onconnect - Web APIs
associated sharedworker and the main thread. syntax onconnect = function() { ... }; examples this example shows a shared worker file — when a connection to the worker occurs from a main thread via a messageport, the onconnect event handler fires. the event object is a messageevent. ...
...er fires. the event object is a messageevent. the connecting port can be referenced through the event object's ports parameter; this reference can have an onmessage handler attached to it to handle messages coming in through the port, and its postmessage() method can be used to send messages back to the main thread using the worker. onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); } port.start(); } for a complete running example, see our basic shared worker example (run shared worker.) note: the data property of the event object used to be null in firefox. as of version 65 it is now initialized to an empty string, as per spec (bug 1508824). spe...
WebSocket - Web APIs
Web › API › WebSocket
properties websocket.binarytype the binary data type used by the connection. websocket.bufferedamount read only the number of bytes of queued data. websocket.extensions read only the extensions selected by the server. websocket.onclose an event listener to be called when the connection is closed. websocket.onerror an event listener to be called when an error occurs. websocket.onmessage an event listener to be called when a message is received from the server. websocket.onopen an event listener to be called when the connection is opened. websocket.protocol read only the sub-protocol selected by the server. websocket.readystate read only the current state of the connection. websocket.url read only the absolute url of the websocket. methods websocket.close([code[,...
... the oneventname property of this interface. close fired when a connection with a websocket is closed. also available via the onclose property error fired when a connection with a websocket has been closed because of an error, such as when some data couldn't be sent. also available via the onerror property. message fired when data is received through a websocket. also available via the onmessage property. open fired when a connection with a websocket is opened. also available via the onopen property. examples // create websocket connection. const socket = new websocket('ws://localhost:8080'); // connection opened socket.addeventlistener('open', function (event) { socket.send('hello server!'); }); // listen for messages socket.addeventlistener('message', function (event) { ...
Writing WebSocket client applications - Web APIs
examplesocket.send(json.stringify(msg)); // blank the text input element, ready to receive the next line of text from the user. document.getelementbyid("text").value = ""; } receiving messages from the server websockets is an event-driven api; when messages are received, a message event is sent to the websocket object. to handle it, add an event listener for the message event, or use the onmessage event handler. to begin listening for incoming data, you can do something like this: examplesocket.onmessage = function (event) { console.log(event.data); } receiving and interpreting json objects let's consider the chat client application first alluded to in using json to transmit objects. there are assorted types of data packets the client might receive, such as: login handshake messa...
...nction (event) { console.log(event.data); } receiving and interpreting json objects let's consider the chat client application first alluded to in using json to transmit objects. ...
Window: message event - Web APIs
the message event is fired on a window object when the window receives a message, for example from a call to window.postmessage() from another browsing context. ...
...ton = document.queryselector('#window-message'); windowmessagebutton.addeventlistener('click', () => { targetframe.postmessage('hello there', targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this: window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); alternatively the listener could use the onmessage event handler property: window.onmessage = (event) => { console.log(`received message: ${event.data}`); }; specifications specification status html living standard living standard ...
Window - Web APIs
Web › API › Window
keypress event. globaleventhandlers.onkeyup called when you finish releasing any key. see keyup event. windoweventhandlers.onlanguagechange an event handler property for languagechange events on the window. globaleventhandlers.onload called after all resources and the dom are fully loaded. will not get called when the page is loaded from cache, such as with back button. windoweventhandlers.onmessage is an eventhandler representing the code to be called when the message event is raised. globaleventhandlers.onmousedown called when any mouse button is pressed. globaleventhandlers.onmousemove called continously when the mouse is moved inside the window. globaleventhandlers.onmouseout called when the pointer leaves the window. globaleventhandlers.onmouseover called when the pointer enter...
... page as an application. also available via the onappinstalled property. beforeinstallprompt fired when a user is about to be prompted to install a web application. also available via the onbeforeinstallprompt property. messaging events message fired when the window receives a message, for example from a call to window.postmessage() from another browsing context. also available via the onmessage property. messageerror fired when a window object receives a message that can't be deserialized. also available via the onmessageerror property. print events afterprint fired after the associated document has started printing or the print preview has been closed. also available via the onafterprint property. beforeprint fired when the associated document is about to be printed or prev...
Worker: message event - Web APIs
the message event is fired on a worker object when the worker's parent receives a message from its worker (i.e. when the worker sends a message using dedicatedworkerglobalscope.postmessage()). ...
... interface messageevent event handler property onmessage examples this code creates a new worker and listens to messages from it using addeventlistener(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); alternatively, it could listen using the onmessage event handler property: const worker = new worker("static/scripts/worker.js"); worker.onmessage = (event) => { console.log(`received message from worker: ${event.data}`) }; the worker posts messages using self.postmessage(): // static/scripts/worker.js self.postmessage('i\'m alive!'); specifications specification status html living standard living standard ...
Worker: messageerror event - Web APIs
the messageerror event is fired on a worker object when it receives a message that can't be deserialized. ...
...r message and messageerror events using addeventlistener(): // inside main.js const worker = new worker("static/scripts/worker.js"); worker.addeventlistener("message", (event) => { console.error(`received message from worker: ${event}`); }); worker.addeventlistener("messageerror", (event) => { console.error(`error receiving message from worker: ${event}`); }); the same, but using the onmessageerror event handler property: // inside main.js const worker = new worker("static/scripts/worker.js"); worker.onmessage = (event) => { console.error(`received message from worker: ${event}`); }; worker.onmessageerror = (event) => { console.error(`error receiving message from worker: ${event}`); }; specifications specification status html living standard living...
Worker.prototype.postMessage() - Web APIs
dled by the structured clone algorithm, which includes cyclical references. the worker can send back information to the thread that spawned it using the dedicatedworkerglobalscope.postmessage method. syntax worker.postmessage(message, [transfer]); parameters message the object to deliver to the worker; this will be in the data field in the event delivered to the dedicatedworkerglobalscope.onmessage handler. this may be any value or javascript object handled by the structured clone algorithm, which includes cyclical references. if the message parameter is not provided, a typeerror will be thrown. if the data to be passed to the worker is unimportant, null or undefined can be passed explicitly. transfer optional an optional array of transferable objects to transfer ownership of. if the own...
...info('arrbuf.bytelength pre transfer:', arrbuf.bytelength); myworker.postmessage( { atopic: 'do_sendworkerarrbuff', abuf: arrbuf // the array buffer that we passed to the transferrable section 3 lines below }, [ arrbuf // the array buffer we created 9 lines above ] ); console.info('arrbuf.bytelength post transfer:', arrbuf.bytelength); worker code self.onmessage = function (msg) { switch (msg.data.atopic) { case 'do_sendworkerarrbuff': sendworkerarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } function sendworkerarrbuff(abuf) { console.info('from worker, pre send back abuf.bytelength:', abuf.bytelength); self.postmessage({atopic:...
Worker - Web APIs
Web › API › Worker
eates a dedicated web worker that executes the script at the specified url. this also works for blob urls. properties inherits properties from its parent, eventtarget, and implements properties from abstractworker. event handlers abstractworker.onerror an eventlistener called whenever an errorevent of type error bubbles through to the worker. this is inherited from abstractworker. worker.onmessage an eventlistener called whenever a messageevent of type message bubbles through the worker — i.e. when a message is sent to the parent document from the worker via dedicatedworkerglobalscope.postmessage. the message is stored in the event's data property. worker.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. methods inherits ...
...rker.postmessage() sends a message — consisting of any javascript object — to the worker's inner scope. worker.terminate() immediately terminates the worker. this does not let worker finish its operations; it is halted at once. serviceworker instances do not support this method. events message fires when the worker's parent receives a message from that worker. also available via the onmessage property. messageerror fires when a worker object receives a message that can't be deserialized. also available via the onmessageerror property. rejectionhandled fires every time a promise rejects, regardless of whether or not there is a handler to catch the rejection. also available through the onrejectionhandled event handler property. unhandledrejection fires when a promise rejects ...
Synchronous and asynchronous requests - Web APIs
http request from a worker one of the few cases in which a synchronous request does not usually block execution is the use of xmlhttprequest within a worker. ...
... this pattern can be useful, for example in order to interact with the server in the background, or to prel...
self - Archive of obsolete content
ice. the exception is the context-menu module, which still uses postmessage. postmessage() send a message from a content script to a listener in the main add-on code: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value. on() start listening to messages from the main add-on code: self.on("message", function(addonmessage) { // handle the message }); this takes two parameters: the name of the event, and the handler function. the handler function is passed the message payload. once() exactly like on(), but stop listening after the first message is received. removelistener() remove a listener to an event. this takes two parameters: the name of the event to stop listening to, and the listener function to remov...
Communicating using "port" - Archive of obsolete content
bject is completely different from the self module, which provides an api for an add-on to access its data files and id. in the content script the port object is available as a property of the global self object. thus, to emit a message from a content script: self.port.emit("mycontentscriptmessage", mycontentscriptmessagepayload); to receive a message from the add-on code: self.port.on("myaddonmessage", function(myaddonmessagepayload) { // handle the message }); compare this to the technique used to receive built-in messages in the content script. for example, to receive the context message in a content script associated with a context menu object, you would call the on function attached to the global self object: self.on("context", function() { // handle the message }); so the port p...
Content Scripts - Archive of obsolete content
with content scripts loaded using context-menu, see the context-menu documentation. accessing port in the content script in the content script the port object is available as a property of the global self object. so to emit a message from a content script: self.port.emit("mycontentscriptmessage", mycontentscriptmessagepayload); to receive a message from the add-on code: self.port.on("myaddonmessage", function(myaddonmessagepayload) { // handle the message }); note that the global self object is completely different from the self module, which provides an api for an add-on to access its data files and id. accessing port in the add-on script in the add-on code, the channel of communication between the add-on and a particular content script context is encapsulated by the worker object. ...
panel - Archive of obsolete content
o content scripts under addon.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. contextmenu boolean new in firefox 33 whether to show a context menu when the user context-clicks in the panel. the context menu will be the same one that's displayed in web pages. optional, defaults to false. onmessage function include this to listen to the panel's message event. onshow function include this to listen to the panel's show event. onhide function include this to listen to the panel's hide event. panel the panel object represents a floating modal dialog that can by an add-on to present user interface content. once a panel objec...
tabs - Archive of obsolete content
listeners are passed a single argument, the message posted from the content script. optional. onerror function a function called when the content worker receives an error from content scripts. listeners are passed a single argument, error, which is the error posted from the co...
content/worker - Archive of obsolete content
ring,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. optional. contentscript string,array the texts of content scripts to load. content scripts specified by this option are loaded after those specified by the contentscriptfile option. optional. onmessage function functions that will registered as a listener to a 'message' events. onerror function functions that will registered as a listener to an 'error' events. worker worker is composed from the eventemitter trait, therefore instances of worker and their descendants expose all the public properties exposed by eventemitter along with additional publi...
Displaying annotations - Archive of obsolete content
ons. if it finds any it binds functions to that element's mouseenter and mouseleave events to send messages to the main module, asking it to show or hide the annotation. like the selector, the matcher also listens for the window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up. ...
Client-side form validation - Learn web development
epresents a <button> element) htmlfieldsetelement (represents a <fieldset> element) htmlinputelement (represents an <input> element) htmloutputelement (represents an <output> element) htmlselectelement (represents a <select> element) htmltextareaelement (represents a <textarea> element) the constraint validation api makes the following properties available on the above elements. validationmessage: returns a localized message describing the validation constraints that the control doesn't satisfy (if any). if the control is not a candidate for constraint validation (willvalidate is false) or the element's value satisfies its constraints (is valid), this will return an empty string. validity: returns a validitystate object that contains several properties describing the validity state of th...
TypeScript support in Svelte - Learn web development
r type may be inferred from usage. (ts) change = (message, ms) => { ./svelte-todo-typescript/src/components/alert.svelte:11:37 warn: parameter 'ms' implicitly has an 'any' type, but a better type may be inferred from usage. (ts) (message, ms) => { you can fix these by specifying the corresponding types, like so: export let ms = 3000 let visible: boolean let timeout: number const onmessagechange = (message: string, ms: number) => { cleartimeout(timeout) if (!message) { // hide alert if message is empty note: there's no need to specify the ms type with export let ms:number = 3000 because typescript is already inferring it from its default value. moreactions.svelte now we'll do the same for the moreactions.svelte component. add the lang='ts' att...
nsIWorker
om worker thread. 1.0 66 introduced gecko 1.9.1 inherits from: nsiabstractworker last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) for usage details, see worker and the article using dom workers. method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); attributes attribute type description onmessage nsidomeventlistener an object to receive notifications when messages are received on the worker's message port. methods postmessage() used to allow the worker to send a message back to the web application that created it. void postmessage( in domstring amessage, in nsiworkermessageport amessageport optional ); parameters amessage the message the worker wishes to post back to its creator.
nsIWorkerScope
ed gecko 1.9.1 inherits from: nsiworkerglobalscope last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); void close(); attributes attribute type description onclose nsidomeventlistener a listener object to be called when the worker stops running. onmessage nsidomeventlistener a listener object to be called when a message is posted on the port. the message is in the event's data member. methods close() allows the worker to terminate itself. if a listener has been established by setting the value of the onclose attribute, it gets called. void close(); parameters none. postmessage() posts a message to the scope's parent worker object. void postmes...
BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
Broadcast Channel API - Web APIs
test message.'); any kind of object can be sent, not just a domstring. the api doesn't associate any semantics to messages, so it is up to the code to know what kind of messages to expect and what to do with them. receiving a message when a message is posted, a message event is dispatched to each broadcastchannel object connected to this channel. a function can be run for this event with the onmessage event handler: // a handler that only logs the event to the console: bc.onmessage = function (ev) { console.log(ev); } disconnecting a channel to leave a channel, call the close() method on the object. this disconnects the object from the underlying channel, allowing garbage collection. // disconnect the channel bc.close(); conclusion the broadcast channel api's self-contained interface a...
Channel Messaging API - Web APIs
two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.) when these transferable objects are transferred, they are 'neutered' on the previous context — the one they previously belonged to. for instance a port, when is sent, cannot be used anymore by the original context. the other browsing context can listen for the message using messageport.onmessage, and grab the contents of the message using the event's data attribute. you could then respond by sending a message back to the original document using messageport.postmessage. when you want to stop sending messages down the channel, you can invoke messageport.close to close the ports. find out more about how to use this api in using channel messaging. channel messaging interfaces messagech...
Client.type - Web APIs
Web › API › Client › type
type; value a string, representing the client type. the value can be one of "window" "worker" "sharedworker" example // service worker client (e.g. ...
Constraint validation API - Web APIs
rties and methods (elements that can have a form attribute that indicates their form owner): htmlbuttonelement htmlfieldsetelement htmlinputelement htmlobjectelement htmloutputelement htmlselectelement htmltextareaelement properties validity a read-only property that returns a validitystate object, whose properties represent validation errors for the value of that element. validationmessage a read-only property that returns an empty string if the element is not a candidate for constraint validation, or if the element's value is valid. if the element's value is not valid, it returns a localized validation message. this will be displayed in the ui if the element is the only form control with a validity problem; if a custom error message is set using setcustomvalidity(), this will be ...
DOMException.message - Web APIs
specifications specification status comment web idlthe definition of 'message' in that specification. candidate recommendation browser compatibility the compatibility table on this page is generated from structured data. ...
EventSource() - Web APIs
g that represents the location of the remote resource serving the events/messages. configuration optional provides options to configure the new connection. the possible entries are: withcredentials, defaulting to false, indicating if cors should be set to include credentials. examples var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php. specifications specification status comment html living standardthe definition of 'eventsource()' in that specification. living standa...
HTMLFrameSetElement - Web APIs
andlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised. windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised. windoweventhandlers.onlanguagechange is an eventhandler representing the code to be called when the languagechange event is raised. windoweventhandlers.onmessage is an eventhandler representing the code to be called when the message event is raised. windoweventhandlers.onoffline is an eventhandler representing the code to be called when the offline event is raised. windoweventhandlers.ononline is an eventhandler representing the code to be called when the online event is raised. windoweventhandlers.onpagehide is an eventhandler representing the cod...
HTMLKeygenElement - Web APIs
ype html attribute, containing the type of key used. labels read only unimplemented (see bug 556743) is a nodelist that represents a list of label elements associated with this keygen element. name is a domstring that reflects the name html attribute, containing the name for the control that is submitted with form data. type read only is a domstring that must be the value keygen. validationmessage read only is a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. validity read only is a validitystate representing the validity states that this element is in. willvalida...
HTMLOutputElement - Web APIs
e document that contribute to (or otherwise affect) the calculated value. htmloutputelement.labelsread only a nodelist of <label> elements associated with the element. htmloutputelement.name a domstring reflecting the name html attribute, containing the name for the control that is submitted with form data. htmloutputelement.typeread only the domstring "output". htmloutputelement.validationmessageread only a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmloutputelement.validityread only a validitystate representing the validity states that this element is in. ...
MediaKeySession - Web APIs
only mediakeystatusmap of the current session's keys and their statuses. mediakeysession.sessionid read only contains a unique string generated by the cdm for the current media object and its associated keys or licenses. event handlers mediakeysession.onkeystatuseschange sets the eventhandler called when there has been a change in the keys in a session or their statuses. mediakeysession.onmessage sets the eventhandler called when the content decryption module has generated a message for the session. methods mediakeysession.close() returns a promise after notifying the current media session is no longer needed and that the cdm should release any resources associated with this object and close it. mediakeysession.generaterequest() returns a promise after generating a media requ...
MessageEvent.data - Web APIs
Web › API › MessageEvent › data
the data read-only property of the messageevent interface represents the data sent by the message emitter. syntax var data = messageevent.data; value the data sent by the message emitter; this can be any data type. example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); }; specifications specification status comment html living standardthe definition of 'messageevent: data' in that specification. living standard ...
MessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the messageevent interface is a domstring representing a unique id for the event. syntax var myid = messageevent.lasteventid; value a domstring representing the id. example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.lasteventid); }; specifications specification status comment html living standardthe definition of 'messageevent: lasteventid' in that specification. living standard ...
MessageEvent.origin - Web APIs
the origin read-only property of the messageevent interface is a usvstring representing the origin of the message emitter. syntax var origin = messageevent.origin; value a usvstring representing the origin. example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.origin); }; specifications specification status comment html living standardthe definition of 'messageevent: origin' in that specification. living standard ...
MessageEvent.ports - Web APIs
red worker). syntax var myports = messageevent.ports; value an array of messageport objects. example onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener. otherwise called implicitly by onmessage setter. } specifications specification status comment html living standardthe definition of 'ports' in that specification. living standard initial definition ...
MessageEvent.source - Web APIs
the source read-only property of the messageevent interface is a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter. syntax let mysource = messageevent.source; value a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter. example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.source); }; specifications specification status comment html living standardthe definition of ' messageevent: source' in that specification. living standard ...
OffscreenCanvas - Web APIs
selement object from the main thread. calling getcontext() will then obtain a renderingcontext from that offscreencanvas. main.js (main thread code): var htmlcanvas = document.getelementbyid("canvas"); var offscreen = htmlcanvas.transfercontroltooffscreen(); var worker = new worker("offscreencanvas.js"); worker.postmessage({canvas: offscreen}, [offscreen]); offscreencanvas.js (worker code): onmessage = function(evt) { var canvas = evt.data.canvas; var gl = canvas.getcontext("webgl"); // ... some drawing using the gl context ... }; you can also use requestanimationframe in workers onmessage = function(evt) { const canvas = evt.data.canvas; const gl = canvas.getcontext("webgl"); function render(time) { // ... some drawing using the gl context ... requestanimationframe(r...
RTCDataChannel.binaryType - Web APIs
eceived binary messages' contents will be contained in arraybuffer objects. example this code configures a data channel to receive binary data in arraybuffer objects, and establishes a listener for message events which constructs a string representing the received data as a list of hexadecimal byte values. var dc = peerconnection.createdatachannel("binary"); dc.binarytype = "arraybuffer"; dc.onmessage = function(event) { let bytearray = new uint8array(event.data); let hexstring = ""; bytearray.foreach(function(byte) { hexstring += byte.tostring(16) + " "; }); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.binarytype' in that specification. candidate recommendatio...
RTCDataChannel.close() - Web APIs
annel is sent a networkerror event. a close event is sent to the channel. in firefox, the rtcdatachannel interface was implemented under the name datachannel until firefox 24, so this method was called datachannel.close(). syntax rtcdatachannel.close(); parameters none. return value undefined. example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); dc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function ( console.log("datachannel close"); }; // now negotiate the connection and so forth... specifications specification status comment webrtc 1.0...
RTCDataChannelEvent.channel - Web APIs
value a rtcdatachannel object representing the data channel linking the receiving rtcpeerconnection to its remote peer. example the first line of code in the datachannel event handler shown below takes the channel from the event object and saves it locally for use by the code handling data traffic. pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent.channel' in that specification. candidate recommendation initial specification. ...
RTCDataChannelEvent - Web APIs
ethods, but inherits methods from: event examples in this example, the datachannel event handler is set up to save the data channel reference and set up handlers for the events which need to be monitored. the channel property provides the rtcdatachannel representing the connection to the other peer. pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } see a simple rtcdatachannel sample for another, more complete, example of how to use data channels. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent' in that ...
RTCPeerConnection.addIceCandidate() - Web APIs
how to signal ice candidates across an arbitrary signaling channel. ...
RTCPeerConnection.close() - Web APIs
rns, the signaling state as returned by rtcpeerconnection.signalingstate is closed. make sure that you delete all references to the previous rtcpeerconnection before attempting to create a new one that connects to the same remote peer, as not doing so might result in some errors depending on the browser. ...
RTCPeerConnection.sctp - Web APIs
tp = rtcpeerconnection.sctp; value a rtcsctptransport object describing the sctp transport being used by the rtcpeerconnection for transmitting and receiving on its data channels, or null if sctp negotiation hasn't happened. example var pc = new rtcpeerconnection(); var channel = pc.createdatachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.sctp' in that specification. candidate recommendation initial...
RTCSessionDescription - Web APIs
inherit any methods. rtcsessiondescription() this constructor returns a new rtcsessiondescription. the parameter is a rtcsessiondescriptioninit dictionary containing the values to assign the two properties. rtcsessiondescription.tojson() returns a json description of the object. the values of both properties, type and sdp, are contained in the generated json. ...
ServiceWorkerContainer: message event - Web APIs
the message event is used in a page controlled by a service worker to receive messages from the service worker. bubbles no cancelable no interface messageevent event handler property onmessage examples in this example the service worker get the client's id from a fetch event and then sends it a message using client.postmessage: // in the service worker async function messageclient(clientid) { const client = await clients.get(clientid); client.postmessage('hi client!'); } addeventlistener('fetch', (event) => { messageclient(event.clientid); event.respondwith(() => { // ... }); }); the client can receive the message by listening to the message event: // in the page being controlled navigator.serviceworker.addevent...
ServiceWorkerContainer.startMessages() - Web APIs
t's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.addeventlistener() before the page has finished loading, but want to start processing the messages right away. note: the messages start being sent automatically when setting the handler directly using serviceworkercontainer.onmessage. in this you don't need startmessages(). syntax serviceworkercontainer.startmessages(); parameters none. return value undefined. examples if('serviceworker' in navigator) { navigator.serviceworker .register('/sw.js') .then(function() { console.log('service worker registered'); }); } // ... navigator.serviceworker.addeventlistener('message', (e) => { // ... });...
ServiceWorkerContainer - Web APIs
r. also available via the serviceworkercontainer.oncontrollerchange property. error fired whenever an error occurs in the associated service workers. also available via the serviceworkercontainer.onerror property. message occurs when incoming messages are received by the serviceworkercontainer object (e.g. via a messageport.postmessage() call.) also available via the serviceworkercontainer.onmessage property. methods serviceworkercontainer.register() creates or updates a serviceworkerregistration for the given scripturl. serviceworkercontainer.getregistration() gets a serviceworkerregistration object whose scope matches the provided document url. the method returns a promise that resolves to a serviceworkerregistration or undefined. serviceworkercontainer.getregistrations() retu...
ServiceWorkerGlobalScope: message event - Web APIs
occurs when incoming messages are received. controlled pages can use the serviceworker.postmessage() method to send messages to service workers. the service worker can optionally send a response back via the client.postmessage(), corresponding to the controlled page. bubbles no cancelable no interface extendablemessageevent event handler property onmessage examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.active, and then calls its postmessage() function. // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object c...
SharedWorker() - Web APIs
living standard ...
A simple RTCDataChannel sample - Web APIs
nd enable the "disconnect" button when the remote peer connects. connecting the data channel once the rtcpeerconnection is open, the datachannel event is sent to the remote to complete the process of opening the data channel; this invokes our receivechannelcallback() method, which looks like this: function receivechannelcallback(event) { receivechannel = event.channel; receivechannel.onmessage = handlereceivemessage; receivechannel.onopen = handlereceivechannelstatuschange; receivechannel.onclose = handlereceivechannelstatuschange; } the datachannel event includes, in its channel property, a reference to a rtcdatachannel representing the remote peer's end of the channel. this is saved, and we set up, on the channel, event listeners for the events we want to handle. once this...
WebSocket: message event - Web APIs
the message event is fired when data is received through a websocket. bubbles no cancelable no interface messageevent event handler property onmessage examples // create websocket connection. const socket = new websocket('ws://localhost:8080'); // listen for messages socket.addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of 'websocket message' in that specification. living standard ...
Writing a WebSocket server in C# - Web APIs
"), // wsuri = "ws://echo.websocket.org/", wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("click", onclickbutton); websocket.onopen = function (e) { writetoscreen("connected"); dosend("websocket rocks"); }; websocket.onclose = function (e) { writetoscreen("disconnected"); }; websocket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<span class=error>error:</span> " + e.data); }; function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbeg...
Web Workers API - Web APIs
perties of the window object. but you can use a large number of items available under window, including websockets, and data storage mechanisms like indexeddb. see functions and classes available to workers for more details. data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage event handler (the message is contained within the message event's data property). the data is copied rather than shared. workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return n...
WindowEventHandlers - Web APIs
andlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised. windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised. windoweventhandlers.onlanguagechange is an eventhandler representing the code to be called when the languagechange event is raised. windoweventhandlers.onmessage is an eventhandler representing the code to be called when the message event is raised. windoweventhandlers.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. windoweventhandlers.onoffline is an eventhandler representing the code to be called when the offline event is raised. windoweventhandlers.ononline is an eventhandler representi...
WindowOrWorkerGlobalScope.origin - Web APIs
the origin read-only property of the windoworworkerglobalscope interface returns the origin of the global scope, serialized as a string. syntax var myorigin = self.origin; // or just origin value a usvstring. examples executed from inside a worker script, the following snippet will log the worker's global scope's origin to the console each time it receives a message onmessage = function() { console.log(self.origin); }; if the origin is not a scheme/host/port tuple (say you are trying to run it locally, i.e. via file:// url), origin will return the string "null". specifications specification status comment html living standardthe definition of 'windoworworkerglobalscope.origin' in that specification. living standard initial definition. ...
<body>: The Document Body element - HTML: Hypertext Markup Language
Web › HTML › Element › body
when the document fails to load properly. onfocus function to call when the document receives focus. onhashchange function to call when the fragment identifier part (starting with the hash ('#') character) of the document's current address has changed. onlanguagechange function to call when the preferred languages changed. onload function to call when the document has finished loading. onmessage function to call when the document has received a message. onoffline function to call when network communication has failed. ononline function to call when network communication has been restored. onpopstate function to call when the user has navigated session history. onredo function to call when the user has moved forward in undo transaction history. onresize function to call when th...
An overview of HTTP - HTTP
Web › HTTP › Overview
llows a server to send events to the client, using http as a transport mechanism. using the eventsource interface, the client opens a connection and establishes event handlers. the client browser automatically converts the messages that arrive on the http stream into appropriate event objects, delivering them to the event handlers that have been registered for the events' type if known, or to the onmessage event handler if no type-specific event handler was established. conclusion http is an extensible protocol that is easy to use. the client-server structure, combined with the ability to simply add headers, allows http to advance along with the extended capabilities of the web. though http/2 adds some complexity, by embedding http messages in frames to improve performance, the basic structure o...
WebAssembly.Module.exports() - JavaScript
the module from the main thread. when the module is received, we create an instance from it using the webassembly.instantiate() method, invoke an exported function from inside it, then show how we can return information on the available exports on a module using webassembly.module.exports. ...
WebAssembly.Module - JavaScript
ee wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread. when the module is received, we create an instance from it using the webassembly.instantiate() method and invoke an exported function from inside it. var importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; onmessage = function(e) { console.log('module received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); }; specifications specification webassembly javascript interfacethe definition of 'webassembly.module()' in that specification. browser compatibility the compatibi...
WebAssembly.instantiate() - JavaScript
ee wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread. when the module is received, we create an instance from it using the webassembly.instantiate() method and invoke an exported function from inside it. var importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; onmessage = function(e) { console.log('module received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); }; specifications specification webassembly javascript interfacethe definition of 'instantiate()' in that specification. browser compatibility the compatibility tab...