Search completed in 1.50 seconds.
1243 results for "loaded":
Your results are loading. Please wait...
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none a different event, load, should be used only to detect a fully-loaded page.
... it is a common mistake to use load where domcontentloaded would be more appropriate.
...And 6 more matches
HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings.
... examples these examples add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing.
...And 4 more matches
HTMLMediaElement: loadedmetadata event - Web APIs
the loadedmetadata event is fired when the metadata has been loaded.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadedmetadata specification html5 media additional properties property type description mozchannels read only int the number of channels.
... examples these examples add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing.
...And 3 more matches
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none the original target for this event is the document that has loaded.
...for full details on this event please see the page on the document: domcontentloaded event.
...And 3 more matches
GlobalEventHandlers.onloadeddata - Web APIs
the onloadeddata property of the globaleventhandlers mixin is the eventhandler for processing loadeddata events.
... the loadeddata event is fired when the first frame of the media has finished loading.
... syntax element.onloadeddata = handlerfunction; var handlerfunction = element.onloadeddata; handlerfunction is either null or a javascript function specifying the handler for the event.
... specification specification status comment html living standardthe definition of 'onloadeddata' in that specification.
GlobalEventHandlers.onloadedmetadata - Web APIs
the onloadedmetadata property of the globaleventhandlers mixin is the eventhandler for processing loadedmetadata events.
... the loadedmetadata event is fired when the metadata has been loaded.
... syntax element.onloadedmetadata = handlerfunction; var handlerfunction = element.onloadedmetadata; handlerfunction should be either null or a javascript function specifying the handler for the event.
... specification specification status comment html living standardthe definition of 'onloadedmetadata' in that specification.
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
the domcontentloadedeventend read-only property returns a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes.
... syntax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties ...
... console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcontentloadedeventend' in that specification.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
the domcontentloadedeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document.
... syntax perfentry.domcontentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
...onsole.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcontentloadedeventstart' in that specification.
FontFace.loaded - Web APIs
WebAPIFontFaceloaded
the loaded read-only property of the fontface interface returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror.
... syntax var apromise = fontface.loaded; value a promise that resolves with the current fontface object.
... specifications specification status comment css font loading module level 3the definition of 'loaded' in that specification.
PerformanceTiming.domContentLoadedEventEnd - Web APIs
the legacy performancetiming.domcontentloadedeventend read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after all the scripts that need to be executed as soon as possible, in order or not, has been executed.
... syntax time = performancetiming.domcontentloadedeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventend' in that specification.
PerformanceTiming.domContentLoadedEventStart - Web APIs
the legacy performancetiming.domcontentloadedeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing has been executed.
... syntax time = performancetiming.domcontentloadedeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventstart' in that specification.
ProgressEvent.loaded - Web APIs
the progressevent.loaded read-only property is an integer representing the amount of work already performed by the underlying process.
... syntax value = progressevent.loaded specifications specification status comment xmlhttprequestthe definition of 'progressevent.loaded' in that specification.
Index - Web APIs
WebAPIIndex
requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request (for example xmlhttprequest).
... 277 beforeunloadevent api, reference the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
... 860 document api, dom, document, interface, reference the document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the dom tree.
...And 53 more matches
Index - Archive of obsolete content
18 interacting with page scripts add-on sdk, add-ons, extensions by default, content scripts loaded by add-ons and scripts loaded by web pages are insulated from each other: 19 loading content scripts no summary!
... 102 remote/child module, reference, sdk enables an sdk module loaded into a child process to access web content in the child process and communicate with modules in the main process.
... 110 system/unload register callbacks that are called when a module is unloaded.
...And 24 more matches
tabs - Archive of obsolete content
tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a list of all opened tabs across all windows.
...0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } function logshow(tab) { console.log(tab.url + " is loaded"); } function logactivate(tab) { console.log(tab.url + " is a...
...this does not mean that the content has loaded, only that the browser tab itself is fully visible to the user.
...And 22 more matches
Appendix D: Loading Scripts - Archive of obsolete content
as this module only exists on firefox 4 and other gecko 2-based platforms, the services in question will have to be manually loaded on other platforms.
...these tags are generally inserted into xul overlay files or other xul documents, after which they are automatically loaded into the context of the xul window in question and executed immediately and synchronously.
... speed: script tags may or may not be loaded from pre-compiled bytecode in the fastload cache (gecko 1.x) or startup cache (gecko 2), which means they don't necessarily need to read as source and compiled with each restart.
...And 21 more matches
Frame script loading and lifetime
with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call.
... for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this window, and all new tabs opened afterwards.
... if allowdelayedload is false, the script will only be loaded into frames which are open when the call was made.
...And 15 more matches
nsIDocShell
setting this will make it take effect starting with the next document loaded in the docshell.
... allowimages boolean attribute stating whether or not images should be loaded.
... allowmedia boolean attribute stating whether or not media (audio/video) should be loaded.
...And 15 more matches
Event reference
beforeunload the window, the document and its resources are about to be unloaded.
... unload the document or a dependent resource is being unloaded.
... canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
...And 15 more matches
RDF in Mozilla FAQ - Archive of obsolete content
the rdf service manages a table of all loaded datasources.
... datasources may be loaded via the rdf service using the getdatasource() method.
... how can i tell if an rdf/xml datasource has loaded?
...And 14 more matches
Content Scripts - Archive of obsolete content
" and other modules in "lib", can use the sdk high-level and low-level apis, but can't access web content directly content scripts can't use the sdk's apis (no access to globals exports, require) but can access web content sdk apis that use content scripts, like page-mod and tabs, provide functions that enable the add-on's main code to load content scripts into web pages content scripts can be loaded in as strings, but are more often stored as separate files under the add-on's "data" directory.
...cript: ['document.body.style.border = "5px solid red";', 'window.alert("hi");'] }); }); // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: [data.url("jquery.min.js"), data.url("my-content-script.js")] }); if you do this, the scripts can interact directly with each other, just like scripts loaded by the same web page.
...if you do this, scripts specified using contentscriptfile are loaded before those specified using contentscript.
...And 13 more matches
/loader - Archive of obsolete content
usage the code is intentionally authored so that it can be loaded in several ways.
... it can be loaded as a regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document.
... it can be loaded as a javascript code module: let { loader, require, unload } = components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js'); it can be required as a commonjs module from a module loaded in the loader itself: let { loader, require, unload } = require('toolkit/loader'); what is it good for ?
...And 13 more matches
nsIContentPolicy - Archive of obsolete content
63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy.
... shouldload() will never get this, because it does not represent content to be loaded (the actual load triggered by the refresh will go through shouldload() as expected).
... type_dtd 13 indicates a dtd loaded by an xml document.
...And 13 more matches
page-mod - Archive of obsolete content
a page-mod only attaches scripts to documents loaded in tabs.
... if multiple documents that match the page-mod's include pattern are loaded, then each document is loaded into its own execution context with its own copy of the content scripts.
... in this case the listener assigned to onattach is called once for each loaded document, and the add-on code will have a separate worker for each document.
...And 12 more matches
panel - Archive of obsolete content
a panel's content is loaded as soon as it is created, before the panel is shown, and the content remains loaded when a panel is hidden, so it is possible to keep a panel around in the background, updating its content as appropriate in preparation for the next time it is shown.
... panel content the panel's content is specified as html, which is loaded from the url supplied in the contenturl option to the panel's constructor.
...however, doing this will cause any content scripts to be unloaded and then reloaded, so it may be less efficient, and you'll lose any state associated with the scripts.
...And 12 more matches
What is JavaScript? - Learn web development
note that the code in your web documents is generally loaded and executed in the order it appears on the page.
... if the javascript loads and tries to run before the html and css it is affecting has been loaded, errors can occur.
...client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser.
...And 12 more matches
Venkman Introduction - Archive of obsolete content
the scripts that have been loaded by the javascript engine appear in the loaded scripts window (for more information about how scripts are loaded and accessed in venkman, see "loading scripts into the debugger").
... the loaded scripts view the loaded scripts view is in the top left portion of the window.
... when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed.
...And 11 more matches
browser - Archive of obsolete content
the type of browser, which can be used to set access of the document loaded inside the browser.
... if this is not set, the loaded document has the same access as the window containing the browser.
... more precisely: the document loaded into a chrome window is always of chrome type.
...And 11 more matches
Storage access policy: Block cookies from trackers
second, firefox uses an additional "entity list", which prevents domains from being classified as trackers when they are loaded on a top-level site owned by the same organization.
... the storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context.
... origins classified as trackers will have access to their own storage when they are loaded in a first-party context.
...And 11 more matches
Modules - Archive of obsolete content
all modules within the sdk are loaded using cuddlefish by default.
...however, the following example shows how it can be used to load scripts from other locations: const { classes: cc interfaces: ci } = components; var instance = cc["@mozilla.org/moz/jssubscript-loader;1"]; var loader = instance.getservice(ci.mozijssubscriptloader); function loadscript(url) { loader.loadsubscript(url); } when a script is loaded, it is evaluated in the scope of the global object of the script that loaded it.
...this becomes a problem when two scripts try to define the same property: // index.js: loadscript("www.foo.com/a.js"); loadscript("www.foo.com/b.js"); foo; // => 5 // a.js: foo = 3; // b.js: foo = 5; in the above example, the value of foo depends on the order in which the subscripts are loaded: there is no way to access the property foo defined by "a.js", since it is overwritten by "b.js".
...And 10 more matches
ui/sidebar - Archive of obsolete content
to show what a sidebar looks like, here's a sidebar that displays the results of running the w3c validator on the current page: specifying sidebar content the content of a sidebar is specified using html, which is loaded from the url supplied in the url option to the sidebar's constructor.
... unlike modules such as panel, the content must be local, typically loaded from the add-on's data directory via a url constructed using self.data.url(): var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); from firefox 34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").
... communicating with sidebar scripts you can't directly access your sidebar's content from your main add-on code, but you can send messages between your main add-on code and scripts loaded into your sidebar.
...And 9 more matches
Intercepting Page Loads - Archive of obsolete content
some of the techniques presented here apply only to content loaded in the main browser area, while others detect content being loaded in other xul windows, or even detect xul content being loaded.
... gbrowser.removeeventlistener("load", this._loadhandler, true); finally, the actual code for the handler, which is very simple: _onpageload : function(event) { // this is the content document of the loaded page.
... if (doc.defaultview.frameelement) { // frame within a tab was loaded.
...And 9 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
81 code splitting glossary, reference, web performance, code splitting, latency code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.
... 84 compile time codingscripting, glossary, javascript the compile time is the time from when the program is first loaded until the program is parsed.
...the dom is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g.
...And 9 more matches
DevTools API - Firefox Developer Tools
return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded.
...if the tool is not already loaded or currently loading the returned promise won't be fulfilled until something triggers the tool to load.
... gettoolpanels() returns a toolid → toolpanel map for currently loaded tools.
...And 9 more matches
tabbrowser - Archive of obsolete content
contentwindow type: todo use the contentwindow.wrappedjsobject to obtain a dom(html) window object currenturi type: nsiuri this read-only property contains the currently loaded url.
... securityui type: nsisecurebrowserui the read-only property holds an object which may be used to determine the security level of the loaded document.
...normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
...And 8 more matches
Tips for authoring fast-loading HTML pages - Learn web development
depending on a browser's cache settings, it may send a request with the if-modified-since header for each referenced file, asking whether the file has been modified since the last time it was downloaded.
... any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page has loaded.
... this will cause the javascript to be loaded after the page contents, which will improve the overall appearance of the page load.
...And 8 more matches
nsIFrameScriptLoader
frame scripts are loaded as soon as loadframescript() is called.
...s called on a chromemessagebroadcaster (for example, a global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given window for the window message manager, or every frame in every window for the global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call.
... otherwise it will only be loaded into frames that exist at the time of the call.
...And 8 more matches
MediaDevices.getUserMedia() - Web APIs
eam = await navigator.mediadevices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.mediadevices.getusermedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ }); note: if the current document isn't loaded securely, navigator.mediadevices will be undefined, and you cannot use getusermedia().
...this will happen if the browsing context is insecure (that is, the page was loaded using http rather than https).
...a secure context is, in short, a page loaded using https or the file:/// url scheme, or a page loaded from localhost.
...And 8 more matches
nsIMsgCloudFileProvider
fileuploadsizelimit long readonly: the upper size limit in bytes for a file to be uploaded.
... uploadexceedsfilelimit 0x8055311c returned when uploading has failed because the file being uploaded is larger than the file size limit.
... void uploadfile(in nsilocalfile afile, in nsirequestobserver acallback); parameters afile the file to be uploaded.
...And 7 more matches
HTMLMediaElement - Web APIs
the best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or mozaudioavailable events have begun firing.
... htmlmediaelement.preload is a domstring that reflects the preload html attribute, indicating what data should be preloaded, if any.
...this method must be called after the loadedmetadata event fires.
...And 7 more matches
HTTP Index - HTTP
WebHTTPIndex
78 csp: block-all-mixed-content csp, content-security-policy, directive, http, mixed content, reference, security, block-all-mixed-content the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https.
... 79 csp: child-src csp, child, content-security-policy, directive, http, reference, security, child-src, source the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
... 80 csp: connect-src csp, content-security-policy, directive, http, reference, security, connect-src, source the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
...And 7 more matches
ui/frame - Archive of obsolete content
communicating with frames you can exchange messages between the main add-on code and scripts loaded into the frame using an api modeled on window.postmessage().
... frame methods postmessage(message, targetorigin) send a message to scripts loaded into the frame.
... properties url url for the content loaded into the frame.
...And 6 more matches
Listening for Load and Unload - Archive of obsolete content
if your add-on exports a function called main(), then that function will be called whenever the add-on is loaded, and it will be passed an object containing a string describing the reason it was loaded as well as any arguments passed to it.
... if your add-on exports a function called onunload(), then that function will be called when the add-on is unloaded, and it will be passed a string describing the reason it was unloaded.
...it will be loaded in the same circumstances, but you won't get access to the load/unload reason or arguments.
...And 6 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
to modify any pages that match a particular pattern (for example, "http://example.org/") as they are loaded, use page-mod module.
... a simple code snippet where content script is supplied as contentscript option and url pattern is given as include option is as follows: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it.
... for example, if we save the script above under the add-on's data directory in a file called my-script.js: // import the page-mod api var pagemod = require("sdk/page-mod"); // import the self api var self = require("sdk/self"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: self.data.url("my-script.js") }); or from firefox 34 onwards: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ ...
...And 6 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
30 browser.type xul attributes, xul reference type: one of the values below.the type of browser, which can be used to set access of the document loaded inside the browser.
... 436 index found 1218 pages: 437 international characters in xul javascript firefox, gecko, guide, internationalization, javascript, mozilla, xpcom, xul gecko 1.8, as used in firefox 1.5 and other applications, added support for non-ascii characters in javascript files loaded from xul files.
... 438 introduction to xul guide, xul mozilla has configurable, downloadable chrome, meaning that the arrangement and even presence or absence of controls in the main window is not hardwired into the application, but loaded from a separate ui description.
...And 6 more matches
nsIIOService
for example for an image load, it's the document in which the image will be loaded.
...please note, aloadingprincipal is *not* the principal of the resource being loaded.
...the triggeringprincipal is the principal of the resource that caused this particular url to be loaded.
...And 6 more matches
Plug-in Basics - Plugins
with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been prop...
...when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory.
... a plug-in consumes no resources other than disk space when it is not loaded.
...And 6 more matches
Using files from web applications - Web APIs
when the entire contents of the image file are loaded, they are converted into a data: url which is passed to the onload callback.
... our implementation of this routine sets the img element's src attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.
...while they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling url.revokeobjecturl(): url.revokeobjecturl(objecturl); example: using object urls to display images this example uses object urls to display image thumbnails.
...And 6 more matches
Window - Web APIs
WebAPIWindow
the window interface represents a window containing a dom document; the document property points to the dom document loaded in that 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.
...And 6 more matches
Cross-browser audio basics - Developer guides
src contains the path to the audio file to be loaded (relative or absolute).
... myaudio.addeventlistener("durationchange", function() { //you can display the duration now }); loadedmetadata metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event.
... myaudio.addeventlistener("loadedmetadata", function() { //you can display the duration now }); loadeddata the loadeddata event is fired when the first bit of media arrives.
...And 6 more matches
Large-Allocation - HTTP
the non-standard large-allocation response header tells the browser that the page being loaded is going to want to perform a large allocation.
...the large-allocation tells the browser that the web content in the to-be-loaded page is going to want to perform a large contiguous memory allocation and the browser can react to this header by starting a dedicated process for the to-be-loaded document, for example.
... this page was loaded in a new process due to a large-allocation header.
...And 6 more matches
page-worker - Archive of obsolete content
in this example we fetch the first paragraph of a page from wikipedia, then the first paragraph of a different page: var getfirstparagraph = "var paras = document.getelementsbytagname('p');" + "console.log(paras[0].textcontent);" + "self.port.emit('loaded');" pageworker = require("sdk/page-worker").page({ contentscript: getfirstparagraph, contenturl: "http://en.wikipedia.org/wiki/chalk" }); pageworker.port.on("loaded", function() { pageworker.contenturl = "http://en.wikipedia.org/wiki/cheese" }); scripting page content to access the page's dom you need to attach a script to it.
...we can call this "trusted" content, because unlike content loaded from a source outside the add-on, the add-on author knows exactly what it's doing.
...content scripts specified by this option are loaded before those specified by the contentscript option.
...And 5 more matches
widget - Archive of obsolete content
we can call this "trusted" content, because unlike content loaded from a source outside the add-on, the add-on author knows exactly what it's doing.
...content scripts specified by this property are loaded before those specified by the contentscript property.
...content scripts specified by this property are loaded after those specified by the contentscriptfile property.
...And 5 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
some of that will have to be replaced and the rest will need to be loaded differently.
...the resource:// protocol actually bleeds into content which allows webpages to detect installed add-ons using the protocol, which is not particularly fantastic (just the static file contents, not any loaded script/data).
...prior to firefox 10, the chrome.manifest file you rely on wasn't loaded automatically for restartless add-ons.
...And 5 more matches
Using gdb on wimpy computers - Archive of obsolete content
however, you need to make sure that the base libraries like libc and pthreads are loaded before you tell gdb to stop loading shared libraries.
... if you don't allow those libraries to be loaded then gdb will not be able to properly debug threads on linux.
...the argument to the command is a regular expression for the libraries to be loaded.
...And 5 more matches
Index
installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module.
...nss internal pkcs #11 module slots: 2 slots attached status: loaded slot: nss internal cryptographic services token: nss generic crypto services slot: nss user private key and certificate services token: nss certificate db ----------------------------------------------------------- passing a specific module name with the -list returns details information about the module itself, like supported cipher mechanisms, ver...
...sion numbers, serial numbers, and other information about the module and the token it is loaded on.
...And 5 more matches
Index
MozillaTechXPCOMIndex
load notifications are fired as the image is loaded from the network or filesystem.
... 335 nsiapplicationupdateservice interfaces, interfaces:scriptable, update service, xpcom, xpcom api reference, xpcom interface reference adds a listener that receives progress and state information about the update that is currently being downloaded.
... 433 nsicontentframemessagemanager interface reference, interfaces:scriptable, xpcom, xpcom interface reference this interface provides the environment for scripts that are loaded into content frames using the nsiframescriptloader interface.
...And 5 more matches
nsIWebNavigation
load_flags_bypass_proxy 512 this flag specifies that any intermediate proxy caches should be bypassed (that is, that the content should be loaded from the origin server).
... load_flags_charset_change 1024 this flag specifies that a reload was triggered as a result of detecting an incorrect character encoding while parsing a previously loaded document.
...set with care, since setting incorrectly can cause us to assume that nothing was actually loaded in this object if the load ends up being handled by an external application.
...And 5 more matches
Request.cache - Web APIs
WebAPIRequestcache
otherwise the resource will be downloaded from the server and the cache will be updated.
... if there is no match, the browser will make a normal request, and will update the cache with the downloaded resource.
... no-store — the browser fetches the resource from the remote server without first looking in the cache, and will not update the cache with the downloaded resource.
...And 5 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true.
...it specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct accept request header.
... disabled for rel="stylesheet" only, the disabled boolean attribute indicates whether or not the described stylesheet should be loaded and applied to the document.
...And 5 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.
... preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
... it may have one of the following values: none: indicates that the video should not be preloaded.
...And 5 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this change means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the size needed to display the image before it has loaded, if css has been applied that causes problems with its display size.
... jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout.
...And 5 more matches
Navigation and resource timings - Web Performance
as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend.
... domcontentloadedeventstart right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been executed.
... domcontentloadedeventend right after all the scripts that need to be executed as soon as possible, in order or not, have been executed.
...And 5 more matches
content/symbiont - Archive of obsolete content
var { symbiont } = require('sdk/content/content'); var thing = symbiont.resolve({ constructor: '_init' }).compose({ constructor: function thing(options) { // `getmyframe` returns the host application frame in which // the page is loaded.
... parameters options : object optional options: name type frame object the host application frame in which the page is loaded.
...this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once 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".
...And 4 more matches
On page load - Archive of obsolete content
this article is for xul/javascript developers who want to have custom code executed each time a new page is loaded in browser/mail.
...element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ appcontent.addeventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded ...
... if(doc.location.href.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).
...And 4 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
data bind: mutation in the current document this step takes care of applying the changes into the current document, based on the data loaded, and uses dom interfaces.
...data request \________ dynamically create a hidden iframe \_________ content is loaded -> call data binder data binder \_____ load xml||html data from iframe "container" \_____ send content to proper layout components the method presented here separates data request from data binding.
...a request to a web server no longer requires a new page to be loaded, in order to update information in a page seamlessly.
...And 4 more matches
New Security Model for Web Services - Archive of obsolete content
the problem external untrusted scripts loaded behind a firewall are executed in a sandbox.
... client-controlled solutions several client-controlled solutions have been designed to prevent sandboxed applications loaded behind a firewall from compromising other resources protected behind the firewall.
... same source restriction by restricting sandboxed scripts to access only resources in the domain from which they were loaded, any script loaded from one domain into another is prevented from accessing resources in the domain into which it has been loaded.
...And 4 more matches
Common causes of memory leaks in extensions - Extensions
to avoid these issues, references to dom nodes in foreign document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references.
...consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...hence the interval will only be destroyed when the outer window is unloaded (i.e.
...And 4 more matches
2D maze game with device orientation - Game development
this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']); }, create: function() { this.game.state.start('mainmenu'); } }; there are single images, spritesheets and audio files loaded by the framework.
...that progress of the loaded assets is visualized by the framework with the use of one image.
... with every asset loaded you can see more of the preloadbar image: from 0% to 100%, updated on every frame.
...And 4 more matches
Message manager overview
if you load a frame script using the global frame message manager, the script gets loaded separately into every open tab: three times, in the diagram above.
...if you load a frame script using the window message manager it gets loaded separately into each tab open in that particular window.
...scripts you load using a browser message manager are loaded only into that content tab, and messages you send are delivered only to that content tab.
...And 4 more matches
nsIModule
idref aiid, [retval, iid_is(aiid)] out nsqiresult aresult); void registerself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr, in string atype); void unregisterself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr); methods canunload() this method may be queried to determine whether or not the component module can be unloaded by xpcom.
... return value indicates to the caller whether or not the component module can be unloaded.
... returning true is not a guarantee that the module will be unloaded.
...And 4 more matches
nsIProcessScriptLoader
process scripts are loaded as soon as loadprocessscript() is called.
... if aallowdelayedload is true, then the script will also be loaded into any new child processes created after the loadprocessscript() call.
... otherwise it will only be loaded into child processes that exist at the time of the call.
...And 4 more matches
XUL Overlays
MozillaTechXULOverlays
loading overlays overlays can be loaded explicitly or dynamically.
... when you load an overlay explicitly, it means that you intend to make it available every time the base file is loaded.
...any number of overlays can be loaded into a master document, and an overlay can also load other overlays.
...And 4 more matches
Using Service Workers - Web APIs
so documents will have to be reloaded to actually be controlled.
... now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them?
...we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them?
...And 4 more matches
Starting up and shutting down a WebXR session - Web APIs
context requirements a webxr compatible environment starts with a securely-loaded document.
... your document needs to either have been loaded from the local drive (such as by using an url such as http://localhost/...), or using https when loading the page.
... the javascript code must, likewise, have been loaded securely.
...And 4 more matches
Window.open() - Web APIs
WebAPIWindowopen
if the name doesn't exist, then a new browsing context is opened in a new tab or a new window, and the specified resource is loaded into it.
... syntax var window = window.open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded.
...the url parameter specifies the url to be fetched and loaded in the new window.
...And 4 more matches
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... as soon as you draw into a canvas any data that was loaded from another origin without cors approval, the canvas becomes tainted.
... the key is to use the crossorigin attribute by setting crossorigin on the htmlimageelement into which the image will be loaded.
...And 4 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
otherwise, setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.
...it may have one of the following values: none: indicates that the audio should not be preloaded.
... auto: indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
...And 4 more matches
Using the application cache - HTML: Hypertext Markup Language
since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).
...files listed under the cache: section header (or immediately after the cache manifest line) are explicitly cached after they're downloaded for the first time.
...network entries in an application cache are essentially an "online whitelist"—uris specified in the network section are loaded from the server instead of the cache.
...And 4 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes).
... mitigating packet sniffing attacks in addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using https.
... example 4 a web site administrator for an online banking site wants to ensure that all its content is loaded using tls, in order to prevent attackers from eavesdropping on requests.
...And 4 more matches
Content-Security-Policy - HTTP
directives fetch directives fetch directives control the locations from which certain resource types may be loaded.
... child-src defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
... connect-src restricts the urls which can be loaded using script interfaces default-src serves as a fallback for the other fetch directives.
...And 4 more matches
Index - HTTP
WebHTTPHeadersIndex
30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https.
... 31 csp: child-src csp, directive, http, reference, security the deprecated http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
... 32 csp: connect-src csp, directive, http, reference, security the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
...And 4 more matches
Progressive loading - Progressive web apps (PWAs)
we should be able to show them at least the basic view of the page they want to see, with placeholders in the places more content will eventually be loaded.
... to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure.
...when you include <img> elements in your html, then every referenced image will be fetched and downloaded during initial website access.
...And 4 more matches
Loading Content Scripts - Archive of obsolete content
the contentscriptfile option enables you to pass in the local file url from which the content script will be loaded.
...contentscriptfile: [data.url("jquery-1.4.2.min.js"), data.url("my-content-script.js")] scripts specified using contentscriptfile are loaded before those specified using contentscript.
... the contentscriptwhen option specifies when the content script(s) should be loaded.
...And 3 more matches
window/utils - Archive of obsolete content
parameters uri : string uri of the document to be loaded into the window.
... parameters options : object options for the function, with the following properties: name type url string uri of the document to be loaded into the window.
... isdocumentloaded(window) check if the given window's document is completely loaded.
...And 3 more matches
Listening to events in Firefox extensions - Archive of obsolete content
domcontentloaded dispatched when the initial dom for the page is completely loaded.
... once the page is loaded, the onload handler fires.
... pageshow event this event works the same as the load event, except that it fires every time the page is loaded (whereas the load event doesn't fire in firefox 1.5 when the page is loaded from cache).
...And 3 more matches
Introducing the Audio API extension - Archive of obsolete content
reading audio streams the loadedmetadata event when the metadata of the media element is available, it triggers a loadedmetadata event.
...the following example extracts the data from an audio element: <!doctype html> <html> <head> <title>javascript metadata example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample d...
...we can extend the previous example to visualize the timestamp and the first two samples in a <div> element: <!doctype html> <html> <head> <title>javascript visualization example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <pre id="raw">hello</pre> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; ...
...And 3 more matches
Modularization techniques - Archive of obsolete content
a pure virtual interface is simply a class where every method is defined as pure virtual, that is: virtual int foo(int bar) = 0; pure virtual interfaces provide an easy mechanism for passing function tables between modules that may reside in separate, possibly dynamically loaded, libraries.
... const nsiid &aiid, nsisupports *adelegate, void **aresult); // manually registry a factory for a class static nsresult registerfactory(const nscid &aclass, nsifactory *afactory, prbool areplace); // manually registry a dynamically loaded factory for a class static nsresult registerfactory(const nscid &aclass, const char *alibrary, prbool areplace, prbool apersist); // manually unregister a factory for a class static nsresult unregisterfactory(const nscid &aclass, nsifactory *afactory); ...
...// manually unregister a dynamically loaded factory for a class static nsresult unregisterfactory(const nscid &aclass, const char *alibrary); // unload dynamically loaded factories that are not in use static nsresult freelibraries(); }; there are several ways a factory can make its way into the repository.
...And 3 more matches
A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
... in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application.
...when you create different chrome for a package, you can create a subdirectory underneath content whose contents are loaded instead of default.
...And 3 more matches
browser.type - Archive of obsolete content
the type of browser, which can be used to set access of the document loaded inside the browser.
... if this is not set, the loaded document has the same access as the window containing the browser.
... more precisely: the document loaded into a chrome window is always of chrome type.
...And 3 more matches
Introduction - Archive of obsolete content
the datasource is loaded via its url.
...otherwise, the datasource is loaded as any other url is loaded.
... if the datasource is already loaded and cached, the template builder can begin work right away.
...And 3 more matches
iframe - Archive of obsolete content
the type of browser, which can be used to set access of the document loaded inside the browser.
... if this is not set, the loaded document has the same access as the window containing the browser.
... more precisely: the document loaded into a chrome window is always of chrome type.
...And 3 more matches
Responsive images - Learn web development
the elva-fairy-480w.jpg will be loaded, as its inherent width (480w) is closest to the slot size.
...when testing it with a mobile browser, you can use tools like firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
... to see which images were loaded, you can use firefox devtools's network monitor tab.
...And 3 more matches
Tracking Protection
in private browsing windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites.
... click the ⓘ symbol in the address bar to view information about the currently loaded page.
... content is blocked based on the domain from which it is to be loaded.
...And 3 more matches
WebRequest.jsm
browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser.
... browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser.
... browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser.
...And 3 more matches
Application Translation with Mercurial
so let's go to c:\mozilla by typing cd /c/mozilla/ create a new directory for the source code: mkdir mozilla-aurora initialize the new directory as new repository: hg init mozilla-aurora go into the new directory: cd mozilla-aurora unpack the source code: hg unbundle /path/to/the/downloaded/mozilla-aurora.hg this can take some time, mostly depending on the performance of the hard drive.
... lastname <mynick@example.com> merge = internal:merge [alias] qexport = export -g -r qtip qexportall = diff -r qparent [defaults] commit = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded.
...the file paths follow the directory structure of the locale repository downloaded for translation.
...And 3 more matches
NSS Certificate Download Specification
for mozilla browsers, this handling will depend upon the mime content-type that is used on the object being downloaded.
...these mime types are: application/x-x509-user-cert the certificate being downloaded is a user certificate belonging to the user operating the browser.
... application/x-x509-ca-cert the certificate being downloaded represents a certificate authority.
...And 3 more matches
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
other certificates on the token are also loaded (to allow building certificate chains), but it's not necessary to include the full chain, as long as the full chain is available in the regular certificate database.
...this value is set when the key is generated, so that nss will be able to find the key when the certificate for that key is loaded.
... pkcs #11 certificates that have private keys associated with them are are loaded into the temporary database (in memory) and marked as user certificates.
...And 3 more matches
NSS PKCS11 Functions
this is only applicable if the loaded module is actually a moduledb rather than a pkcs #11 module (see pkcs11_module_specs).
...once the the module has been successfully loaded, other nss calls will use it in the normal course of searching.
... modulespec specifies how the module should be loaded.
...And 3 more matches
Scripting Java
if we just view the method object by itself we can see the various overloaded forms of the method: js> f.listfiles function listfiles() {/* java.io.file[] listfiles() java.io.file[] listfiles(java.io.filenamefilter) java.io.file[] listfiles(java.io.filefilter) */} this output shows that the file class defines three overloaded methods listfiles: one that takes no arguments, another with a filenamefilter argument, and a third with a filefilter argument.
... js> f.name test.txt js> f.directory false calling overloaded methods the process of choosing a method to call based upon the types of the arguments is called overload resolution.
... as an example, consider the following java class that defines a number of overloaded methods and calls them.
...And 3 more matches
mozIJSSubScriptLoader
as of gecko 8.0, scripts are loaded from the startup cache where possible.
... the loaded script is executed with the principal associated with the target object.
... any top-level functions or variables created by the loaded script via var are created as properties of the targetobj target object (but things declared via let and const are not).
...And 3 more matches
nsIDOMWindowUtils
this is used on mobile, for example, to prevent attempts to render content until enough of the page has been loaded to avoid content bouncing around excessively as more content is loaded.
... select_character 0 select_cluster 1 select_word 2 select_line 3 select_beginline 4 select_endline 5 select_paragraph 6 select_wordnospace 7 agent_sheet 0 a possible type of a style sheet loaded/removed with loadsheet()/removesheet().
... user_sheet 1 a possible type of a style sheet loaded/removed with loadsheet()/removesheet().
...And 3 more matches
nsIDownloadManager
toolkit/components/downloads/public/nsidownloadmanager.idlscriptable this interface lets applications and extensions communicate with the download manager, adding and removing files to be downloaded, fetching information about downloads, and being notified when downloads are completed.
... nsidownloadprogresslistener alistener); void resumedownload(in unsigned long aid); void retrydownload(in unsigned long aid); void savestate(); obsolete since gecko 1.8 void startbatchupdate(); obsolete since gecko 1.9.1 attributes attribute type description activedownloadcount long the number of files currently being downloaded.
... the path is dependent on two user configurable prefs set in preferences: browser.download.folderlist defines the default download location for files: 0: files are downloaded to the desktop by default.
...And 3 more matches
nsISHistoryListener
inherits from: nsisupports last changed in gecko 1.7 a session history listener is notified when pages are added to, removed from, and loaded from session history.
...boolean onhistorygotoindex( in long aindex, in nsiuri agotouri ); parameters aindex the index in session history of the entry to be loaded.
... agotouri the uri of the session history entry to be loaded.
...And 3 more matches
nsIWebProgressListener
void onstatechange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus); void onstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); constants state transition flags these flags indicate the various states that requests may transition through as they are being loaded.
...as such, there is no actual network activity associated with this request, and any modifications made to the document or presentation when it was originally loaded will still be present.
...this may mean that the request is being loaded as part of a page in which some content was received over an insecure channel.
...And 3 more matches
Initialization and Destruction - Plugins
initialization: the browser calls the plug-in api function np_initialize when the plug-in code is first loaded.
... shutdown: when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory and the browser calls the function np_shutdown.
... initialization the browser calls np_initialize when a plug-in is loaded and before the first instance is created.
...And 3 more matches
about:debugging - Firefox Developer Tools
this firefox provides information about temporary extensions you have loaded for debugging, extensions that are installed in firefox, the tabs that you currently have open, and service workers running on firefox.
...when you do, it is added to the network locations list along with the devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a list of the extensions that you have loaded using the load temporary add-on button.
... once you have loaded a temporary extension, you can see information about it and perform operations on it.
...And 3 more matches
HTMLImageElement.loading - Web APIs
for instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport.
...when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire.
... images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event.
...And 3 more matches
Service Worker API - Web APIs
if successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for urls accessed by the user inside the whole origin, or inside a subset specified by you.
... download, install and activate at this point, your service worker will observe the following lifecycle: download install activate the service worker is immediately downloaded when a user first accesses a service worker–controlled site/page.
... an event is fired on the service worker and it hasn't been downloaded in the last 24 hours.
...And 3 more matches
Media buffering, seeking, and time ranges - Developer guides
sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player.
... buffered the buffered attribute will tell us which parts of the media has been downloaded.
... it returns a timeranges object, which will tell us which chunks of media have been downloaded.
...And 3 more matches
Media events - Developer guides
durationchange the metadata has loaded or changed, indicating a change in duration of the media.
... this is sent, for example, when the media has loaded enough that the duration is known.
... emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
...And 3 more matches
Performance fundamentals - Web Performance
common-case animations are "offloaded" to the system compositor, which can render them in a performant, power-efficient fashion.
... startup performance application startup is punctuated by three user-perceived events, generally speaking: the first is the application first paint — the point at which sufficient application resources have been loaded to paint an initial frame the second is when the application becomes interactive — for example, users are able to tap a button and the application responds the final event is full load — for example when all the user's albums have been listed in a music player the key to fast startup is to keep two things in mind: upp is all that matters, and there's a "critical path" to each user-perceiv...
... for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constructed resources like images in that part of the dom have to be loaded and decoded the css styles must be applied to that dom the styled document has to be reflowed nowhere in that list is "load the js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
...And 3 more matches
Communicating With Other Scripts - Archive of obsolete content
this section of the guide explains how content scripts can communicate with: your main.js file, or any other modules in your add-on other content scripts loaded by your add-on page scripts (that is, scripts embedded in the web page or included using <script> tags) main.js your content scripts can communicate with your add-on's "main.js" (or any other modules you're written for your add-on) by sending it messages, using either the port.emit() api or the postmessage() api.
... content scripts content scripts loaded into the same document at the same time using the same method can interact with each other directly as well as with the web content itself.
... however, content scripts which have been loaded into different documents cannot interact directly with each other.
...And 2 more matches
Content Processes - Archive of obsolete content
content scripts differ from scripts that are loaded by the page itself in that they are provided with a messaging api that can be used to send messages back to the add-on script.
...among other things, this allows us to specify one or more content scripts to be loaded.
... when a content script is first loaded, the content worker automatically imports a messaging api that allows it to emit messages over a pipe.
...And 2 more matches
content/worker - Archive of obsolete content
content scripts specified by this option are loaded before those specified by the contentscript option.
...content scripts specified by this option are loaded after those specified by the contentscriptfile option.
... methods postmessage(data) asynchronously emits "message" events in the enclosed worker, where content script was loaded.
...And 2 more matches
frame/hidden-frame - Archive of obsolete content
remove unregisters a frame, unloading any content that was loaded in it.
... the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
... parameters hiddenframe : hiddenframe the frame to add remove(hiddenframe) unregister a hidden frame, unloading any content that was loaded in it.
...And 2 more matches
system/unload - Archive of obsolete content
experimental register callbacks that are called when a module is unloaded.
... it ensures that this wrapper method is called when the object's module is unloaded.
... when(callback) registers a function to be called when the module is unloaded.
...And 2 more matches
Tabbed browser - Archive of obsolete content
you can access gbrowser only after the browser window is fully loaded.
... gbrowser.tabcontainer.advanceselectedtab(-1, true); detecting page load see also code snippets:on page load function examplepageload(event) { if (event.originaltarget instanceof components.interfaces.nsidomhtmldocument) { var win = event.originaltarget.defaultview; if (win.frameelement) { // frame within a tab was loaded.
...if you don't want do anything when frames/iframes // are loaded in this web page, uncomment the following line: // return; // find the root document: win = win.top; } } } // do not try to add a callback until the browser window has // been initialised.
...And 2 more matches
Creating a Help Content Pack - Archive of obsolete content
understanding the syntax is important because small syntax errors can mean that a whole file won't be loaded correctly.
...this attribute also specifies what topic is loaded when the user hits the home button in the viewer.
...the data source specified by toc will always be displayed, while the other data sources may only be available by searching through the loaded content pack.
...And 2 more matches
Venkman Internals - Archive of obsolete content
if the file is not currently loaded, the js engine doesn't know anything about the file.
... you can still set breakpoints, but they will be future breakpoints, which will be "real" breakpoints when/if the file is loaded (note that this may never happen!).
... scriptmanager in initdebugger() the previous loaded scripts are passed to an onscriptcreated() method which binds them to a scriptmanager.
...And 2 more matches
Binding Attachment and Detachment - Archive of obsolete content
whenever an element is removed from a document, any bindings attached via css loaded by the document will be detached.
... <constructor> call as a document is loaded and style rules are matched for elements, any binding documents that are encountered will load as needed.
...when the load event fires, and if all binding documents loaded successfully, it can be assumed that all bindings are attached to all elements in the page.
...And 2 more matches
International characters in XUL JavaScript - Archive of obsolete content
gecko 1.8, as used in firefox 1.5 and other applications, added support for non-ascii characters in javascript files loaded from xul files.
... earlier versions always interpreted js files loaded from xul as iso-8859-1 (latin-1), in both local and remote cases.
... how the character encoding is determined in gecko 1.8 and later when the javascript file is loaded from a chrome:// url, a byte order mark (fixme: )(bom) is used to determine the character encoding of the script.
...And 2 more matches
Template Builder Interface - Archive of obsolete content
the processes of creating a builder for an element applies both when an element is created when the window is loaded and when an element is inserted dynamically.
...the only difference is that the datasource has already loaded so the data will be the same.
...they will both be loaded and the template reconstructed.
...And 2 more matches
XUL Structure - Archive of obsolete content
however, a file loaded via a chrome url will be able to read files with the same access privileges as the installed extension.
...both html and xul placed on a web site have no extra permissions; however both html and xul loaded through a chrome url have enhanced permissions.
... xul may be loaded from a remote site, from the local file system, or installed as a package and accessed using a chrome url.
...And 2 more matches
editor - Archive of obsolete content
to enable editing on an editor, do either of the following: set the src attribute on the editor after the outer window has loaded, for example, in the onload handler.
... call the makeeditable method to make the document loaded in the editor editable.
... enable the design mode of the document loaded in the editor.
...And 2 more matches
Client-side storage - Learn web development
separate storage for each domain there is a separate data store for each domain (each separate web address loaded in the browser).
...we hope you have fun while you are here.'; // hide the 'forget' part of the form and show the 'remember' part forgetdiv.style.display = 'none'; rememberdiv.style.display = 'block'; } } last but not least, we need to run the namedisplaycheck() function every time the page is loaded.
...this is already a great improvement to the user experience, but there is still one thing missing — the main html, css, and javascript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection.
...And 2 more matches
Drawing graphics - Learn web development
we could now try to embed the image using drawimage(), but we need to make sure the image file has been loaded first, otherwise the code will fail.
... parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image itself.
... parameters 4 and 5 define the width and height of the area we want to cut out from the original image we loaded.
...And 2 more matches
Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average website.
...it's important to remember that when images are downloaded, they need to be stored in memory.
...progressive jpegs, in contrast to normal jpegs, render progressively (hence the name), meaning the user sees a low-resolution version that gains clarity as the image downloads, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
...And 2 more matches
Process scripts
however, a problem with frame scripts is that they can be loaded multiple times in the content process, in multiple scopes that are insulated from each other.
... for example, if you call the global frame message manager's loadframescript() function, then the script will be loaded separately into all open tabs.
...but if you register it in a frame script, and the frame script is loaded more than once, you'll register the content policy more than once, which probably isn't what you intend.
...And 2 more matches
InstallListener
only called for add-ons that need to be downloaded.
...check the progress property for the amount of data downloaded and the maxprogress property for the total data expected.
...only called for add-ons that need to be downloaded.
...And 2 more matches
Download
haspartialdata read only boolean indicates whether, at this time, there is any partially downloaded data that can be used when restarting a failed or canceled download.
... note: this property's value may not match the actual final size of the downloaded file if the download is encoded during the network transfer.
... you can use the downloadtarget.size property to get the actual size of the completely-downloaded file once the download has succeeded.
...And 2 more matches
Shell global objects
sourceislazy if present and true, indicates that, after compilation, script source should not be cached by the js engine and should be lazily loaded from the embedding as-needed.
... loadbytecode if true, and if the source is a cacheentryobject, the bytecode would be loaded and decoded from the cache entry instead of being parsed, then it would be executed as usual.
... asserteqbytecode if true, and if both loadbytecode and savebytecode are true, then the loaded bytecode and the encoded bytecode are compared.
...And 2 more matches
XPCOM changes in Gecko 2.0
prior to gecko 2, during component registration, all binary and javascript component files were loaded and called, asking them to register themselves.
...the component is loaded only when the xpcom component manager needs to create a component.
...in theory, this is invisible to the user, but it's a costly process, since every component needs to be loaded and executed, then unloaded, then reloaded again during the restart.
...And 2 more matches
Observer Notifications
note that while the window are open and the chrome loaded the tabs in the windows may still be being restored after this notification.
... browser-delayed-startup-finished sent when the browser window and all its components have been loaded and initialized.
... the window id can be obtained from subject.queryinterface(components.interfaces.nsisupportspruint64).data toplevel-window-ready nsiwindowwatcher called just after a new top level window has been opened and is ready, but has not yet loaded a document.
...And 2 more matches
imgIRequest
thod overview void cancelandforgetobserver(in nsresult astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with.
... imageprincipal nsiprincipal the principal gotten from the channel the image was loaded from.
... status_load_complete 0x4 the data has been fully loaded to memory, but not necessarily fully decoded.
...And 2 more matches
nsIApplicationUpdateService
methods adddownloadlistener() adds a listener that receives progress and state information about the update that is currently being downloaded.
...void adddownloadlistener( in nsirequestobserver listener ); parameters listener an object implementing nsirequestobserver and optionally nsiprogresseventsink that will be notified of state and progress information as the update is downloaded.
... return value a string indicating the status of the update upon return: "downloading" the update is being downloaded.
...And 2 more matches
nsIStyleSheetService
a user sheet loaded via this api will come before usercontent.css and userchrome.css in the cascade (so the rules in it will have lower precedence than rules in those sheets).
... an agent sheet loaded via this api will come after ua.css in the cascade (so the rules in it will have higher precedence than rules in ua.css).
... the relative ordering of two user or two agent sheets loaded via this api is undefined.
...And 2 more matches
Document - Web APIs
WebAPIDocument
the document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the dom tree.
...possible values are visible, hidden, prerender, and unloaded.
... globaleventhandlers.onloadeddata is an eventhandler representing the code to be called when the loadeddata event is raised.
...And 2 more matches
HTMLImageElement.complete - Web APIs
the read-only htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
... syntax let doneloading = htmlimageelement.complete; value a boolean value which is true if the image has completely loaded; otherwise, the value is false.
... the image is considered completely loaded if any of the following are true: neither the src nor the srcset attribute is specified.
...And 2 more matches
font-display - CSS: Cascading Style Sheets
the font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... description the font display timeline the font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face.
... font block period if the font face is not loaded, any element attempting to use it must render an invisible fallback font face.
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded.
... code <applet> specifies the url of the applet's class file to be loaded and executed.
... loading <img>, <iframe> indicates if the element should be loaded lazily (loading="lazy") or loaded immediately (loading="eager").
...And 2 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
using as to specify the type of content to be preloaded allows the browser to: prioritize resource loading more accurately.
... what types of content can be preloaded?
... many different content types can be preloaded.
...And 2 more matches
CSP: script-src - HTTP
this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
... 'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
... examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with addeventlistener calls: document.getelementbyid("btn").addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security w...
...And 2 more matches
Porting the Library Detector - Archive of obsolete content
for example, if window.jquery is defined, then the page has loaded jquery.
... the script listens to gbrowser's domcontentloaded event.
...however, instead of maintaining its own state by listening for gbrowser events and updating the user interface, the content script will just run when it's loaded, collect the array of library names, and post it back to main.js: function testlibraries() { var win = unsafewindow; var librarylist = []; for(var i in ld_tests) { var passed = ld_tests[i].test(win); if (passed) { var libraryinfo = { name: i, version: passed.version }; librarylist.push(libraryinfo); } } self.postmessage(librarylist); } tes...
...h(function(library) { if (worker.tab.libraries.indexof(library) == -1) { worker.tab.libraries.push(library); } }); if (worker.tab == tabs.activetab) { updatewidgetview(worker.tab); } }); } }); the content script is executed once for every window.onload event, so it will run multiple times when a single page containing multiple iframes is loaded.
content/loader - Archive of obsolete content
content scripts specified by this property are loaded before those specified by the contentscript property.
...content scripts specified by this property are loaded after those specified by the contentscriptfile property.
...this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
... contenturl the url of the content loaded.
loader/sandbox - Archive of obsolete content
the argument may be: a url string, in which case the sandbox will get the same privileges as a script loaded from that url a dom window object, to inherit privileges from the window being passed.
... evaluate code module provides evaluate function that lets you execute code in the given sandbox: evaluate(scope, 'var a = 5;'); evaluate(scope, 'a + 2;'); //=> 7 more details about evaluated script may be passed via optional arguments that may improve exception reporting: // evaluate code as if it was loaded from 'http://foo.com/bar.js' and // start from 2nd line.
...this argument can be: a uri string, giving the sandbox the same privileges as a script loaded from that url a dom window object, giving the sandbox the same privileges as the dom window null, to give the sandbox chrome privileges.
... uri : string evaluate the code as if it were being loaded from the given uri.
platform/xpcom - Archive of obsolete content
registering and unregistering by default, factories and services are registered with xpcom automatically when they are created, and unregistered automatically when the add-on that created them is unloaded.
... unregister boolean by default, the factory is unregistered as soon as the add-on which created it is unloaded.
... by default, factories and services are unregistered automatically when the add-on that registered them is unloaded.
... by default, the factory is registered when it is created and unregistered when the add-on that created it is unloaded.
remote/child - Archive of obsolete content
enables an sdk module loaded into a child process to access web content in the child process and communicate with modules in the main process.
...it provides two main things: access to web content loaded into this child process port mechanisms to communicate with the main process interacting with web content to interact with web content, the sdk/remote/child module provides a frames property that's a list of all content frames loaded into this child process.
... at this point you can't access frame's content yet, but you can add event listeners: const { frames } = require("sdk/remote/child"); frames.on("attach", function(frame) { console.log("new frame"); frame.addeventlistener("domcontentloaded", function(e) { console.log(e.target.location.href); }); }); detach triggered when a frame is removed (for example, the user closed a tab).
...this can include load and unload events from any content that is loaded in the frame.
remote/parent - Archive of obsolete content
multiprocess applications can have other remote processes where untrusted content like webpages are loaded.
... frame every dom page loaded as a part of the application is loaded in a content frame.
... loading modules into the child process to load a module into the child process, use remoterequire(): const { remoterequire } = require("sdk/remote/parent"); remoterequire("./my-module.js", module); inter-process communication a module loaded into a different process cannot directly communicate or share state with the module that loaded it.
...on(process, message) { console.log("main says: " + message); }); // main.js const { processes, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); processes.port.emit("message-from-main", "hello from main"); processes.port.on("message-from-remote", function(process, message) { console.log("remote says: " + message); }); child process privileges a module loaded into a child process can't do everything that the same module loaded into the parent process can.
HTML to DOM - Archive of obsolete content
parsing complete html to dom loading an html document seems much simpler if it's loaded using the xmlhttprequest object.
... donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
... the most interesting piece of code here is the domcontentloaded event listener we define for the element.
...aevent.originaltarget; var url = doc.location.href; if (aevent.originaltarget.nodename == "#document") { // ok, it's a real page, let's do our magic dump("[df] url = "+url+"\n"); var text = doc.evaluate("/html/body/h1",doc,null,xpathresult.string_type,null).stringvalue; dump("[df] text in /html/body/h1 = "+text+"\n"); } }, as you can see, we obtain full access to the dom of the page we loaded in background, and we can even evaluate xpath expressions.
Working with BFCache - Archive of obsolete content
q: is the page reloaded?
... loaded from cache?
...a: in the non-bfcache case, the page is reloaded in the sense of reparsing from the original html source.
...the dom is recreated during the parsing process, and scripts are recompiled (and also reloaded, probably from the http cache).
Running Tamarin acceptance tests - Archive of obsolete content
the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar.
... also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar.
... also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/display/flexsdk/flex+sdk.
Content Panels - Archive of obsolete content
adding child panels there may be times when you want to have part of a document loaded from a different page.
...it has the advantage that it can be placed anywhere and the contents can be loaded from a different file.
...in this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window.
... that means that when a script loaded inside the browser tries to get the topmost window, it will get the outer xul window.
Using the Editor from XUL - Archive of obsolete content
overview the editor in xul lives on top of a xul <iframe> element; it observes document loading in this <iframe>, and, when document loading is complete, it instantiates an editor on the loaded document.
...editor.xul is loaded.
...it does some getting of window.arguments (which is a way callers can pass parameters to new windows -- we use this to get the url to be loaded), then it calls editorstartup(), where the real work happens.
... we detect that the document we want to edit has loaded successfully in nseditorshell::onenddocumentload().
prefpane - Archive of obsolete content
in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window.
... onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window.
... loaded indicates whether the pane is fully loaded.
...supported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events paneload this event is fired on the pane element when the pane is fully loaded (e.g.
What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to html next the head of an html document is the part that is not displayed in the web browser when the page is loaded.
... let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is my page</p> </body> </html> the html head is the contents of the <head> element — unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page.
... the <h1> element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.) the <title> element is metadata that represents the title of the overall html document (not the document's content.) active learning: inspecting a simple example to start off this active learning, we'd like y...
...this is useful as it makes sure that the html is all loaded before the javascript runs, so that you don't get errors resulting from javascript trying to access an html element that doesn't exist on the page yet.
Fetching data from the server - Learn web development
originally page loading on the web was simple — you'd send a request for a website to a server, and as long as nothing went wrong, the assets that made the web page would be downloaded and displayed on your computer.
... less data is downloaded on each update, meaning less wasted bandwidth.
... to speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded.
... the content is only reloaded from the server when it has been updated.
Manipulating documents - Learn web development
there are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the window is the browser tab that a web page is loaded into; this is represented in javascript by the window object.
... using methods available on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more.
... the document (represented by the dom in browsers) is the actual page loaded into the window, and is represented in javascript by the document object.
... the document object model the document currently loaded in each one of your browser tabs is represented by a document object model.
JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance.
...but not all bytes downloaded have the same impact.
... javascript bytes have to be downloaded, parsed, and exectuted.
...all of this javascript must be downloaded.
Website security - Learn web development
any scripts in the original user content will be run when the new page is loaded.
... while the data from post or get requests is the most common source of xss vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed.
...when loaded, this file might be executed on the web server or the client-side (leading to an xss attack).
...this includes, but is not limited to data in url parameters of get requests, post requests, http headers and cookies, and user-uploaded files.
Setting up your own test automation environment - Learn web development
to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers.
...google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked.
...install it when it is downloaded.
...when this has downloaded, put it in a sensible place, like in your home directory.
Application cache implementation overview
loadedfromapplicationcache flag is now set true on the channel.
...when the url in the manifest attribute of the html tag is identical to the manifest url the channel's nsiapplicationcache object belongs to and, the channel's loadedfromapplicationcache flag is set, the document is associated with that nsiapplicationcache object and an update attempt for the manifest is scheduled after the document completely loads.
... marking entries as foreign when nscontentsink::processofflinemanifest() discovers that the url in the manifest attribute of the html tag is different from the manifest url the channel's nsiapplicationcache object belongs to, the entry the document has been loaded from is marked “foreign” and the page load is completely restarted.
...all files downloaded are deleted and the new cache version is discarded.) an md5 hash is then calculated from the manifest content we download from the server to be compared to existing md5 (in case of an “update”).
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
the html an <iframe> is turned into a browser iframe by setting the mozbrowser attribute on it: <iframe src="http://mozilla.org" mozbrowser> in addition, the <iframe> can be loaded in its own child process — separate to the page embedding this frame — by including the remote attribute.
...we then set the browser iframe's src attribute to equal the value of the url bar, which causes the new url to be loaded in the iframe.
... in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience — this can be read out of the event object's e.detail.backgroundcolor value.
... when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).
HTTP Cache
the server responses with a 200 response which means the cached content is no longer valid and a new version must be loaded from the network.
... keeps its internal state like notloaded, loading, empty, writing, ready, revalidating.
... nsicachestorage.asyncopenuri forwards to cacheentry::asyncopen and triggers the following pseudo-code: cachestorage::asyncopenuri - the api entry point: globally atomic: look a given cacheentry in cachestorageservice hash tables up if not found: create a new one, add it to the proper hash table and set its state to notloaded consumer reference ++ call to cacheentry::asyncopen consumer reference -- cacheentry::asyncopen (entry atomic): the opener is added to fifo, consumer reference ++ (dropped back after an opener is removed from the fifo) state == notloaded: state = loading when open_truncate flag was used: cachefile is created as 'new', state = empty otherwise: ...
... only cacheentry objects that are already loaded and filled with data and having the 'consumer reference == 0' (bug 942835) can be purged.
AddonManager
state_downloading an install that is in the process of being downloaded.
... state_downloaded an install that has finished downloading and is ready to install.
... error_incorrect_hash the downloaded file did not match the expected hash.
...callback, in string mimetype, in string hash, in string name, in string iconurl, in string version, in nsiloadgroup loadgroup ) parameters url the url the add-on is located at callback a callback to pass the addoninstall to mimetype the mimetype of the add-on hash an optional hash of the add-on name an optional placeholder name while the add-on is being downloaded iconurl an optional placeholder icon url while the add-on is being downloaded version an optional placeholder version while the add-on is being downloaded loadgroup an optional nsiloadgroup to associate any network requests with getinstallforfile() asynchronously gets an addoninstall for an nsifile.
Downloads.jsm
since the download cannot be restarted, any partially downloaded data will not be kept in case the download fails.
... calling this function may cause the download list to be reloaded from the previous session, if it wasn't loaded already.
... calling this function does not cause the list of public downloads to be reloaded from the previous session.
...dules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { yield downloads.fetch("http://www.mozilla.org/", os.path.join(os.constants.path.tmpdir, "example-download.html")); console.log("example-download.html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the global download lists.
Using JavaScript code modules
the module is loaded into a specific javascript scope, such as xul script or javascript xpcom script, using components.utils.import() or components.utils["import"]().
...(the url in the example is "resource://app/my_module.jsm".) code modules can only be loaded using a chrome: (), resource:, or file: url.
... sharing objects using code modules an extremely important behavior of components.utils.import() is that modules are cached when loaded and subsequent imports do not reload a new version of the module, but instead use the previously cached version.
...ocal;1"] .createinstance(components.interfaces.nsilocalfile); aliasfile.initwithpath("/some/absolute/path"); var aliasuri = services.io.newfileuri(aliasfile); resprot.setsubstitution("myalias", aliasuri); // assuming the code modules are in the alias folder itself notes custom modules and xpcom components note that prior to gecko 2.0 javascript xpcom components are loaded before chrome registration.
NSS tools : signtool
netscape internal pkcs #11 module (this module is internally loaded) slots: 2 slots attached status: loaded slot: communicator internal cryptographic services version 4.0 token: communicator generic crypto svcs slot: communicator user private key and certificate services token: communicator certificate db 2.
... cryptos (this is an external module) dll name: core32 slots: 1 slots attached status: loaded slot: litronic 210 token: ----------------------------------------------- using netscape signing tool and a smart card to sign files the signtool command normally takes an argument of the -k option to specify a signing certificate.
...netscape internal pkcs #11 module (this module is internally loaded) slots: 2 slots attached status: loaded slot: communicator internal cryptographic services version 4.0 token: communicator generic crypto svcs slot: communicator user private key and certificate services token: communicator certificate db ----------------------------------------------- this unix example shows that netscape signing tool is using a fips-...
...netscape internal fips pkcs #11 module (this module is internally loaded) slots: 1 slots attached status: loaded slot: netscape internal fips-140-1 cryptographic services token: communicator certificate db ----------------------------------------------- see also signver (1) the nss wiki has information on the new database design and how to configure applications to use it.
JS::CompileOptions
the web platform allows scripts to be loaded from arbitrary cross-origin sources.
... to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded.
... sourceislazy bool true indicates that, after compilation, script source should not be cached by the js engine and should be lazily loaded from the embedding as-needed.
... in addition to above, the following are used in browser: "worker" - code loaded by calling the web worker constructor—the worker's main script.
Building the WebLock UI
first of all, it's important to be able to represent the basic state of the lock as soon as it's loaded.
...this is a bit more complicated, because it requires that you work with the currently loaded page or provide other ui (e.g., a textfield where you can enter an arbitrary url) for specifying urls.
... weblock.css the following style rules are defined in weblock.css, a css file that is loaded by the overlay and applied to the icon in the browser that reflects the current status of the web lock and provides access to the web lock manager dialog.
...(note: we include three images to represent the state of the weblock, but wlock.gif and wl-lock.gif are identical, since weblock is presumed to be unlocked when it's loaded.
Creating the Component Code
use the calculator (after learning long division) you have to write a fair amount of code to create a component library that gets loaded into xpcom.
...the aloaderstr parameter, which is opaque and should not be modified, distinguishes components that are loaded from the same location specified by the nsifile parameter.
...since xpcom already knows internally what kind of file it has just loaded and called registerself on, passing this value to the registration methods is a shortcut for determining what kind of component is being registered.
...xpcom then loads the component library associated with the cid if it isn't loaded already.
nsICachingChannel
load_only_if_modified 1 << 31 this load flag controls what happens when a document would be loaded from the cache to satisfy a call to asyncopen.
... if this attribute is set to true, then the document will not be loaded from the cache.
... methods isfromcache() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this method finds out whether or not this channel's data is being loaded from the cache.
...return value returns true if this channel's data is being loaded from the cache, otherwise returns false.
nsIDOMProgressEvent
method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute type description lengthcomputable boolean specifies whether or not the total size of the transfer is known.
... loaded unsigned long long the number of bytes transferred since the beginning of the operation.
... void initprogressevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg ); parameters typearg the type of event.
... loadedarg the number of bytes already transferred.
nsIMsgDBView
return values acount upon return, the count variable may contain the number of messages loaded.
... void init(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); parameters amessengerinstance amsgwindow acommandupdater sort() sorts the currently loaded messages.
... docommand() perform a command on the currently loaded messages.
...this forces everything to be re-downloaded.
nsIUpdatePatch
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing a patch file that can be downloaded and applied to a version of this application so that it can be updated.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsidomelement serialize(in nsidomdocument updates); attributes attribute type description finalurl astring the final url this patch was being downloaded from.
... selected boolean true if this patch is currently selected as the patch to be downloaded and installed for this update transaction.
... url astring the url from which the patch was downloaded.
nsIUpdatePrompt
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
...showupdateavailable() shows a message advising the user that an update is available to be downloaded and installed.
... showupdatedownloaded() shows a message advising the user that an update has been downloaded, and that the user should restart the application in order to install it.
...void showupdatedownloaded( in nsiupdate update, in boolean background optional ); parameters update an nsiupdate describing the update that was downloaded.
nsIUploadChannel
inherits from: nsisupports last changed in gecko 1.7 method overview void setuploadstream(in nsiinputstream astream, in acstring acontenttype, in long acontentlength); attributes attribute type description uploadstream nsiinputstream get the stream (to be) uploaded by this channel.
... methods setuploadstream() sets a stream to be uploaded by this channel.
...void setuploadstream( in nsiinputstream astream, in acstring acontenttype, in long acontentlength ); parameters astream the stream to be uploaded by this channel.
... acontenttype if acontenttype is empty, the protocol will assume that no content headers are to be added to the uploaded stream and that any required headers are already encoded in the stream.
ctypes.open
int add(int a, int b) { return a + b; } to make this a shared library, a native file which can be loaded and used from js-ctypes, compile it with these commands: gcc -fpic -c mycfuntionsforunix.c gcc -shared -o mycfuntionsforunix.so mycfuntionsforunix.o a file named mycfuntionsforunix.so is successfully created.
... this native file can be placed in any folder of an addon and then loaded from js-ctypes.
... they can also be loaded from the system library path.
...see: http://stackoverflow.com/questions/19382201/how-to-load-dll-from-sdk-addon-data-folder it is important to note that custom native files cannot be loaded through chrome:// or resource:// uris.
Scripting plugins - Plugins
that means that a script from an origin other than the origin of the page that loaded the plugin is not able to access methods and properties on the plugin.
... the same thing applies the other way too; the plugin can reach only javascript objects in the same origin as the page that loaded the plugin.
... in addition to this, a further extension to this api is being discussed that would give a plugin greater flexibility by letting the plugin control the origin of the calling code, so that the plugin can specify the origin of calls that come from internally loaded code from other origins.
... a plugin that wishes to be scriptable using this new mechanism needs to return the appropriate npobject (which is created by calling npn_createobject) when the browser requests it by calling: npp_getvalue(npp, nppvpluginscriptablenpobject, ...); accessing browser objects from a plugin a plugin that wishes to access objects in the browser window that loaded the plugin can do this by getting the npobject for the browser's window object, or the dom element that loaded the plugin.
DOM Inspector internals - Firefox Developer Tools
viewers are dynamically loaded; when the panel is made to switch from one viewer to another, the old viewer is destroyed, and the new viewer is loaded in its place.
...this comparison turns out to be quite apt, since each panel actually contains an anonymous browser, and individual viewers exist in separate documents loaded in the browser.
... this separation allows for viewers to be self-contained, with a viewer's xul defined in its own document and loaded in its own scope, without fear of collisions in the xul, css, or js.
....xul chrome://inspector/content/viewers/d...andoverlay.xul chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/d...setoverlay.xul chrome://inspector/content/statusbaroverlay.xul chrome://global/content/globaloverlay.xul (note that the overlays from the viewer subdirectories—viewers/dom and viewers/stylerules—are loaded as a result of overlay directives in dom inspector's chrome manifest, rather than being explicitly imported using a xul-overlay processing instruction in the overlaid file.) inspectoroverlay.xul this imports the scripts the top-level inspector needs, including dependencies.
Introduction to DOM Inspector - Firefox Developer Tools
inspecting content documents the inspect content document menupopup can be accessed from the file menu, and it will list currently loaded content documents.
... inspecting chrome documents the inspect chrome document menupopup can be accessed from the file menu , and it will contain the list of currently loaded chrome windows and subdocuments.
...(note that there are bugs which prevent the flasher from dom inspector apis from working correctly on certain platforms.) if you inspect the main browser window, for example, and select nodes in the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you will see the various parts of the browser interface being highlighted with a blinking red border.
... basic actions of the dom nodes viewer selecting elements by click another powerful interactive feature of the dom inspector is that when you have the dom inspector open and have enabled this functionality by choosing edit > select element by click or by clicking the little magnifying glass icon in the upper left portion of the dom inspector application, you can click anywhere in a loaded web page or the the inspect chrome document, and the element you click will be shown in the document pane in the dom nodes viewer and information displayed in the object pane.
Debugger.Source - Firefox Developer Tools
url if the instance refers to javascript source, the filename or url from which this script’s code was loaded.
...source may be loaded from a url in the following ways: the url may appear as the src attribute of a <script> element in markup text.
... (note that code passed to eval, the function constructor, or a similar function isnot considered to be loaded from a url; the url accessor on debugger.source instances for such sources should return undefined.) if the instance refers to webassembly code, the url of the script that called new webassembly.module with the string "> wasm" appended.
... "worker", for code loaded by calling the web worker constructor—the worker’s main script.
FontFace.display - Web APIs
WebAPIFontFacedisplay
the display property of the fontface interface determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... swap period if the font face is still not loaded, the fallback font will be shown.
... when the font face loads, the fallback will be swaped for the downloaded font.
... failure period if the font face still is not loaded, the fallback font will be shown and no swap will occur.
FontFace - Web APIs
WebAPIFontFace
it allows control of the source of the font face, being a url to an external resource, or a buffer; it also allows control of when the font face is loaded and its current status.
... fontface.display a cssomstring that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... fontface.loaded read only returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror.
... fontface.status read only returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
Advanced techniques: Creating and sequencing audio - Web APIs
loading the sample we want to make sure our file has loaded and been decoded into a buffer before we use it, so let's create an async function to allow us to do this: async function getfile(audiocontext, filepath) { const response = await fetch(filepath); const arraybuffer = await response.arraybuffer(); const audiobuffer = await audiocontext.decodeaudiodata(arraybuffer); return audiobuffer; } we can then use the await operator when calling this...
... let's create another async function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when this file is loaded and buffered: async function setupsample() { const filepath = 'dtmf.mp3'; const sample = await getfile(audioctx, filepath); return sample; } note: you can easily modify the above function to take an array of files and loop over them to load more than one sample.
... drawnote) { pads.foreach(function(el, i) { el.children[lastnotedrawn].style.bordercolor = 'hsla(0, 0%, 10%, 1)'; el.children[drawnote].style.bordercolor = 'hsla(49, 99%, 50%, 1)'; }); lastnotedrawn = drawnote; } // set up to draw again requestanimationframe(draw); } putting it all together now all that's left to do is make sure we've loaded the sample before we are able to play the instrument.
... // when the sample has loaded allow play let loadingel = document.queryselector('.loading'); const playbutton = document.queryselector('[data-playing]'); let isplaying = false; setupsample() .then((sample) => { loadingel.style.display = 'none'; // remove loading screen dtmf = sample; // to be used in our playsample function playbutton.addeventlistener('click', function() { isplaying = !isplaying; if (isplaying) { // start playing // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { a...
Using Web Workers - Web APIs
if the script can't be loaded, network_error is thrown, and subsequent code will not be executed.
... note: scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importscripts() .
... this is done synchronously; importscripts() does not return until all the scripts have been loaded and executed.
... note: in firefox, shared workers cannot be shared between documents loaded in private and non-private windows (bug 1177621).
Window: load event - Web APIs
WebAPIWindowload event
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
... this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
... bubbles no cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-conten...
...click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment ui eventsthe definition of 'load' in that specification.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
this can lead to crashes where it releases something and the wrong time, when some of your dll's are unloaded but not others, and a destructor is called in an unloaded dll.
... solution: create a "shutdown" method for each internal accessible object, to remove any references to other internal objects before any of your dll's are unloaded.
...use state_busy to indicate that a new document is being loaded.
... until the wm_getobject message is processed, the gecko accessibility service is not used, and thus the accessibility.dll is not loaded, so there is almost zero overhead for accessibility api support in mozilla or gecko, in the general case.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
high the resource should be downloaded before other lower-priority page resources.
... low the resource should be downloaded after other higher-priority page resources.
...via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 65), chromium-based browsers, and safari/ios.
...scripts cannot access most properties in other window objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
2 allowing cross-origin use of images and canvas advanced, cors, canvas, html, image, reference, security, storage, data html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... 113 manifest cache, application cache the manifest attribute of <html> element specifies a url of a application cache manifest that is downloaded in the early stages of page load.
...once chosen, the files can be uploaded to a server using form submission, or manipulated using javascript code and the file api.
... 205 <template>: the content template element element, html, html web components, html:flow content, html:metadata content, html:phrasing content, html:script-supporting element, reference, template, web, web components the html content template (<template>) element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using javascript.
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
this means that a web application using those apis can only request resources from the same origin the application was loaded from unless the response from other origins includes the right cors headers.
... web fonts (for cross-domain font usage in @font-face within css), so that servers can deploy truetype fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
... in this example, content originally loaded from http://foo.example makes a simple get request to a resource on http://bar.other which sets cookies.
...in the example above, the page is loaded from foo.example, but the cookie on line 20 is sent by bar.other, and would thus not be saved if the user has configured their browser to reject all third-party cookies.
Progressive web app structure - Progressive web apps (PWAs)
it's different with html, as the browser is actually streaming the data already and you can see when the elements are loaded and rendered on the website.
... to have the javascript "operational", however, it has to be downloaded in its entirety.
... the streams api allows developers to have direct access to data streaming from the server — if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever) — you can start right away.
...this is our content, loaded into the content section with javascript.
Structural overview of progressive web apps - Progressive web apps (PWAs)
it's different with html, as the browser is actually streaming the data already and you can see when the elements are loaded and rendered on the website.
... to have the javascript actually work, however, it has to be downloaded in its entirety.
...if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever).
... app.js: the main app javascript the file app.js is run when the app is first loaded; its job is primarily to initialize the app, though it c can do other things as well.
windows - Archive of obsolete content
this does not mean that the url content has loaded, only that the window itself is fully functional and its properties can be accessed.
...this does not mean that the content has loaded, only that the browser window itself is fully visible to the user.
...in particular, if the user quits the browser then it's possible that your add-on will be unloaded before all windows are closed.
dev/panel - Archive of obsolete content
optional onload function an event handler that will be called after the document in the panel is fully loaded.
...uggee; }, dispose: function() { this.debuggee = null; }, onready: function() { // in this function you can communicate // with the panel document } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged...
... communicating with the panel document the main add-on code can't directly access the panel document or any scripts loaded by the panel document.
Tutorials - Archive of obsolete content
listen for page load use the tabs module to get notified when new web pages are loaded, and access their content.
... modify web pages modify web pages based on url create filters for web pages based on their url: whenever a web page whose url matches the filter is loaded, execute a specified script in it.
... listen for load and unload get notifications when your add-on is loaded or unloaded by firefox, and pass arguments into your add-on from the command line.
Downloading JSON and JavaScript in extensions - Archive of obsolete content
once the content has been downloaded, the extension authors proceed to use eval() to decode the string content into javascript objects.
... downloading javascript of course there are times when javascript code modules are downloaded and injected into the extension.
...in this case, javascript sandboxing should be used to isolate the downloaded javascript from the rest of the extension, and host application.
Extension Versioning, Update and Compatibility - Archive of obsolete content
<!-- one targetapplication for each application the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be downloaded from --> <em:updatelink>https://www.mysite.com/foobar2.2.xpi</em:updatelink> <!-- a page describing what is new in this updated version --> <em:updateinfourl>http://www.mysite.com/updateinfo2.2.xhtml</em:updateinfourl> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> <rdf:l...
... update hashes in order to verify the integrity of the downloaded xpi you may provide an updatehash entry alongside the updatelink.
... <em:updatehash>sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6</em:updatehash> note: the value of updatehash, must start with the string of hashing algorithm, it is a common error to delete this prefix, when setting new value to updatehash:sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6 when a hash is specified the downloaded file is compared with the hash and an error shown if it does not match.
JavaScript Object Management - Archive of obsolete content
the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user.
... } // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs.
... module files can be imported to a chrome script or to other code modules with the following line: components.utils.import("resource://xulschoolhello/messagecount.js"); when using components.utils.import, code modules must be loaded using a file: or resource: url pointing to a file on the disk.
Security best practices in extensions - Archive of obsolete content
files loaded using the file protocol can access files on the user's disk and other local devices.
...they can be included in content, or downloaded at intervals.
...the usefulness of it and power of how it works is best illustrated by the popular greasemonkey extension, which works on the premise of scripts being downloaded and stored locally, to be injected into the web content context via the sandbox.
Visualizing an audio spectrum - Archive of obsolete content
the function handling the loadedmetadata event stores the metadata of the audio element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas.
... <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's there */ signal = new float32a...
...+ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); this.real = new float32array(buffersize); this.imag = new float32array(buffersize); this.reverset...
Structure of an installable bundle - Archive of obsolete content
instead, you need to use manifest flags, such as the os and abi flags, in your chrome manifest to specify components that should be loaded for specific platforms.
...the format of the platform string is: {os_target}_{target_xpcom_abi} all of the files which are loaded from the main extension directory are loaded from the subdirectory /platform/{platform string} if it exists.
...when default preferences are defined in several directories, the ones loaded later overwrite the earlier ones.
Download Manager preferences - Archive of obsolete content
a boolean value that indicates whether the anti virus software should try to clean a downloaded file when a virus is detected.
...on windows xp sp2 and windows vista, this value also indicates whether downloaded files trigger a security warning upon launch.
... preference description browser.download.dir a local folder the user may have selected for downloaded files to be saved.
Downloading Nightly or Trunk Builds - Archive of obsolete content
the same machines produce about every 24 hours a "nightly" build which can be downloaded by anyone if you know where to get it: these are the nightly builds, and testers all over the world download them and test them, reporting as they go along on any bugs that hit them.
... nightly builds can be downloaded from https://archive.mozilla.org/pub/firefox/nightly/.
... if you need to download builds often, most builds can be downloaded semi-automatically and saved with a convenient name using mozdownload.
JavaScript Client API - Archive of obsolete content
further, you agree (a) to maintain and link to (including on websites from which your third party client may be downloaded) a separate, conspicuous, and reasonably detailed privacy policy detailing how data collected or transmitted by your third party client is managed and protected; (b) that your third party client will only store data in encrypted form on the firefox sync servers operated by mozilla; (c) that you and your third party client will use the firefox sync apis solely for their intended purpose; (d) that ...
...records are transformed to wbo's, uploaded to a collection in a sync server and eventually downloaded by other sync clients.
...this is the method that the engine will call the first time it syncs, in order to get a complete inventory of what data there is that will need to be uploaded to the server.
jspage - Archive of obsolete content
s(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescro...
...b=this,c=0;while((b=b.previoussibling)){if(b.nodetype==1&&++c>a){return false;}}return(c==a);},even:function(b,a){return selectors.pseudo["nth-child"].call(this,"2n+1",a); },odd:function(b,a){return selectors.pseudo["nth-child"].call(this,"2n",a);},selected:function(){return this.selected;},enabled:function(){return(this.disabled===false); }});element.events.domready={onadd:function(a){if(browser.loaded){a.call(this);}}};(function(){var b=function(){if(browser.loaded){return;}browser.loaded=true; window.fireevent("domready");document.fireevent("domready");};window.addevent("load",b);if(browser.engine.trident){var a=document.createelement("div"); (function(){($try(function(){a.doscroll();return document.id(a).inject(document.body).set("html","temp").dispose();}))?b():arguments.callee.delay(50);})...
...(); }else{if(browser.engine.webkit&&browser.engine.version<525){(function(){(["loaded","complete"].contains(document.readystate))?b():arguments.callee.delay(50); })();}else{document.addevent("domcontentloaded",b);}}})();var json=new hash(this.json&&{stringify:json.stringify,parse:json.parse}).extend({$specialchars:{"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},$replacechars:function(a){return json.$specialchars[a]||"\\u00"+math.floor(a.charcodeat()/16).tostring(16)+(a.charcodeat()%16).tostring(16); },encode:function(b){switch($type(b)){case"string":return'"'+b.replace(/[\x00-\x1f\\"]/g,json.$replacechars)+'"';case"array":return"["+string(b.map(json.encode).clean())+"]"; case"object":case"hash":var a=[];hash.each(b,function(e,d){var c=json.encode(e);if(c){a.push(js...
Safely loading URIs - Archive of obsolete content
chrome: give the loaded page expanded privileges.
...all three methods take three arguments: the first argument identifies the source of the uri, the second argument is the uri that one plans to load, and the third argument is a set of flags that can be used to impose additional restrictions on the uris that may be loaded.
... differences between the methods the three methods differ from each other in how the source of the uri is identified and in what is known about the uri to be loaded.
Running Tamarin performance tests - Archive of obsolete content
also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar.
... also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
Using Breakpoints in Venkman - Archive of obsolete content
when a script is loaded that matches the url of a future breakpoint, and has executable code at the specified line, venkman will automatically set a future breakpoint.
...to debug an extension, uncheck "exclude browser files" on the debug menu and your installed extension files should appear in the loaded scripts list.) venkman also indicates that one or more breakpoints have been set in the loaded scripts view, where red dots appear next to the files in which breakpoints have been set, along with the line number where the function begins whose code is being stopped.
... to enable meta comments in a script, select "scan for meta comments" from the context menu of the file in the loaded scripts view.
XPJS Components Proposal - Archive of obsolete content
it will load that .js file (if not already loaded) and call the nsgetfactory function.
...javascript is garbage collected and one can not force an object to be deleted or the compiled code to be unloaded [except by deleting the jsruntime; i.e.
...in c if a module gets unloaded when there are still references to objects created by the module then a crash is likely to happen soon after.
Sorting and filtering a custom tree view - Archive of obsolete content
this is example code for sorting and filtering a custom tree view, that is, a tree whose values are loaded via javascript.
...for the sake of simplicity, strings are not localized and the data loaded is hard coded.
...l="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position.
Filtering - Archive of obsolete content
even though the same datasource is used, it will only be loaded once and both templates will be notified when the data has loaded.
...note that due to a bug with template generation in menulists when the datasource hasn't loaded yet, you may have to load the example twice to get it work.
...another workaround is to just rebuild the template once the data has been loaded.
Template Logging - Archive of obsolete content
however, for xml datasources, you can at least check the builder's datasource to see whether the xml data was loaded and parsed correctly.
... if null, then the datasource could not be loaded, or hasn't yet been loaded.
...for example: if (root.builder.datasource instanceof xmldocument) alert("xml datasource loaded ok"); be careful, as the datasource will only be set once the document has finished loading and has been parsed, so don't check this property too early.
Complete - Archive of obsolete content
to see the code, use a jar tool or zip tool to unpack the xpi file that you downloaded.
... when the xul file, allcustom.xul is loaded, the doctype declaration near the top loads a dtd from chrome://allcustom/locale/.
... when the xul file, allcustom.xul is loaded, the stylesheet declaration near the top loads a stylesheet from chrome://allcustom/skin/.
Document Object Model - Archive of obsolete content
when an xul file is loaded, the tags are parsed and converted into a hierarchical document structure of nodes, one for each tag and block of text.
... each xul file that is loaded will have its own document displayed in a window or frame.
...it is important to note, however, that the open() method returns before the window has fully loaded, so functions will not typically be available yet.
Using Remote XUL - Archive of obsolete content
xul is often used by desktop applications like mozilla but can also be loaded from a web server and rendered inside the content pane of a compatible browser.
... xul loaded and rendered in this way is called remote xul and can be used for basic functions like web site navigation as well as to build sophisticated web-based applications.
... [***aw: we should have a screenshot here of a xul document loaded in a content window***] this tutorial walks you through the process of building xul-based navigation for the mozilla.org web site.
tab - Archive of obsolete content
ArchiveMozillaXULtab
if the user has turned on the "don't load tabs until selected" preference, the pending attribute is set on tabs until they get loaded.
...the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
NPN_GetURL - Archive of obsolete content
not recommended; if target refers to the window or frame containing the instance, the instance is destroyed and the plug-in may be unloaded.
... if unsuccessful, the plug-in is not loaded and the function returns an error code.
...if the target parameter refers to the window or frame containing the current plug-in instance, the instance is destroyed and the plug-in may be unloaded.
NPN_SetValue - Archive of obsolete content
nppvpluginkeeplibraryinmemory specifies that the plugin does not want to be unloaded from memory after the page which initiated it has gone.
... normally, when the browser navigates away from the page containing the plugin, all plugin instances get an npp_destroy call, and if there are no more instances of the plugin active, the plugin calls its np_shutdown method and the plugin dll gets unloaded from memory.
...by default, the dll will be unloaded from memory preceded by an np_shutdown call.
NP_Initialize - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
... description the browser calls this function only once: when a plug-in is loaded, before the first instance is created.
...np_initialize tells the plug-in that the browser has loaded it and provides global initialization.
Audio for Web games - Game development
ading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://jplayer.org/">jplayer.org</a></p> </section> all of these tracks are the same tempo and are designed to be synchronized with each other, so we need to make sure they are loaded and available to the api before we are able to play them.
... const trackels = document.queryselectorall('li'); we want to make sure each file has loaded and been decoded into a buffer before we use it, so let's create an async function to allow us to do this: async function getfile(filepath) { const response = await fetch(filepath); const arraybuffer = await response.arraybuffer(); const audiobuffer = await audioctx.decodeaudiodata(arraybuffer); return audiobuffer; } we can then use the await operator when calling this function, which ...
... let's create another async function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when each file is loaded and buffered: async function loadfile(filepath) { const track = await getfile(filepath); return track; } let's also create a playtrack() function, which we can call once a file has been fetched.
Plug-in Development Overview - Gecko Plugin API Reference
but when the plug-in is loaded from a well-known directory, a different method must be used.
... in this case to ensure the plug-in file will be loaded, it should have a name in the form of "np*.dll".
...string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.
...then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is interactive, thus improving performance.
... code splitting is a feature supported by bundlers like webpack and browserify which can create multiple bundles that can be dynamically loaded at runtime.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
prefetching is when content is downloaded in the background, this is based on the assumption that the content will likely be requested, enabling the content to load instantly if and when the user requests it.
... the content is downloaded and cached for anticipated future use without the user making an explicit request for it.
...if the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded.
How to build custom form controls - Learn web development
the user is interacting with the content before the javascript has been fully downloaded, parsed, and executed.
... next, we bind these functions to the appropriate events: // we handle the event binding when the document is loaded.
...rol function getindex(select) { // we need to access the native control for the given custom control // in our example, that native control is a sibling of the custom control var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; with these two functions, we can bind the native controls to the custom ones: // we handle event binding when the document is loaded.
Sending forms through JavaScript - Learn web development
data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener( 'error', function(event) { alert( 'oops!
...data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener(' error', function( event ) { alert( 'oops!
...data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener( 'error', function( event ) { alert( 'oops!
UI pseudo-classes - Learn web development
now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.queryselectorall('.billi...
...both of these have the following html structure for the inputs: <p> <input type="radio" name="fruit" value="cherry" id="cherry"> <label for="cherry">cherry</label> <span></span> </p> for the :default example, we've added the checked attribute to the middle radio button input, so it will be selected by default when loaded.
... we then style this with the following css: input ~ span { position: relative; } input:default ~ span::after { font-size: 0.7rem; position: absolute; content: "default"; color: white; background-color: black; padding: 5px 10px; right: -65px; top: -3px; } this provides a little "default" label on the one the was originally selected when the page loaded.
Creating hyperlinks - Learn web development
for example, if an index.html page is uploaded to a directory called projects that sits inside the root of a web server, and the web site's domain is http://www.example.com, the page would be available at http://www.example.com/projects/index.html (or even just http://www.example.com/projects/, as most web servers just look for a landing page such as index.html to load if it isn't specified in the url.) an absolute url will always point to t...
... linking to non-html resources — leave clear signposts when linking to a resource that will be downloaded (like a pdf or word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a flash movie), you should add clear wording to reduce any confusion.
...eport.pdf"> download the sales report (pdf, 10mb) </a></p> <p><a href="http://www.example.com/video-stream/" target="_blank"> watch the video (stream opens in separate tab, hd quality) </a></p> <p><a href="http://www.example.com/car-game"> play the car game (requires flash) </a></p> use the download attribute when linking to a download when you are linking to a resource that's to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename.
Graceful asynchronous programming with Promises - Learn web development
we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available transform it into a blob object that we can do something with.
...instead, what we want is the loaded data.
...= document.createelement('img'); let image2 = document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2; document.body.appendchild(image1); document.body.appendchild(image2); // display the text in a paragraph let para = document.createelement('p'); para.textcontent = desctext; document.body.appendchild(para); save and refresh and you should see your ui components all loaded, albeit in a not particularly attractive way!
Measuring performance - Learn web development
at the time of writing, mdn's performance report summary looks similar to the following: a performance report contains information about things like how long a user has to wait before anything is displayed on the page, how many bytes need to be downloaded to display a page, and much more.
... network tools most browsers have tools available that you can use to run against loaded pages and determine how they are performing.
... for example, the firefox network monitor returns detailed information on all the assets downloaded form the network, along with a time graph that shows how long each one took to download.
Perceived performance - Learn web development
for example, because page render is blocked by loading and parsing css and javascript, minimizing the amount of css and js that needs to be loaded on initially will have a major impact on improving perceived performance.
... to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first.
... conclusion by turning as much of the download, render and wait time into active phases and reducing any passive waiting, even if the objective measurements stay the same, the user will feel like the content downloaded, rendered, and responded more quickly.
A bird's-eye view of the Mozilla framework
when an html, xml, svg or other type of document is loaded, the nglayout engine (also known as gecko) parses the contents into a dom tree, and handles the layout and rendering of the document pages.
...once loaded, a module or package has full access to the xpcom objects of all the other modules in the runtime environment.
... xpcom in summary to summarize, the xpcom object model specifies the structure of xpcom components, builds a central registry based on the xpcom components loaded at startup, generates xpcom component instances on demand using the registry, which specifies the supported interfaces, their corresponding implementation objects, and the nsifactory interface, provides api facilities clients can use to dynamically create xpcom components, and specifies the mechanism clients use to query an xpcom component for one of its interfaces, and to release the interfac...
Chrome registration
note: scripts (including those found in xbl) loaded from skin packages will not execute.
... contentaccessible chrome resources can no longer be referenced from within <img>, <script>, or other elements contained in, or added to, content that was loaded from an untrusted source.
...this can allow you to register different components for the same contract id or ensure a component can only be loaded in the main process.
Obsolete Build Caveats and Tips
to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
... to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1.
... to get this code, do the following: # pull the mozilla source to the folder 191src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.1/ 191src cd 191src note: starting with gecko 5.0, you can actually build firefox without a .mozconfig file.
mach
these are the python files that implement mach commands and are loaded by the mach driver.
...when these modules are loaded, mach looks for specific signatures to detect mach commands.
... because mach command modules are loaded at mach start-up, it is important that they be lean and not have a high import cost.
Experimental features in Firefox
nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using http rather than https).
...the intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure.
... if the upgrade fails (because the media's host doesn't support https), the media is not loaded.
Limitations of chrome scripts
the fix is generally some variant of "do that in a frame script loaded into the content process".
... nsiaboutmodule by default, custom about: pages registered using nsiaboutmodule are loaded in the chrome process.
...in multiprocess firefox, a jsm loaded into one process does not share any state with the same jsm loaded into a different process: so you can't use a jsm to share state between the chrome and content processes.
Limitations of frame scripts
nsiaboutmodule by default, custom about: pages registered using nsiaboutmodule are loaded in the chrome process.
...by default, about: pages (except for a small whitelist) are loaded in the chrome process when browsed to from the awesomebar.
... javascript code modules (jsms) in multiprocess firefox, a jsm loaded into the content process does not share any state with the same jsm loaded into the chrome process.
Message manager overview
amescriptloader nsimessagelistenermanager nsimessagebroadcaster you can access the global message manager like this: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); window message manager the window message manager is associated with a specific browser window, and operates on every <browser> (that is, every content tab) loaded into that window: loadframescript() loads the given script into every <browser> in that browser window broadcastasyncmessage() sends the message to every <browser> in that browser window.
... you can mix and match: so for example, you could load a script into every <browser> using the global message manager, but then send a message to the script instance loaded into a specific <browser> using the browser message manager.
...since javascript modules are singletons they will only be executed once per process even when they are loaded in multiple frame scripts.
HTMLIFrameElement.download()
parameters url the url of the file to be downloaded.
...the available options are: filename: the filename to save the downloaded file as.
... referrer: specifies a referrer for the downloaded file.
mozbrowserloadend
can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example.
...in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience.
... when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).
mozbrowsersecuritychange
this may mean that the request is being loaded as part of a page in which some content was received over an insecure channel.
...possible values are: loaded_tracking_content: indicates that the tracking content has been loaded.
...possible values are: loaded_mixed_active_content: indicates that the mixed active content has been loaded.
Browser API
htmliframeelement.getstructureddata() retrieves any structured microdata (and hcard and hcalendar microformat data) contained in the html loaded in the browser <iframe> and returns it as json.
... htmliframeelement.executescript() allows a specified script to be executed against a page loaded in the browser <iframe>.
... htmliframeelement.getmanifest() retrieves the manifest of an app loaded in the browser <iframe> and returns it as json.
How Mozilla determines MIME Types
this means that every time an uri is loaded, mozilla must find out its mime type.
... also, for images loaded via <img src>, mozilla's image library will do content sniffing (never extension sniffing) to find out the real type of the image.
... if that also failed, the list of loaded plugins is checked for a plugin that can handle this extension, and is asked for the mime type if no plugin is registered, the ext-to-type-mapping xpcom category is searched for the extension.
NSS tools : modutil
installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module.
...nss internal pkcs #11 module slots: 2 slots attached status: loaded slot: nss internal cryptographic services token: nss generic crypto services slot: nss user private key and certificate services token: nss certificate db ----------------------------------------------------------- passing a specific module name with the -list returns details information about the module itself, like supported cipher mechanisms, version numbers, serial numbers, and other ...
...information about the module and the token it is loaded on.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module.
...nss internal pkcs #11 module slots: 2 slots attached status: loaded slot: nss internal cryptographic services token: nss generic crypto services slot: nss user private key and certificate services token: nss certificate db ----------------------------------------------------------- passing a specific module name with the -list returns details information about the module itself, like supported cipher mechanisms, ver...
...sion numbers, serial numbers, and other information about the module and the token it is loaded on.
Receiving startup notifications
the startup process during application startup, the application's manifest is used to get a list of the components it needs to register, and those components are loaded.
... this gets enough of xpcom and the application loaded and running that the extension manager can then be loaded and handle installing, uninstalling, and updating any installed extensions.
... once that process is completed, extensions can then be loaded by simply reading their manifests, loading their components, and continuing with application startup, all without having to restart the browser.
imgIDecoderObserver
load notifications are fired as the image is loaded from the network or filesystem.
...if imgidecoder::flag_sync_decode is passed to a function that triggers a decode, all notifications that can be generated from the currently loaded data fire before the call returns.
... onstartcontainer() this load notification is called once enough data has been loaded from the network that we were able to parse the width and height from the image.
nsIDOMChromeWindow
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script.
...notifydefaultbuttonloaded() when a document has been loaded, the document can notify the default button of the document to the window by using this method.
...void notifydefaultbuttonloaded( in nsidomelement defaultbutton ); parameters defaultbutton the default button element of the window.
nsIDOMOfflineResourceList
ondownloading nsidomeventlistener an event listener to be called when resources are being downloaded into the cache.
... downloading 3 resources are being downloaded to be added to the cache.
...this means already loaded resources should only update after a page refresh.
nsIDownload
download objects are used by the download manager (see nsidownloadmanager to manage files that are queued to download, being downloaded, and finished being downloaded.) inherits from: nsitransfer last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) note: once the download is completed, the download manager stops updating the nsidownload object.
... attributes attribute type description amounttransferred long long the number of bytes downloaded so far.
... targetfile nsilocalfile indicates the location at which the downloaded file will be (or is, if the download is complete) stored.
nsINavHistoryService
transition_embed 4 this transition type is set when some inner content is loaded.
... transition_framed_link 8 this transition type is set when the user followed a link that loaded a page in a frame.
...if this uri is loaded soon after this message has been received, that transition will be marked as following a bookmark.
nsIProtocolHandler
uri_inherits_security_context 1<<4 uris for this protocol have no inherent security context, so documents loaded using this protocol should inherit the security context of the document that loads them.
... uri_dangerous_to_load 1<<7 uris using this protocol are unsafe if loaded by untrusted web content and may only be loaded by privileged code (for example, code that has the system principal).
... uri_loadable_by_subsumers 1<<14 the uris for this protocol can be loaded only by callers with a principal that subsumes this uri.
nsIWebBrowserPersist
persist_flags_append_to_file 32768 append the downloaded data to the target file.
...some implementations of this interface may also support nsnull to imply the currently loaded document.
...some implementations of this interface may also support nsnull to imply the currently loaded uri.
Events
msgcreatedbview onactivecreatedview onactivemessagesloaded the active messages in the folder have been loaded oncreatedview a folder view has been created, but not yet shown.
... ondisplayingfolder a folder gets displayed onfolderloading a folder is being loaded onleavingfolder a folder is being unloaded, 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 l...
...ist have been removed onsearching a folder view derived from a search is being loaded, e.g.
Mail event system
ed notifyitempropertychanged onitempropertychanged notifyitemintpropertychanged onitemintpropertychanged notifyitemboolpropertychanged onitemboolpropertychanged notifyitemunicharpropertychanged onitemunicharpropertychanged notifyitempropertyflagchanged onitempropertyflagchanged notifyitemevent onitemevent notifyfolderloaded onfolderloaded notifydeleteormovemessages ondeleteormovemessages sample code in this example, a listener will be set up to be notified when the message count changes in a folder: // our variable to know if the listener fired var listenerhasfired = false; var totalmessageslistenerhasfired = false; // the listening function that will react to changes function myonintproper...
...itempropertychanged: function(parent, item, viewstring) {}, onitemintpropertychanged: myonintpropertychanged, onitemboolpropertychanged: function(item, property, oldvalue, newvalue) {}, onitemunicharpropertychanged: function(item, property, oldvalue, newvalue) {}, onitempropertyflagchanged: function(item, property, oldflag, newflag) {}, onitemevent: function(item, event) = {}, onfolderloaded: function(afolder) = {} ondeleteormovemessagescompleted: function( afolder) = {}, } // now register myself as a listener on every mail folder var mailsession = components.classes["component://netscape/messenger/services/session"].
... future plans the notification system has two duplicate methods which could be implemented with onitemevent/notifyitemevent: folderloaded , and deleteormovemessagescompleted .
Using the Mozilla symbol server
to use only the mozilla symbol server, add the following entry to your symbol path (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command.
... if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows.
... the command should look like this (again, you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): c:\program files\mozilla firefox>c:\progra~1\debugg~1\symchk.exe /r c:\progra~1\mozill~1\* /s srv*c:\symcache\*https://symbols.mozilla.org/ note the \* after the mozilla directory.
Working with windows in chrome code
note however, that the open() call returns before the window is fully loaded, so some calls, like win.document.getelementbyid() will fail.
... accessing content documents assume you have a document loaded in a <tabbrowser>, <browser>, or <iframe> element inside your document.
... accessing the elements of the top-level document from a child window the opposite case is when you want to access the chrome document from a privileged script loaded in a <browser> or an <iframe>.
Using js-ctypes
might load the system user32 library like this: var lib = ctypes.open("user32.dll"); on mac os x, you can load the core foundation library from the core foundation framework like this: var corefoundation = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); the returned object is a library object that you use to declare functions and data types for use with the loaded library.
...e("messageboxw", ctypes.winapi_abi, ctypes.int32_t, ctypes.int32_t, ctypes.jschar.ptr, ctypes.jschar.ptr, ctypes.int32_t); var mb_ok = 0; var ret = msgbox(0, "hello world", "title", mb_ok); lib.close(); in line 3, the user32.dll system library is loaded.
... in line 9, the carbon library is loaded from the system's carbon framework.
Plug-in Development Overview - Plugins
but when the plug-in is loaded from a well-known directory, a different method must be used.
... in this case to ensure the plug-in file will be loaded, it should have a name in the form of "np*.dll".
...string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
URLs - Plugins
if target refers to the window or frame containing the plug-in instance, it is destroyed and the plug-in may be unloaded.
...if this target refers to the window or frame containing the instance, the instance is destroyed and the plug-in may be unloaded.
...if the target refers to the window or frame containing the instance or one of its parents/ancestors, the instance is destroyed and the plug-in may be unloaded.
Plugins
roadmap highlights since firefox 52, plugins other than flash are not loaded by firefox.
... also from firefox 55 onwards, flash and other plugins can no longer be loaded from any url scheme except for http:// and https:// (bug 1335475).
... see also flash can now be loaded only from http/https for more useful information.
DOM Inspector FAQ - Firefox Developer Tools
inspect content document inspect content, e.g., unprivileged web pages loaded in a browser tab.
...this causes the document to be loaded in the browser pane.
... these can include chrome documents, but it's not suggested that you inspect xul documents by directly inspecting them via url, since some behavior may rely on the document being contained in another xul document, or the converse, where it won't behave correctly because it doesn't expect to be loaded as a framed document.
UI Tour - Firefox Developer Tools
three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
... source pane this shows the javascript file currently loaded.
... source maps: enabled by default, this option directs the debugger to load the original versions of files, and map them to the generated ones loaded in a page, to ease debugging of translformed sources.
about:debugging (before Firefox 68) - Firefox Developer Tools
before firefox 48 if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
... if you change files that stay loaded the whole time, like background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.
... firefox 48 onwards from firefox 48 onwards: as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
Using images - Web APIs
so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever.
...as we will see later the drawimage() method is overloaded and has several variants.
...when the page is loaded, a <canvas> element is inserted for each image and a frame is drawn around it.
Document.write() - Web APIs
WebAPIDocumentwrite
note: because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.
... writing to a document that has already loaded without calling document.open() will automatically call document.open().
... note: using document.write() in deferred or asynchronous scripts will be ignored and you'll get a message like "a call to document.write() from an asynchronously-loaded external script was ignored" in the error console.
EventTarget.addEventListener() - Web APIs
the code supports the use of handleevent() and also the domcontentloaded event.
...ners=[]; var addeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var self=this; var wrapper=function(e) { e.target=e.srcelement; e.currenttarget=self; if (typeof listener.handleevent != 'undefined') { listener.handleevent(e); } else { listener.call(self,e); } }; if (type=="domcontentloaded") { var wrapper2=function(e) { if (document.readystate=="complete") { wrapper(e); } }; document.attachevent("onreadystatechange",wrapper2); eventlisteners.push({object:this,type:type,listener:listener,wrapper:wrapper2}); if (document.readystate=="complete") { var e=new event(); e.srcelement=window; ...
...pe,listener:listener,wrapper:wrapper}); } }; var removeeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var counter=0; while (counter<eventlisteners.length) { var eventlistener=eventlisteners[counter]; if (eventlistener.object==this && eventlistener.type==type && eventlistener.listener==listener) { if (type=="domcontentloaded") { this.detachevent("onreadystatechange",eventlistener.wrapper); } else { this.detachevent("on"+type,eventlistener.wrapper); } eventlisteners.splice(counter, 1); break; } ++counter; } }; element.prototype.addeventlistener=addeventlistener; element.prototype.removeeventlistener=removeeventlistener; ...
FontFaceSet.load() - Web APIs
WebAPIFontFaceSetload
the load() method of the fontfaceset forces all the fonts given in parameters to be loaded.
... syntax result = afontfaceset.load(font); result = afontfaceset.load(font, text); returns a promise of an array of fontface loaded.
... the promise is fulfilled when all the fonts are loaded; it is rejected if one of the fonts failed to load.
HTMLImageElement - Web APIs
htmlimageelement.alt a domstring that reflects the alt html attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded.
... htmlimageelement.currentsrc read only returns a usvstring representing the url from which the currently displayed image was loaded.
... the specified image is corrupted in some way that prevents it from being loaded.
HTMLMediaElement.readyState - Web APIs
examples this example will listen for audio data to be loaded for the element `example`.
... it will then check if at least the current playback position has been loaded.
... <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
History - Web APIs
WebAPIHistory
the history interface allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.
... length read only returns an integer representing the number of elements in the session history, including the currently loaded page.
... for example, for a page loaded in a new tab this property returns 1.
LargestContentfulPaint - Web APIs
may not be available if the element is a cross-origin image loaded without the timing-allow-origin header.
... largestcontentfulpaint.loadtime the time the element was loaded.
...(note: `rendertime` may not be available on // image elements loaded cross-origin without the `timing-allow-origin` header.) lcp = lastentry.rendertime || lastentry.loadtime; }); po.observe({type: 'largest-contentful-paint', buffered: true}); // send data to the server.
Storage Access API - Web APIs
these restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.
... the semantics around third-party cookie blocking policies in particular differ from browser to browser, but the core functionality is similar: cross-origin resources embedded in a third-party context are not given access to the same cookies and site storage that they would have access to when loaded in a first-party context.
...as a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.
VideoPlaybackQuality.totalVideoFrames - Web APIs
the videoplaybackquality interface's totalvideoframes read-only property returns the total number of video frames that have been displayed or dropped since the media was loaded.
... syntax value = videoplaybackquality.totalvideoframes; value the total number of frames that the <video> element has displayed or dropped since the media was loaded into it.
... this value is reset when the media is reloaded or replaced.
Window: popstate event - Web APIs
it happens after the new location has loaded (if needed), displayed, made visible, and so on, after the pageshow event is sent, but before the persisted user state information is restored and the hashchange event is sent.
...this will eventually send events such as domcontentloaded and load to the window containing the document, but the steps below will continue to execute in the meantime.
... if new-entry's document is already fully loaded and ready—that is, its readystate is complete—and the document is not already visible, it's made visible and the pageshow event is fired at the document with the pagetransitionevent's persisted attribute set to true.
Using XMLHttpRequest - Web APIs
// progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ...
... the progress event handler, specified by the updateprogress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields.
...note also that, although in this example there are some file <input> fields, when you submit a form through the formdata api you do not need to use the filereader api also: files are automatically loaded and uploaded.
@font-face - CSS: Cascading Style Sheets
the @font-face css at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
... syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
...otherwise, the font resource specified using the url() function is downloaded and used.
Variable fonts guide - CSS: Cascading Style Sheets
this results in more http requests, and more data being downloaded (usually around 20k or more per file).
...the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately.
... the basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like font-weight and font-stretch can be supplied, rather than named according to the font file being loaded.
Audio and Video Delivery - Developer guides
"3gp_src" src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'> </source> <source id="ogg_src" src="video.ogv" type='video/ogv; codecs="theora, vorbis"'> </source> </video> since firefox doesn't support mp4 and 3gp on some platforms due to their patent-encumbered nature, the <source> elements with the ids "mp4_src" and "3gp_src" will receive error events before the ogg resource is loaded.
...audio editor and recorder miro — free, open-source music and video player handbrake — open source video transcoder firefogg — video and audio encoding for firefox ffmpeg2 — comprehensive command line encoder libav — comprehensive command line encoder vid.ly — video player,transcoding and delivery internet archive — free transcoding and storage detecting when no sources have loaded to detect that all child <source> elements have failed to load, check the value of the media element's networkstate attribute.
... media buffering, seeking, and time ranges sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
... the image is corrupted in some way that prevents it from being loaded.
... <a href="https://developer.mozilla.org"> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="visit the mdn site"> </a> using the srcset attribute in this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices.
HTTP caching - HTTP
WebHTTPCaching
a browser cache holds all documents downloaded via http by the user.
...a request is sent to the server and a full response is downloaded each and every time.
...there is an option to force a validation each time a document is loaded.
Web audio codec guide - Web media technologies
this is necessary because the rate at which the music is downloaded needs to be no greater than the amount of bandwidth available on the network, and ideally there should be room left for network speed fluctuations and use of the network by other applications.
... example: music for download music being downloaded by the user can be compressed to a larger overall file size than streamed music, since (unlike when streaming) it doesn't matter if the download speed is slower than the playback speed of the media.
...if you need to choose just one format, select one that makes sense given your requirements and the type of audio content being downloaded.
Populating the page: how browsers work - Web Performance
it will retrieve resources in the background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded.
... in our example, maybe the image loaded quickly, but perhaps the anotherscript.js file was 2mb and our user's network connection was slow.
... in this case the user would see the page super quickly, but wouldn't be able to scroll without jank until the script was downloaded, parsed and executed.
Lazy loading - Web Performance
a practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (js, css, images...) are downloaded only when the user navigates to that cart page.
...the rest can be loaded on demand.
... <img src="image.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> the load event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded.
Privacy, permissions, and information security
security security is about the active protection of data or a system against being accessed, downloaded, or operated by people or organizations that don't have permission to do so.
...tificates content security policy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of m...
... <--- allow attribute, feature policy, and permissions api stuff ---> a specific user experience issue that often arises is a document that's loaded with permission to access a resource and the document contains an <iframe> with the allow attribute to delegate that permission to the contents of the frame.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
for files loaded over the network via http, it requires and uses the value assigned to the content-type http header.
... for files loaded locally, it first looks in a cache of filename extension to media type mappings (stored in a mozilla profile file called mimetypes.rdf), and if it doesn't find a media type there, it asks the operating system.
...problems in the way mozilla obtains the media type for files loaded locally can occur in two ways.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
the javascript loads the .xsl file only on the first sort and sets the xslloaded variable to true once it has finished loading the file.
...since the xml data loaded only contains the raw information without any presentation data, it can load quickly even on dialup.
...the stylesheet has to be passed in as an xml document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet().
Working with Events - Archive of obsolete content
for example, the following add-on registers a listener with the tabs module to listen for the ready event, and logs a string to the console reporting the event: var tabs = require("sdk/tabs"); tabs.on("ready", function () { console.log("tab loaded"); }); it is not possible to enumerate the set of listeners for a given event.
...ner("ready", listener1); } function listener2() { console.log("listener 2"); } tabs.on("ready", listener1); tabs.on("ready", listener2); tabs.open("https://www.mozilla.org"); tabs.open("https://www.mozilla.org"); we should see output like this: info: tabevents: listener 1 info: tabevents: listener 2 info: tabevents: listener 2 listeners will be removed automatically when the add-on is unloaded.
private-browsing - Archive of obsolete content
for example, here's an add-on that stores the titles of tabs the user loads, and uses isprivate() to exclude the titles of tabs that were loaded into private windows: var simplestorage = require("simple-storage"); if (!simplestorage.storage.titles) simplestorage.storage.titles = []; require("tabs").on("ready", function(tab) { if (!require("sdk/private-browsing").isprivate(tab)) { console.log("storing..."); simplestorage.storage.titles.push(tab.title); } else { console.log("not storing, private data"); } }); here'...
...s an add-on that uses a page-mod to log the content of pages loaded by the user, unless the page is private.
frame/utils - Archive of obsolete content
parameters document : nsidomdocument options : object optional options: name type type string string that defines access type of the document loaded into it.
...for more details and other possible values see documentation on mdn uri string uri of the document to be loaded into the new frame.
ui/toolbar - Archive of obsolete content
toolbar events toolbars get attach and detach events when their content is loaded and unloaded, and show and hide events when the uses shows or hides them.
... events attach this event is emitted when the toolbar is first loaded.
Low-Level APIs - Archive of obsolete content
remote/child enables an sdk module loaded into a child process to access web content in the child process and communicate with modules in the main process.
... system/unload register callbacks that are called when a module is unloaded.
Displaying annotations - Archive of obsolete content
when a page is loaded the matcher searches the dom for elements that match annotations.
...sage(simplestorage.storage.annotations); } worker.port.on('show', function(data) { annotation.content = data; annotation.show(); }); worker.port.on('hide', function() { annotation.content = null; annotation.hide(); }); worker.on('detach', function () { detachworker(this, matchers); }); matchers.push(worker); } }); when a new page is loaded the function assigned to onattach is called.
Getting Started (jpm) - Archive of obsolete content
click the icon, and a new tab will open with http://www.mozilla.org/ loaded into it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute...
Getting started (cfx) - Archive of obsolete content
click the icon, and a new tab will open with https://www.mozilla.org/ loaded into it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute...
Canvas code snippets - Archive of obsolete content
once the remote page has loaded, the remotepageloaded method fires.
...add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotepageloaded, true); //append to the end of the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the window object you need for the canvas // drawwindow method var remotewindow = ldrframe.contentwindow; ...
Miscellaneous - Archive of obsolete content
see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
...am.readbytearray(stream.available()); var poststr = string.fromcharcode.apply(null, postbytes); //do anything to your poststr alert(poststr); getting a string from the input stream is made somewhat simpler in firefox 4, by the addition of netutil.readinputstreamtostring() getting postdata of a request before the request is sent the above code will get the postdata for a page that has already loaded.
View Source for XUL Applications - Archive of obsolete content
linenumber (optional) the line number to focus on once the source has loaded.
... alinenumber (optional) the line number to focus on once the source has loaded.
Displaying web content in an extension without security issues - Archive of obsolete content
however, if the document is loaded into <iframe type="content"> or <browser type="content">, it will be considered a content document, and so will be all the frames it loads (the "type" attribute is ignored at that point).
...t with an empty document, you would rather want to load some template into the frame: var request = new xmlhttprequest(); request.open("get", "chrome://foo/content/template.html", false); request.send(null); frame.setattribute("src", "data:text/html," + encodeuricomponent(request.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame.
Enhanced Extension Installation - Archive of obsolete content
user action requested notifications are now sent with the em-action-requested topic through the observer service: item-installed an item has just been downloaded and configured for installation for the first time.
... item-upgraded a new version of an installed item has been downloaded and configured for installation.
Extension Packaging - Archive of obsolete content
extensions are packaged in a form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
...instead, the xpi itself is placed in the extensions directory, and files are loaded directly out of the package.
Extension Etiquette - Archive of obsolete content
global variables, such as top-level declarations on scripts loaded into shared windows or web pages.
...scripts can be loaded into their own globals, such as commonjs modules, javascript modules, or sandboxes, to avoid most global variable and prototype conflicts.
Install Manifests - Archive of obsolete content
examples <em:translator>janez novak</em:translator> <em:translator>kari nordmann</em:translator> unpack a true or false value that tells the application whether the extension requires its files be unpacked into a directory in order to work or whether the extension can be loaded direct from the xpi.
...if an extension includes the following then it must request unpacking: binary xpcom components plugins search plugins dlls loaded with ctypes dictionaries window icons examples <description about="urn:mozilla:install-manifest"> <em:id>extension@mysite.com</em:id> <em:unpack>true</em:unpack> ...
Installing Extensions and Themes From Web Pages - Archive of obsolete content
this is used to verify the downloaded file, to protect against a corrupted file being served by a mirror download server, for example.
...furthermore, calling updateenabled may lead to problems if your distribution site is not in the user's whitelist, because firefox only displays the "installation blocked" message when install or installchrome are called, or when a xpi file is loaded.
Adding Events and Commands - Archive of obsolete content
the most commonly used event is the onload event, which is used in overlays and other windows to detect when the window has loaded and then run initialization code: // rest of overlay code goes here.
...it isn't hard for xul code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension xul code to receive information from pages in a secure manner.
Appendix F: Monitoring DOM changes - Archive of obsolete content
often times, this must be used in combination with a slight delay, or even polling, via settimeout, for cases where the url change happens before the page is fully loaded.
...while it is no longer possible for web sites to use xbl directly, chrome code can still attach xbl bindings to web content from stylesheets loaded via the stylesheet service.
Setting Up a Development Environment - Archive of obsolete content
to debug extension and browser code, right-click on the loaded scripts panel and uncheck exclude browser files.
... the list of loaded scripts will grow long to include all of the scripts in firefox.
Session store API - Archive of obsolete content
if you want to set permissions or otherwise manipulate a restored tab before the page is loaded into it, you should watch sstabrestoring.
... if you want to do something after the page is loaded, you should watch sstabrestored.
Signing an XPI - Archive of obsolete content
the csr will be uploaded to the issuer.
...i downloaded the certum root ca and certum level iii ca digital id for web and ssl/tls servers, copied the text and saved them to the files c:\projects\codesigning\certum root ca.cer and c:\projects\codesigning\certum level iii ca.cer.
Promises - Archive of obsolete content
the constructor returns a promise which resolves when the file’s contents have been loaded.
... the contents of the file will be initially loaded into the json store’s data property.
Using Dependent Libraries In Extension Components - Archive of obsolete content
dependant libraries on the mac must be loaded with a special system function nsaddimage() with the flag nsaddimage_option_match_filename_by_installname.
... when the process terminates, the library // will be properly unloaded.
Add-ons - Archive of obsolete content
extension packaging extensions are packaged in a form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
...some of that will have to be replaced and the rest will need to be loaded differently.
Adding preferences to an extension - Archive of obsolete content
startup() the stockwatcher.startup() function is called when our extension is first loaded.
... installing the event listeners the only thing left to do is to install the event listeners needed to run the startup() and shutdown() routines automatically when the browser window is loaded and unloaded.
Localizing an extension - Archive of obsolete content
we do this by creating a string bundle, using the following code: <stringbundleset id="stringbundleset"> <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockwatcher2.properties"/> </stringbundleset> this establishes a new string bundle, referenced by the id "string-bundle", whose keys and values are to be loaded from the stockwatcher2.properties file we've already created.
...this involves rewriting the refreshinformation() function to load the strings, and its enclosed inforeceived() function to use the loaded, localized, strings instead of string literals.
Same-origin policy for file: URIs - Archive of obsolete content
directories cannot be loaded this way, however.
...for cross-window dom access, each file is treated as a separate origin, with one exception: if a file is loaded from another file that would otherwise be able to load it following this same-origin policy, they are considered to have the same origin.
Simple Storage - Archive of obsolete content
the object can also be forced to reload its data from disk by calling jetpack.storage.simple.open(), although the data comes loaded automatically.
...open()as described above, the jetpack.storage.simple object is automatically populated when a feature is loaded, but a feature may force the object to read from disk by calling jetpack.storage.simple.open().
Tabs - Archive of obsolete content
ArchiveMozillaJetpackUITabs
cusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
...cusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
Simple Storage - Archive of obsolete content
the object can also be forced to reload its data from disk by calling jetpack.storage.simple.open(), although the data comes loaded automatically.
...open()as described above, the jetpack.storage.simple object is automatically populated when a feature is loaded, but a feature may force the object to read from disk by calling jetpack.storage.simple.open().
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
synchronous request: var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "data.xml", false); myxmlhttprequest.send(null); var myxmldocument = myxmlhttprequest.responsexml; asynchronous request: var myxmlhttprequest; function xmlloaded() { var myxmldocument = myxmlhttprequest.responsexml; } function loadxml(){ myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "data.xml", true); myxmlhttprequest.onload = xmlloaded; myxmlhttprequest.send(null); } table 7 features a list of available methods and properties for mozilla's xmlhttprequest.
... 2 loaded - send() has been called, headers and status are available.
Scripting - Archive of obsolete content
this file will be loaded into the prism chrome window very much like a firefox extension is loaded into the browser chrome window.
...since the web application has not yet loaded, the window object is still undefined.
Same origin policy for XBL - Archive of obsolete content
when mozilla needs to decide whether or not xbl is allowed to be loaded, it looks at the nsiprincipal originating the load and the nsiuri to be loaded.
... determining the originating principal the principal originating the load is determined using the following steps: for external stylesheets (<link>, <?xml-stylesheet?>, user sheets, and ua sheets), it depends on where the sheet is loaded from, just like it would for an html document loaded from a similar source.
The Download Manager schema - Archive of obsolete content
currbytes integer the current number of bytes that have been downloaded.
... maxbytes integer the total number of bytes that need to be downloaded.
validate - Archive of obsolete content
the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
Introduction to XUL - Archive of obsolete content
preamble mozilla has configurable, downloadable chrome, meaning that the arrangement and even presence or absence of controls in the main window is not hardwired into the application, but loaded from a separate ui description.
...widgets will generally live grouped in separate, dynamically loaded libraries.
loadURIWithFlags - Archive of obsolete content
in addition to the flags allowed for the reloadwithflags method, the following flags are also valid: load_flags_is_refresh: this flag is used when the url is loaded because of a meta tag refresh or redirect.
... load_flags_is_link: this flag is used when the url is loaded because a user clicked on a link.
reloadWithFlags - Archive of obsolete content
the document is loaded normally.
... load_flags_charset_change: this flag is used if the document needs to be reloaded because the character set changed.
RDF Modifications - Archive of obsolete content
the second situation when notifications are made is when a datasource is being loaded or reloaded.
...if the reloaded datasource hasn't changed, the builder won't receive any notifications.
Adding Methods to XBL-defined Elements - Archive of obsolete content
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open().
...the order that they are called in should not be relied upon, as they are loaded from various files.
Creating an Installer - Archive of obsolete content
a simple script can be used to have the package downloaded and installed.
... if the user chooses to continue, the installer xpi file is downloaded.
Features of a Window - Archive of obsolete content
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() function to open the second window.
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() next, we'll look at how to open secondary dialogs.
The Implementation of the Application Object Model - Archive of obsolete content
the downloaded file contains an aol instant messenger button, and the user really doesn't want that on the toolbar.
...when the remote file is subsequently downloaded, these local annotations are sucked in and superimposed on top of the structure described by the file.
image - Archive of obsolete content
ArchiveMozillaXULimage
the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
menuitem - Archive of obsolete content
the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
toolbarbutton - Archive of obsolete content
the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
Using LDAP XPCOM with XULRunner - Archive of obsolete content
actually, the ldap interfaces are available (for exemple, components.interfaces.nsildapconnection is not null), but the components can't be loaded (for example, components.classes["@mozilla.org/network/ldap-connection;1"] is null).
...the solution is to use the bsmedberg stub, described in using dependent libraries in extension components: the component library is just a loader of the real library and all its dependencies, so as all the needed libraries are loaded.
Archived Mozilla and build documentation - Archive of obsolete content
generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.
...the xul can be loaded from and saved to files.
NPN_PostURL - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
... if you specify _current, _self, or _top, the response data is written to the same plug-in window and the plug-in is unloaded.
NP_Shutdown - Archive of obsolete content
note: if enough memory is available, the browser can keep the plug-in library loaded if it expects to create more instances in the near future.
... the browser calls np_shutdown only when the library is finally unloaded.
Table Reflow Internals - Archive of obsolete content
the initial chunk of an xml doc is loaded.
... the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded.
Building a Theme - Archive of obsolete content
css, xul, and other files are part of "chrome packages" - bundles of user interface components which are loaded via chrome:// uris.
... note: your theme will be passed faster and downloaded more if you have a good description and some screenshots of the theme in action.
GetObject - Archive of obsolete content
for example: myobject.line(9, 90); myobject.inserttext(9, 100, "hello, world."); myobject.saveas("c:\\drawings\\sample.drw"); note: use the getobject function when there is a current instance of the object, or if you want to create the object with a file already loaded.
... if there is no current instance, and you don't want the object started with a file loaded, use the activexobject object.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
it is assumed that you have already downloaded, extracted, and consumed the necessary documentation to get up and running with some basic rhino scripts.
...the appropriate database driver for mysql is loaded and the connection string to a database named rhino on my local machine is configured using the user account urhino with the password of prhino.
XForms Custom Controls - Archive of obsolete content
since firefox 4, xbl and xul are disabled by default for all pages not loaded from a chrome:// url.
... this also includes content loaded from file:// urls.
Mozilla XForms Specials - Archive of obsolete content
information about how to whitelist domain can be found in the release notes the cross domain check also includes forms loaded from file://.
... forms loaded from that url should be local files, and thus trusted, but it is not always the case.
Displaying a graphic with audio samples - Archive of obsolete content
controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's there */ signal = new ...
... // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Buttons - Game development
add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation.
...to do that, adjust the update() function like so: function update() { game.physics.arcade.collide(ball, paddle, ballhitpaddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); if(playing) { paddle.x = game.input.x || game.world.width*0.5; } } that way the paddle is immovable after everything is loaded and prepared, but before the start of the actual game.
Visual typescript game engine - Game development
find configuration at ./src/lib/client-config.ts /** * addson * all addson are ansync loaded scripts.
... https://www.npmjs.com/package/@types/matter-js crypto icons downloaded from https://www.behance.net/junikstudio todo list for 2019 i'm still far away from the project objective : make visual nodes for editor mode in gameplay.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded.
... as browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially.
Practical positioning examples - Learn web development
you might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger ui design.
... note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest.
Web fonts - Learn web development
web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.
...in newer browsers, you can also specify a unicode-range value, which is a specific range of characters you want to use out of the web font — in supporting browsers, only the specified characters will be downloaded, saving unnecessary downloading.
What are browser developer tools? - Learn web development
these tools do a range of things, from inspecting currently-loaded html, css and javascript to showing which assets the page has requested and how long they took to load.
...it allows you to run lines of javascript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code.
Sending form data - Learn web development
include one or more <input type="file"> controls to allow your users to select the file(s) that will be uploaded.
... sandbox uploaded files.
JavaScript basics - Learn web development
if the javascript loads first and it is supposed to affect the html that hasn't loaded yet, there could be problems.
... the code uses a conditional to check if the src value is equal to the path of the original image: if it is, the code changes the src value to the path of the second image, forcing the other image to be loaded inside the <img> element.
Adding vector graphics to the Web - Learn web development
the svg file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future.
... the browser cannot cache inline svg as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded.
Introduction to web APIs - Learn web development
image source: overloaded plug socket by the clear communication people, on flickr.
... common browser apis in particular, the most common categories of browser apis you'll use (and which we'll cover in this module in greater detail) are: apis for manipulating documents loaded into the browser.
Video and Audio APIs - Learn web development
if you downloaded our examples repo, you'll find it in javascript/apis/video-audio/start/ at this point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered.
... the <video> element contains two <source> elements so that different formats can be loaded depending on the browser viewing the site.
CSS performance optimization - Learn web development
the browser can paint the page once it has downloaded the css and built the css object model.
... will-change: opacity, transform; the font-display property applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load.
What is web performance? - Learn web development
this is the process that the browser uses to construct the web document once the files have been downloaded from the server.
...extensive dom manipulation after the pages has loaded (e.g., adding, deleting, or moving of nodes) can affect performance, so it is worth understanding how to dom works, and how such issues can be mitigated.
Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... setting preload="none" results in none of the video being downloaded until playback.
The "why" of web performance - Learn web development
a 22.6 mb site could take up to 83 seconds to load on a 3g network, with domcontentloaded (meaning the site's base html structure) at 31.86 seconds.
... and if this site were loaded on a us carrier's international roaming plan?
Properly configuring server MIME types - Learn web development
note: historically, firefox has loaded css files even if they had the wrong mime type, as long as the html document that requested them was being processed in quirks mode.
... for security reasons, gecko 2.0 will no longer do this for stylesheets loaded from a different origin than the requesting document.
Ember resources and troubleshooting - Learn web development
both of these files are generated with sourcemaps, so when you open the vendor.js or {app-name}.js to search for relevant code, when a debugger is placed, the sourcemap will be loaded and the breakpoint will be placed in the pre-transpiled code for easier correlation to your project code.
... model — where data is loaded.
Introducing a complete toolchain - Learn web development
git can be downloaded and installed via the git-scm website — download the relevant installer for your system, run it, and follow the on-screen prompts.
... note: if you want to just take our existing project and set it up, ready to use, you could go into the root directory of the unzipped downloaded, and run one single installation command to install all of the project’s dependencies: npm install.
Package management basics - Learn web development
a bundle is the term that’s generally used to refer to a single file on your web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’ browser.
... if we had avoided any development tools and pointed a <script src=””> element to a hosted version of date-fns, roughly the same thing would have happened — all of the library would be downloaded when our example page is loaded in a browser.
Mozilla accessibility architecture
one benefit of this approach is that accessibility.dll/libaccessibility.so does not need get loaded until the accessibility service gets used, and for most users it is never loaded.
...these crashes occur when the assistive techology releases after some gecko modules have already been unloaded, when the necessary destructors no longer exist in memory.
Debugging on Mac OS X
on macos 10.15+, downloaded try builds will not launch by default because notarization is required.
... to workaround this problem, remove the quarantine extended attribute from the downloaded nightly: $ xattr -r -d com.apple.quarantine /path/to/nightly.app local builds local builds of mozilla-central do not enable hardened runtime and hence do not have debugging restrictions.
Debugging on Windows
setting breakpoints in dlls which are not yet loaded in memory vc++ 6.0: go to project > settings..., debug tab and select "additional dlls" from the drop down list.
... find the directory where visual studio caches downloaded symbols; in vc++ 10 open the menu to tools > options > debugging > symbols and copy the field "cache symbols in this directory".
Error codes returned by Mozilla APIs
ns_error_factory_not_loaded (0x800401f8) ns_error_factory_exists (0xc1f30100) ns_error_factory_no_signature_support (0xc1f30101) ns_error_proxy_invalid_in_parameter (0x80010010) ns_error_proxy_invalid_out_parameter (0x80010011) ns_error_cannot_convert_data (0x80460001) ns_error_object_is_immutable (0x80460002) ns_error_loss_of_significant_data (0x80460003) ns_error_illegal_during_shutdown (0x...
...03e9) ns_error_uconv_noconv (0x80500001) ns_error_udec_illegalinput (0x8050000e) ns_imagelib_error_failure (0x80540005) ns_imagelib_error_no_decoder (0x80540006) ns_imagelib_error_not_finished (0x80540007) ns_imagelib_error_load_aborted (0x80540008) ns_error_wont_handle_content (0x805d0001) moz_error_storage_error (0x80630001) ns_error_schemavalidator_no_schema_loaded (0x80640001) ns_error_schemavalidator_no_dom_node_specified (0x80640002) ns_error_schemavalidator_no_type_found (0x80640003) ns_error_schemavalidator_type_not_found (0x80640004) note: there are other errors in these files: gfx/public/nsidevicecontext.h base/public/nsneterror.h parser/htmlparser/public/nsiparser.h layout/base/nslayouterrors.h profile/public/nsiprofileintern...
Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the browser.
... another use is to interact with the content very early in the page load process, long before domcontentloaded event is fired.
Limitations of frame scripts
nsiaboutmodule by default, custom about: pages registered using nsiaboutmodule are loaded in the chrome process.
... javascript code modules (jsms) in multiprocess firefox, a jsm loaded into the content process does not share any state with the same jsm loaded into the chrome process.
Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the browser may be null (see below) docshell the nsidocshell associated with the browser.
... another use is to interact with the content very early in the page load process, long before domcontentloaded event is fired.
Performance best practices for Firefox front-end engineers
consider loading scripts with the subscript loader asynchronously if you've ever used the subscript loader, you might not know that it can load scripts asynchronously, and return a promise once they're loaded.
... for example: services.scriptloader.loadsubscriptwithoptions(myscripturl, { async: true }).then(() => { console.log("script at " + myscripturl + " loaded asynchronously!"); }); ...
HTMLIFrameElement.executeScript()
the executescript() method of the htmliframeelement interface allows a specified script to be executed against a page loaded in the browser <iframe>.
... syntax var mydomrequest = instanceofhtmliframeelement.executescript(script, options); return value a domrequest object that returns an onsuccess handler if the script is successfully executed against the loaded content, or an onerror handler if not.
HTMLIFrameElement.getManifest()
the getmanifest() method of the htmliframeelement interface retrieves the manifest of an app loaded in the browser <iframe> and returns it as json.
... return value a promise that resolves to a json object representation of the loaded app's manifest.
HTMLIFrameElement.getStructuredData()
the getstructureddata() method of the htmliframeelement interface retrieves any structured microdata (and hcard and hcalendar microformat data) contained in the html loaded in the browser <iframe> and returns it as json.
...if the request is successful, the request.result is a json object representation of all microdata contained on the page loaded in the browser.
Overview of Mozilla embedding APIs
each service is represented by a singleton object which is instantiated the first time it is requested and remains alive until the service manager is shut down, or the service is explicitly unloaded.
... through the service manager, individual services can be loaded, unloaded and accessed.
How to get a stacktrace with WinDbg
once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused by flash player, and record a log of loaded modules.
...enter these three commands, one at a time, to get the stacktrace, crash/hang analysis and log of loaded modules.
DownloadTarget
partfilepath read only string the path of the ".part" file containing the data downloaded so far, or null to disable the use of a ".part" file to keep partially downloaded data.
... calling this method lets the download object's properties be updated if the user moves or deletes the target file or its associated ".part" file, which contains a partially-downloaded file's contents.
XPCOMUtils.jsm
the xpcomutils.jsm javascript code module offers utility routines for javascript components loaded by the javascript component loader.
... examples definelazygetter var myservices = {}; cu.import('resource://gre/modules/xpcomutils.jsm'); //set it up xpcomutils.definelazygetter(myservices, 'as', function () { return cc['@mozilla.org/alerts-service;1'].getservice(ci.nsialertsservice) }); //when you need to use it myservices.as.showalertnotification('chrome://branding/content/icon64.png', 'this was lazyloaded', 'this is a notification from myservices.as', null, null); ...
Bootstrapping a new locale
directories to localize if you're starting from scratch, you should have just downloaded: mozilla-1.9.x/browser/locales/ mozilla-1.9.x/dom/locales/ mozilla-1.9.x/netwerk/locales/ mozilla-1.9.x/other-licenses/branding/firefox/locales/en-us mozilla-1.9.x/security/manager/locales/ mozilla-1.9.x/toolkit/locales/ and then copied them so that the files for localization end up in the following directories: ab-cd/browser/ ab-cd/dom/ ab-cd/netwerk/ ab-cd/other-licenses/branding/firefox/ ab...
... (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers.
Using the viewport meta tag to control layout on mobile browsers
(there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) the initial-scale property controls the zoom level when the page is first loaded.
...for example, mobile safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.
about:memory
single memory report files can also be loaded automatically when about:memory is loaded by appending a file query string, for example: about:memory?file=/home/username/reports.json.gz this is most useful when loading memory reports files obtained from a firefox os device.
...these files can be loaded as is, but they can also be loaded after unzipping.
PR_FindSymbol
syntax #include <prlink.h> void* pr_findsymbol ( prlibrary *lib, const char *name); parameters the function has these parameters: lib a valid reference to a loaded library, as returned by pr_loadlibrary, or null.
...if the library is unloaded, for instance, the results of any pr_findsymbol calls become invalid as well.
PR_FindSymbolAndLibrary
finds a symbol in one of the currently loaded libraries, and returns both the symbol and the library in which it was found.
... description this function finds the specified symbol in one of the currently loaded libraries.
NSS FAQ
MozillaProjectsNSSFAQ
binary builds of nss for several platforms including the command-line tools can be downloaded from http://ftp.mozilla.org/pub/mozilla.o...y/nss/releases/.
... nspr, which you will need as well, can be downloaded from http://ftp.mozilla.org/pub/mozilla.org/nspr/releases/.
JSS Provider Notes
at runtime, the jre automatically verifies this signature whenever a jss class is loaded that implements a jce algorithm.
... if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature.
Mozilla-JSS JCA Provider notes
at runtime, the jre automatically verifies this signature whenever a jss class is loaded that implements a jce algorithm.
...if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature.
PKCS #11 Module Specs
critical - if this library cannot be loaded, completely fail initialization.
...at init time nss, will try to look for a default root cert device if one has not already been loaded.
The JavaScript Runtime
instead, every property accessor method in scriptable (has, get, set, remove, getattributes, and setattributes) has overloaded forms that take either a string or an int argument.
... it is the responsibility of the caller to invoke the appropriate overloaded form.
Rhino scopes and contexts
these objects would normally be lazy loaded but the lazy loading fails if the scope is sealed.
... scriptableobject sealedsharedscope = cx.initstandardobjects(null, true); // force the liveconnect stuff to be loaded.
JSErrorReport
ismuted bool the web platform allows scripts to be loaded from arbitrary cross-origin sources.
... to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded.
Bundling multiple binary components
the costs get higher if you have many methods that need to be loaded.
... the real components are manually loaded and registered using the stub ("krealcomponent" in the sample).
An Overview of XPCOM
performance when code is modularized, modules that are not necessary right away can be "lazy loaded", or not loaded at all, which can improve the performance of your application.
...this is important when you want to group sets of factories together and determine if they can be unloaded.
Finishing the Component
when the component is loaded, gecko calls the nsicontentpolicy implementation in weblock on every page load, and this prevents pages from displaying by returning the proper value when the load method is called.
...or you could implement the web lock so that instead of blocking any site, the component would simply log all urls that are loaded.
Starting WebLock
since the component hasn't been created yet, there are no instantiated nsiobserver objects that can be passed into the nsiobserverservice, nor can the component code do anything until it is loaded.
...the first section of the interface controls whether or not weblock checks to see if a web page can be loaded.
Components.utils.import
note: prior to gecko 2.0, javascript code modules could only be loaded using file: or resource: urls.
... syntax components.utils.import(url [, scope]); // or, if you use a tool such as jslint which reports compiler errors for the above, components.utils["import"](url [, scope]); parameters url a string of the url of the script to be loaded.
nsIApplicationCacheChannel
loadedfromapplicationcache prbool true if the resource was loaded from the application cache, otherwise false.
... this value may be false even if the resource is assigned to an application cache if, for example, it was loaded as a fallback.
nsIBrowserSearchService
exceptions thrown ns_error_failure if the type is invalid, or if the description file cannot be successfully loaded.
...this includes all loaded engines that aren't in the user's profile directory (ns_app_user_search_dir).
nsICategoryManager
icategorymanager); var enumerator = categorymanager.enumeratecategory("app-startup"); var entries = []; while (enumerator.hasmoreelements()) { var item = enumerator.getnext(); var entry = item.queryinterface(components.interfaces.nsisupportscstring) entries.push(entry.tostring()); } entries.sort(); var entriesstring = entries.join("\n"); dump(entriesstring + "\n"); disable currently loaded plugins by type this snippet here shows how to disable plugins that are currently loaded for the file type of pdf.
... var content_type = 'application/pdf'; // update the category manager in case the plugins are already loaded.
nsICharsetResolver
requestcharset() called to resolve the charset that should be used for parsing the document being loaded from achannel.
...acstring requestcharset( in nsiwebnavigation awebnavigation, in nsichannel achannel, out boolean awantcharset, out nsisupports aclosure ); parameters awebnavigation the nsiwebnavigation the document is being loaded in.
nsIDownloadProgressListener
alocation the uri of the file being downloaded.
... adownload the nsidownload object representing the file being downloaded.
nsIExternalProtocolService
for example, a non-exposed protocol would not be loaded by the application in response to a link click or a x-remote openurl command.
...awindowcontext the window to parent the dialog against, and, if a web handler is chosen, it is loaded in this window as well.
nsIFaviconService
for a normal page with a favicon we've stored, this will be an annotation uri which will then cause the corresponding favicon data to be loaded from this service.
...for a normal page with a favicon we've stored, this will be an annotation uri which will then cause the corresponding favicon data to be loaded from this service.
nsIMicrosummaryObserver
1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void oncontentloaded(in nsimicrosummary microsummary); void onelementappended(in nsimicrosummary microsummary); void onerror(in nsimicrosummary microsummary); methods oncontentloaded() called when an observed microsummary updates its content.
...void oncontentloaded( in nsimicrosummary microsummary ); parameters microsummary the microsummary whose content has just been updated.
nsIMicrosummaryService
the set might change after this method returns, since this method will trigger an asynchronous load of the page in question (if it isn't already loaded) to see if it references any page-specific microsummaries.
... if the caller passes a bookmark id, and one of the microsummaries is the current one for the bookmark, this method will retrieve content from the datastore for that microsummary, which is useful when callers want to display a list of microsummaries for a page that isn't loaded, and they want to display the actual content of the selected microsummary immediately (rather than after the content is asynchronously loaded).
nsIMsgFolder
lastmessageloaded nsmsgkey unique id to the folder, it is not a globally unique identifier.
... will return nsmsgkey_none if there was no last message loaded.
nsIMsgMessageService
adisplayconsumer is (for now) an nsidocshell which the message is loaded into.
... adisplayconsumer for now, a nsidocshell which the message is loaded into.
nsINavHistoryQuery
rray,size_is(count)] out unsigned long transitions); void setfolders([const,array, size_is(foldercount)] in long long folders, in unsigned long foldercount); void settransitions([const,array, size_is(count)] in unsigned long transitions, in unsigned long count); attributes attribute type description absolutebegintime prtime read only: retrieves the begin time value that the currently loaded reference points + offset resolve to.
... absoluteendtime prtime read only: retrieves the end time value that the currently loaded reference points + offset resolve to.
nsIParserUtils
in that case, <a> links (and similar) to other content are preserved, so an explicit user action (following a link) after the content has been loaded can still leak information.
... note: if -moz-binding is not present, <style> elements and style attributes, and if sanitizerallowstyle is specified, the sanitized content may still be xss dangerous if loaded into a non-gecko web engine!
nsIProtocolProxyService
however, if the nsiproxyinfo type is "http", then it means that the given uri should be loaded using the http protocol handler, which also supports nsiproxiedprotocolhandler.
... note: if pac is configured, and the pac file has not yet been loaded, then this method will return a nsiproxyinfo instance with a type of "unknown" to indicate to the consumer that asyncresolve should be used to wait for the pac file to finish loading.
nsISHistory
listeners are notified when pages are loaded or purged from history.
...listeners are notified when pages are loaded from history.
nsIUpdate
state astring the state of the selected patch: "downloading" the update is being downloaded.
..."download-failed" the update failed to be downloaded.
nsIUpdateCheckListener
position the number of bytes downloaded so far.
... totalsize the total number of bytes that need to be downloaded.
nsIUpdateItem
xpiurl astring the url of the xpi where this item can be downloaded.
... name the item's name downloadurl the url from which the item is to be downloaded.
nsIUploadChannel2
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void explicitsetuploadstream(in nsiinputstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders); methods explicitsetuploadstream() sets a stream to be uploaded by this channel with the specified content-type and content-length header values.
... void explicitsetuploadstream( in nsiinputstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders ); parameters astream the stream to be uploaded by this channel.
nsIWebPageDescriptor
docshell/base/nsiwebpagedescriptor.idlscriptable this interface allows content being displayed in one window to be loaded into another window without refetching it from the network.
...adisplaytype the display type to use when displaying the loaded page; see display type constants for possible values.
nsIWindowWatcher
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open.
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open for details.
Troubleshooting XPCOM components registration
there are several common reasons that registration can fail: a component that is a binary (shared library) fails to load a javascript component has parsing errors the shared library loaded correctly, but registration was not successful did registration succeed?
... windows-specific hints use dependency walker to check that your dependent libraries are loaded correctly.
Xray vision
javascript loaded from normal web pages is called content code.
... because this code is being loaded from arbitrary web pages, it is regarded as untrusted and potentially hostile, both to other websites and to the user.
Main Windows
things appear confusing for several reasons: much of the code is written to be portable, so instead of duplicating it, its been put in overlays that are loaded over many different types of windows.
...the rest is loaded from overlays: mailwindowoverlay.xul this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript.
Thunderbird Binaries
described below are three types of generally available thunderbird packages - releases, early preview releases, and nightly builds (including trunk development builds) - and their downloaded locations.
... thunderbird current release can be downloaded from https://www.mozilla.org/thunderbird/ past thunderbird releases can be downloaded from https://releases.mozilla.org/pub/thunderbird/releases/ early preview releases whilst writing new versions of thunderbird, developers release preview versions, known as betas.
Creating a Custom Column
window.addeventlistener("load", doonceloaded, false); function doonceloaded() { var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { addcustomcolumnhandler(); } } ...
...what happens is: usually, the event sequence is: jsm load -> onload -> msgcreatedbview with enigmail, the event sequence becomes jsm load -> msgcreatedbview -> onload to workaround this, you can either i) manually run addcustomhandler() at the end of your onload handler or ii) register createdbobserver when your .jsm is loaded.
XPI
when downloaded or dropped into an extension manager, xpinstall automatically interacts with the installation instructions contained in the xpi, and installs the contained software.
...instead, the xpi itself is placed in the extensions directory, and files are loaded directly out of the package.
Debugging service workers - Firefox Developer Tools
it is only activated when there are no longer any pages loaded that are still using the old service worker.
... as soon as there are no more such pages still loaded, the new service worker activates.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Tree map view - Firefox Developer Tools
scripts: javascript sources loaded by the page.
...you can see the much larger proportion of the heap occupied by scripts, that are loaded from a large number of origins.
Network request details - Firefox Developer Tools
queued, started, downloaded new in firefox 72, we now show the following timings at the top of the timings tab, making dependency analysis a lot easier: queued: when the resource was queued for download.
... downloaded: when the the resource finished downloading.
Edit fonts - Firefox Developer Tools
this tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.
... the url to the font file in the case of web fonts not available on your system, or "system" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system).
Use the Inspector API - Firefox Developer Tools
bindable events using on: markuploaded called when the left panel has been refreshed, after page change.
... ready called on first markuploaded.
How to - Firefox Developer Tools
save a profile to save a profile, click the link labeled "save" in the recordings pane: load a profile to load a profile, click "import..." and choose the file: clear all loaded profiles to clear all loaded profiles, click "clear".
... if you do this, you'll lose any loaded profiles that you have not saved.
Responsive Design Mode - Firefox Developer Tools
n - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support.
... reload when user agent is changed: when this option is enabled, the page isreloaded whenever the user agent is changed.
Console messages - Firefox Developer Tools
the browser loaded this active content.
...the browser loaded this display content.
AbstractRange - Web APIs
first, after your page is loaded, the browser simply isn't thinking in terms of html.
... once it's been loaded, the page is a tree of dom node objects, so you need to specify the beginning and ending locations of a range in terms of nodes and positions within nodes.
AudioProcessingEvent - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
...n() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channe...
BaseAudioContext.createScriptProcessor() - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
...n() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channe...
CSSStyleSheet - Web APIs
notes in some browsers, if a stylesheet is loaded from a different domain, accessing cssrules results in securityerror.
... a cssstylesheet object is created and inserted into the document's document.stylesheets list automatically by the browser, when a stylesheet is loaded for a document.
CanvasRenderingContext2D.drawImage() - Web APIs
ns_error_not_available the image is not loaded yet.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.naturalheight; // will draw the image as 300x227, ignoring the custom size of 60x45 // given in th...
Applying styles and colors - Web APIs
for example: var img = new image(); img.src = 'someimage.png'; var ptrn = ctx.createpattern(img, 'repeat'); note: like with the drawimage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.
...this is to make sure the image is loaded before it is assigned to the pattern.
Clients.claim() - Web APIs
WebAPIClientsclaim
be aware that this results in your service worker controlling pages that loaded regularly over the network, or possibly via a different service worker.
... example the following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.
DOMHighResTimeStamp - Web APIs
it's calculated like this: if the script's global object is a window, the time origin is determined as follows: if the current document is the first one loaded in the window, the time origin is the time at which the browser context was created.
... if during the process of unloading the previous document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable.
Document.fonts - Web APIs
WebAPIDocumentfonts
the fontfaceset interface is useful for loading new fonts, checking the status of previously loaded fonts etc.
... examples doing operation after all fonts are loaded document.fonts.ready.then(function() { // any operation that needs to be done only after all the fonts // have finished loading can go here.
Document.readyState - Web APIs
var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded.
... console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { ini...
Introduction to the DOM - Web APIs
this following javascript will display an alert when the document is loaded (and when the whole dom is available for use): <body onload="window.alert('welcome to my home page!');"> another example.
... this function creates a new h1 element, adds text to that element, and then adds the h1 to the tree for this document: <html> <head> <script> // run this function when the document is loaded window.onload = function() { // create a couple of elements in an otherwise empty html page const heading = document.createelement("h1"); const heading_text = document.createtextnode("big head!"); heading.appendchild(heading_text); document.body.appendchild(heading); } </script> </head> <body> </body> </html> fundamental data types this reference tries to describe the various objects and types in simple terms.
FetchEvent() - Web APIs
isreload read only a boolean that signifies whether the page was reloaded or not when the event was dispatched.
... preloadresponse read only a promise which returns a previously-loaded response to the client.
FetchEvent.preloadResponse - Web APIs
if no match is found, the code checks for a preloaded response.
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
FetchEvent.navigationPreload - Web APIs
example the following example shows the implementation of a fetch event that uses a preloaded response.
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
Using Fetch - Web APIs
const data = { username: 'example' }; fetch('https://example.com/profile', { method: 'post', // or 'put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <input type="file" /> input element, formdata() and fetch().
...t.queryselector('input[type="file"]'); formdata.append('username', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: 'put', body: formdata }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be uploaded using an html <input type="file" multiple /> input element, formdata() and fetch().
FileReader - Web APIs
this is one of the following: empty 0 no data has been loaded yet.
... loading 1 data is currently being loaded.
FileRequest.onprogress - Web APIs
those objects contain two properties: loaded a number representing the current amount of bytes processed by the operation.
... example // assuming 'request' which is a filerequest object request.onprogress = function (status) { var progress = document.queryselector('progress'); progress.value = status.loaded; progress.max = status.total; } specification not part of any current specification.
FontFace.status - Web APIs
WebAPIFontFacestatus
the status read-only property of the fontface interface returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
... syntax var status = fontface.status; value one of "unloaded", "loading", "loaded", or "error".
FontFaceSet - Web APIs
it will be one of 'loading' or 'loaded'.
... fontfaceset.check() a boolean that indicates whether a font is loaded, but doesn't initiate a load when it isn't.
Fullscreen API - Web APIs
the full-screen mode feature is identified by the string "fullscreen", with a default allow-list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
... view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key.
GlobalEventHandlers.onload - Web APIs
the load event fires when a given resource has loaded.
... there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using eventtarget.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
GlobalEventHandlers - Web APIs
globaleventhandlers.onloadeddata is an eventhandler representing the code to be called when the loadeddata event is raised.
... globaleventhandlers.onloadedmetadata is an eventhandler representing the code to be called when the loadedmetadata event is raised.
HTMLImageElement.alt - Web APIs
the htmlimageelement property alt provides fallback (alternate) text to display when the image specified by the <img> element is not loaded.
... syntax htmlimageelement.alt = alttext; let alttext = htmlimageelement.alt; value a domstring which contains the alternate text to display when the image is not loaded or for use by assistive devices.
HTMLImageElement.crossOrigin - Web APIs
this means that cors is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.
... example in this example, a new <img> element is created and added to the document, loading the image with the anonymous state; the image will be loaded using cors and credentials will be used for all cross-origin loads.
HTMLTrackElement - Web APIs
loaded 2 indicates that the text track has been loaded with no fatal errors.
... usage notes loading of the track's text resource the webvtt or ttml data describing the actual cues for the text track isn't loaded if the track's mode is initially in the disabled state.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
element.addeventlistener("load", () => console.log("loaded data")); console.log("fetching data..."); element.getdata(); console.log("data fetched"); executing this code twice in a row gives the results shown in the table below: results when data isn't cached (left) vs.
... when it is found in the cache data isn't cached data is cached fetching data data fetched loaded data fetching data loaded data data fetched even worse, sometimes the element's data property will be set and other times it won't be by the time this code finishes running.
History.length - Web APIs
WebAPIHistorylength
the history.length read-only property returns an integer representing the number of elements in the session history, including the currently loaded page.
... for example, for a page loaded in a new tab this property returns 1.
IDBOpenDBRequest.onupgradeneeded - Web APIs
the onupgradeneeded property of the idbopendbrequest interface is the event handler for the upgradeneeded event, triggered when a database of a bigger version number than the existing stored database is loaded.
...}; example in the following example you can see the onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
Using IndexedDB - Web APIs
when you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until they are closed or reloaded).
... here's how it works: var openreq = mozindexeddb.open("mytestdatabase", 2); openreq.onblocked = function(event) { // if some other tab is loaded with the database, then it needs to be closed // before we can proceed.
Timing element visibility with the Intersection Observer API - Web APIs
although many aspects of this example will not match real world usage (in particular, the articles all have the same text and aren't loaded from a database, and there are just a handful of simple text-only ads that are selected from an array), this should provide enough understanding of the api to quickly learn how to apply the intersection observer api to your own site.
...following every odd-numbered article, an ad is "loaded" and inserted into the page.
Intersection Observer API - Web APIs
implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
...when a site is loaded with these tests, things can get downright ugly.
Capabilities, constraints, and settings - Web APIs
s }).then(function(stream) { let audiotracks = stream.getaudiotracks(); let videotracks = stream.getvideotracks(); videoelement.srcobject = stream; if (audiotracks.length) { audiotrack = audiotracks[0]; } if (videotracks.length) { videotrack = videotracks[0]; } }).then(function() { return new promise(function(resolve) { videoelement.onloadedmetadata = resolve; }); }).then(function() { getcurrentsettings(); }).catch(handleerror); } there are several steps here: it calls buildconstraints() to create the mediatrackconstraints objects for the two tracks from the code in the edit boxes.
... then we set up a promise which resolves when the onloadedmetadata event occurs on the video element.
MessageChannel() - Web APIs
when the iframe has loaded, we pass port2 to the iframe using messageport.postmessage along with a message.
... 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).
MessageChannel.port1 - Web APIs
when the <iframe> has loaded, we pass messagechannel.port2 to the <iframe> using messageport.postmessage along with a message.
... 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.
MessageChannel.port2 - Web APIs
when the iframe has loaded, we pass port2 to the iframe using messageport.postmessage along with a message.
... 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).
MessagePort.onmessage - Web APIs
when the iframe has loaded, we pass messagechannel.port2 to the iframe using messageport.postmessage along with a message.
... 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).
MessagePort.postMessage() - Web APIs
when the iframe has loaded, we pass messagechannel.port2 to the iframe using window.postmessage along with a message.
... 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).
msFirstPaint - Web APIs
msfirstpaint is a read-only property which gets the time when the document loaded by the window object began to be displayed to the user.
... syntax p = object.msfirstpaint; value an integer value that represents the time when the document began to be displayed or 0 if the document could not be loaded.
NavigationPreloadManager - Web APIs
await self.registration.navigationpreload.enable(); } }()); }); using a preloaded response the following example shows the implementation of a fetch event that uses a preloaded response.
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
Navigator.getUserMedia() - Web APIs
your callback can then assign the stream to the desired object (such as an <audio> or <video> element), as shown in the following example: function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { // do something with the video here.
...vigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia; if (navigator.getusermedia) { navigator.getusermedia({ audio: true, video: { width: 1280, height: 720 } }, function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("the following error occurred: " + err.name); } ); } else { console.log("getusermedia not supported"); } ...
Page Visibility API - Web APIs
unloaded the page is in the process of being unloaded from memory.
... note: not all browsers support the unloaded value.
PerformanceNavigationTiming - Web APIs
performancenavigationtiming.domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes.
... performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document.
PerformanceTiming - Web APIs
performancetiming.domcontentloadedeventstart read only right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been executed.
... performancetiming.domcontentloadedeventend read only right after all the scripts that need to be executed as soon as possible, in order or not, have been executed.
ProgressEvent() - Web APIs
syntax progressevent = new progressevent(type, {lengthcomputable: abooleanvalue, loaded: anumber, total: anumber}); arguments the progressevent() constructor also inherits arguments from event().
... loaded optional is an unsigned long long representing the amount of work already performed by the underlying process.
ProgressEvent.initProgressEvent() - Web APIs
do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcomputable, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred.
... loaded is an unsigned long long representing the amount of work already performed by the underlying process.
ProgressEvent - Web APIs
progressevent.loaded read only is an unsigned long long representing the amount of work already performed by the underlying process.
... var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification.
SVGElement: load event - Web APIs
the load event fires on an svgelement when it is loaded in the browser, e.g.
... bubbles no cancelable no interface svgevent event handler property onload examples svgelem.addeventlistener('load', () => { console.log('svg loaded.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'load' in that specification.
ScriptProcessorNode.bufferSize - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
...tion() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channe...
ScriptProcessorNode.onaudioprocess - Web APIs
} example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
...n() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channe...
ScriptProcessorNode - Web APIs
examples the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
...tion() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channe...
ServiceWorkerContainer.startMessages() - Web APIs
explanation by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and get dispatched once the page's html document has been loaded and parsed (i.e.
... after the domcontentloaded event fires).
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
the videoplaybackquality interface's read-only corruptedvideoframes property the number of corrupted video frames that have been received since the <video> element was last loaded or reloaded.
... syntax corruptframefount = videoplaybackquality.corruptedvideoframes; value the number of corrupted video frames that have been received since the <video> element was last loaded or reloaded.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
the read-only droppedvideoframes property of the videoplaybackquality interface returns the number of video frames which have been dropped rather than being displayed since the last time the media was loaded into the htmlvideoelement.
... syntax value = videoplaybackquality.droppedvideoframes; value an unsigned 64-bit value indicating the number of frames that have been dropped since the last time the media in the <video> element was loaded or reloaded.
Using textures in WebGL - Web APIs
// load texture const texture = loadtexture(gl, 'cubetexture.png'); mapping the texture onto the faces at this point, the texture is loaded and ready to use.
... because webgl now requires textures to be loaded from secure contexts, you can't use textures loaded from file:/// urls in webgl.
window.location - Web APIs
WebAPIWindowlocation
syntax var oldlocation = location; location = newlocation; examples basic example alert(location); // alerts "/docs/web/api/window/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a document will be loaded using the url as if location.assign() had been called with the modified url.
...lick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
Window.openDialog() - Web APIs
WebAPIWindowopenDialog
syntax newwindow = opendialog(url, name, features, arg1, arg2, ...) newwindow the opened window url the url to be loaded in the newly opened window.
...the variables specified in the javascript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).
window.postMessage() - Web APIs
example /* * in window a's scripts, with a being on <http://example.com:8080>: */ var popup = window.open(/* popup details */); // when the popup has fully loaded, if not blocked by a popup blocker: // this does nothing, assuming the window hasn't changed its location.
... the value of the origin property when the sending window contains a javascript: or data: url is the origin of the script that loaded the url.
Window: unload event - Web APIs
the unload event is fired when the document or a child resource is being unloaded.
...doctype html> <html> <head> <title>child frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ☻ </body> </html> when the parent frame is unloaded, events will be fired in the order described by the console.log() messages.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
firefox for android uses a timeout value of 15 minutes for background tabs since bug 736602 in firefox 14, and background tabs can also be unloaded entirely.
...in background tabs, however, the throttling minimum delay is 10,000 ms, or 10 seconds, which comes into effect 30 seconds after a document has first loaded.
Sending and Receiving Binary Data - Web APIs
var filestream = load_binary_resource(url); var abyte = filestream.charcodeat(x) & 0xff; // throw away high-order byte (f7) the example above fetches the byte at offset x within the loaded binary data.
... var oreq = new xmlhttprequest(); oreq.open("post", url, true); oreq.onload = function (oevent) { // uploaded.
XMLHttpRequestEventTarget.onprogress - Web APIs
event event.loaded the amount of data currently transfered.
... xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
Web applications and ARIA FAQ - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> this progress bar is built using a <div>, which is not very descriptive.
...var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is.
ARIA - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning.
...var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, // so that assistive technologies know what kind of widget it is.
unicode-range - CSS: Cascading Style Sheets
if the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
...for users viewing the english version of a page, the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth.
Using CSS animations - CSS: Cascading Style Sheets
animation-delay configures the delay between the time the element is loaded and the beginning of the animation sequence.
...this code configures our event listeners; we call it when the document is first loaded in order to set things up.
background-image - CSS: Cascading Style Sheets
if a specified image cannot be drawn (for example, when the file denoted by the specified uri cannot be loaded), browsers handle it as they would a none value.
...if the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.
cursor - CSS: Cascading Style Sheets
WebCSScursor
the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).
... for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
Getting Started - Developer guides
} the full list of the readystate values is documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (interactive) or (processing request) 4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response.
... simple timed xhr example another simple example follows — here we are loading a text file via xhr, the structure of which is assumed to be like this: time: 312.05 time: 312.07 time: 312.10 time: 312.12 time: 312.14 time: 312.15 once the text file is loaded, we split() the items into an array at each newline character (\n — basically where each line break is in the text file), and then print the complete list of timestamps, and the last timestamp, onto the page.
Live streaming web audio and video - Developer guides
it can also be used instead of the traditional progressive download method for audio and video on demand: there are several advantages to this: latency is generally lower so media will start playing more quickly adaptive streaming makes for better experiences on a variety of devices media is downloaded just in time which makes bandwidth usage more efficient streaming protocols while static media is usually served over http, there are several protocols for serving adaptive streams; let's take a look at the options.
... at the start of the streaming session, an extended m3u (m3u8) playlist is downloaded.
Overview of events and handlers - Developer guides
for example, code might be attached as: var funcinit = function(){ // user code goes here and can safely address all the html elements from the page // since the document has successfully been 'loaded' } document.addeventlistener('domcontentloaded', funcinit); so that this code will only be executed after the document object emits the 'domcontentloaded' event because the html has been parsed and javasript objects created representing each of the nodes of the html document.
... the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an even...
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
while this attribute defines the link as being a stylesheet, the interaction with other attributes and other keyterms within the rel value impact whether the stylesheet is downloaded and / or used.
... the external stylesheet will not be used or even downloaded if the media does not match the value of the media attribute.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
here we establish some variables, setting up a variable that contains the color we'll set the color well to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded.
... var colorwell; var defaultcolor = "#0000ff"; window.addeventlistener("load", startup, false); initialization once the page is loaded, our load event handler, startup(), is called: function startup() { colorwell = document.queryselector("#colorwell"); colorwell.value = defaultcolor; colorwell.addeventlistener("input", updatefirst, false); colorwell.addeventlistener("change", updateall, false); colorwell.select(); } this gets a reference to the color <input> element in a variable called colorwell, then sets the color input's value to the value in defaultcolor.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with ...
... note: an element with the autofocus attribute may gain focus before the domcontentloaded event is fired.
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing domcontentloaded.
... scripts with the defer attribute will prevent the domcontentloaded event from firing until the script has loaded and finished evaluating.
MIME types (IANA media types) - HTTP
if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.
...this is not valid, and in most cases will result in a script not being loaded.
Configuring servers for Ogg media - HTTP
handle http 1.1 byte range requests correctly in order to support seeking and playing back regions of the media that aren't yet downloaded, gecko uses http 1.1 byte-range requests to retrieve the media from the seek target position.
...setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it.
Content-Disposition - HTTP
in a regular http response, the content-disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a web page or as part of a web page, or as an attachment, that is downloaded and saved locally.
... header type response header (for the main body) general header (for a subpart of a multipart body) forbidden header name no syntax as a response header for the main body the first parameter in the http context is either inline (default value, indicating it can be displayed inside the web page, or as the web page) or attachment (indicating it should be downloaded; most browsers presenting a 'save as' dialog, prefilled with the value of the filename parameters if present).
CSP: script-src-attr - HTTP
this includes only inline script event handlers like onclick, but not urls loaded directly into <script> elements.
... 'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
Feature-Policy: unsized-media - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
...the page will re-flow every time an image with unknown dimensions is loaded.
HTTP headers - HTTP
WebHTTPHeaders
x-download-options the x-download-options http header indicates that the browser (internet explorer) should not display the option to "open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application.
... large-allocation tells the browser that the page being loaded is going to want to perform a large allocation.
Link prefetching FAQ - HTTP
if a prefetched document is partially downloaded, then the partial document will still be stored in the cache provided the server sent an "accept-ranges: bytes" response header.
... basically, there are two ways of looking at this issue: websites can already cause things to be silently downloaded using js/dom hacks.
JavaScript modules - JavaScript
over in main.js we've grabbed a reference to each button using a document.queryselector() call, for example: let squarebtn = document.queryselector('.square'); we then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape: squarebtn.addeventlistener('click', () => { import('./modules/square.js').then((module) => { let square1 = new module.square(mycanvas.ctx, mycanvas.listid, 50, 50, 100, 'blue'); square1.draw(); square1.reportarea(); square1.reportperimeter(); }) }); note that, because the promise fulfillment returns a module object, the class is then made a subfea...
... we mentioned this before, but to reiterate: .js files need to be loaded with a mime-type of text/javascript (or another javascript-compatible mime-type, but text/javascript is recommended), otherwise you'll get a strict mime type checking error like "the server responded with a non-javascript mime type".
background_color - Web app manifests
type string mandatory no the background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded.
... this value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
Web app manifests
unlike regular web apps with simple homescreen links or bookmarks, pwas can be downloaded in advance and can work offline, as well as use regular web apis.
... the web app manifest provides information about a web application in a json text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience).
Critical rendering path - Web Performance
optimizing for crp improve page load speed by prioritizing which resources get loaded, controlling the order in which they are loaded, and reducing the file sizes of those resources.
... performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.
Using dns-prefetch - Web Performance
this could be a file loaded later or link target a user tries to follow.
... some resources such as fonts are loaded in anonymous mode.
Web Performance
it can apply to a file, a file type, all files loaded on a page, a specific metric (e.g.
...this could be a file loaded later or link target a user tries to follow.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
lifecycle of a service worker when registration is complete, the sw.js file is automatically downloaded, then installed, and finally activated.
...examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array.
Using templates and slots - Web Components
ers can fill with their own markup, with the effect of composing different dom trees together.</span> <dl slot="attributes"> <dt>name</dt> <dd>the name of the slot.</dd> </dl> </element-details> <element-details> <span slot="element-name">template</span> <span slot="description">a mechanism for holding client- side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using javascript.</span> </element-details> about that snippet, notice these points: the snippet has two instances of <element-details> elements which both use the slot attribute to reference the named slots "element-name" and "description" we put in the <element-details> shadow root .
... the effect of composing different dom trees together.</span> <dl slot="attributes"> <dt>name</dt> <dd>the name of the slot.</dd> </dl> </element-details> <element-details> <span slot="element-name">template</span> <span slot="description">a mechanism for holding client- side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using javascript.</span> </element-details> <script> customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachs...
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
the javascript loads the .xsl file only on the first sort and sets the xslloaded variable to true once it has finished loading the file.
... figure 7: sorting based on div contentview example // xhtml fragment: <div id="example"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory ...
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
the stylesheet has to be passed in as an xml document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet().
...the xml document can be a separate xml file loaded as shown in figure 1, or it can be part of the existing page.
WebAssembly Concepts - WebAssembly
an instance is like an es2015 module that has been loaded into a particular global with a particular set of imports.
... since javascript has complete control over how webassembly code is downloaded, compiled and run, javascript developers could even think of webassembly as just a javascript feature for efficiently generating high-performance functions.
Interacting with page scripts - Archive of obsolete content
by default, content scripts loaded by add-ons and scripts loaded by web pages are insulated from each other: content scripts can't interact directly with page scripts or access javascript objects they create page scripts can't interact directly with content scripts or access objects they create.
port - Archive of obsolete content
for example, to include an array of strings in the payload: // main.js var pagemods = require("sdk/page-mod"); var self = require("sdk/self"); var pagemod = pagemods.pagemod({ include: ['*'], contentscriptfile: self.data.url("content-script.js"), onattach: setuplistener }); function setuplistener(worker) { worker.port.on('loaded', function(pageinfo) { console.log(pageinfo[0]); console.log(pageinfo[1]); }); } //content-script.js self.port.emit('loaded', [ document.location.tostring(), document.title ]); ...
Communicating using "port" - Archive of obsolete content
for example, to include an array of strings in the payload: var pagemodscript = "self.port.emit('loaded'," + " [" + " document.location.tostring()," + " document.title" + " ]" + ");" var pagemod = require('page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('loaded', function(pageinfo) { console.log(pageinfo[0]); co...
addon-page - Archive of obsolete content
after this, the page loaded from "data/index.html" will not contain navigational elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
context-menu - Archive of obsolete content
when the context menu is first shown and all of the declarative contexts for your item are current) and then remains active until you destroy your context menu item or the page is unloaded.
self - Archive of obsolete content
loadreason this property contains of the following strings describing the reason your add-on was loaded: install enable startup upgrade downgrade isprivatebrowsingsupported this property indicates whether or not the add-on supports private browsing.
util/match-pattern - Archive of obsolete content
to match local files, use file://*, and to match files loaded from your add-on's data directory, use resource://.
jpm - Archive of obsolete content
here are some possible outcomes of running the sign command: your add-on passed validation, was signed by mozilla, and a new signed xpi was downloaded to your working directory.
Creating annotations - Archive of obsolete content
data.url('selector.js')], onattach: function(worker) { worker.postmessage(annotatorison); selectors.push(worker); worker.port.on('show', function(data) { console.log(data); }); worker.on('detach', function () { detachworker(this, selectors); }); } }); make sure the name you use to load jquery matches the name of the jquery version you downloaded.
Overview - Archive of obsolete content
the annotator uses content scripts to build user interfaces, get user input, and examine the dom of pages loaded by the user.
Storing annotations - Archive of obsolete content
, 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.
Modifying the Page Hosted by a Tab - Archive of obsolete content
scripts will be loaded in the same order as the vector.
Bootstrapped extensions - Archive of obsolete content
a sibling of the install.rdf) is loaded automatically.
Bookmarks - Archive of obsolete content
id, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: function() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Page Loading - Archive of obsolete content
page loading on page load how to execute code each time a new page is loaded in browser/mail progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
Rosetta - Archive of obsolete content
but by default, no compilers are loaded.
Sidebar - Archive of obsolete content
web panels sidebar content such as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar".
Common Pitfalls - Archive of obsolete content
how to do security checks for uri loads before loading a uri, one of two security checks needs to be performed: if the uri is a string that will be loaded via passing the string to nsiwebnavigation::loaduri, the one must call checkloaduristrwithprincipal and pass the principal that the uri originates from as the first argument and the uri string as the second argument.
Communication between HTML and your extension - Archive of obsolete content
ajax request, i created and dispatched the event like this: var event = document.createevent("events"); event.initevent("my-custom-event", true, true); document.body.dispatchevent(event); in the code of the extension that catches the loading of a new page i added this code: var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
personally i would discourage this practice (among other things, static linking means the same code gets loaded more than once into memory, and the code won't be available from javascript or other non-c++ languages) and encourage the use of xpcom wherever possible.
Inline options - Archive of obsolete content
you can't do this until your options xul has been loaded into the add-on manager window, so you should listen for the addon-options-displayed notification to initialize your settings.
Multiple item extension packaging - Archive of obsolete content
a multiple item package provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
disabling this cache forces xul documents to be reloaded any every time they are displayed.
Appendix A: Add-on Performance - Archive of obsolete content
jsm provide the cleanest way to separate js into modules that can be loaded on request, unlike chrome scripts which are generally loaded with the overlay at startup.
Getting Started with Firefox Extensions - Archive of obsolete content
xpis are simply zip files, but firefox recognizes the xpi extension and triggers the installation process when an xpi file is loaded.
Observer Notifications - Archive of obsolete content
therefore, the registered observer is unregistered when the browser window is unloaded.
The Essentials of an Extension - Archive of obsolete content
dtd strings are resolved and set when the document is being loaded.
Performance best practices in extensions - Archive of obsolete content
improving startup performance extensions are loaded and run whenever a new browser window opens.
Firefox addons developer guide - Archive of obsolete content
the stuff about installing the dom inspector (https://developer.mozilla.org/en/firefox_addons_developer_guide/let%27s_build_a_firefox_extension#install_the_dom_inspector) is not accurate for firefox 3 or later, since it's no longer included in the firefox installer and must be downloaded from amo.
Using the Stylesheet Service - Archive of obsolete content
determining whether a sheet has been loaded if you are writing an extension and adding your stylesheet in an onload handler, you'll want to see if your sheet has already been added.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
that approach meant that the content of every column would have to be loaded and calculated before it would be rendered in the browser window.
Creating reusable content with CSS and XBL - Archive of obsolete content
note: xbl cannot be loaded over http, so this technique is only useful for local content accessed using the file:/// scheme, or from add-on code.
cached - Archive of obsolete content
the cached event is fired when the resources listed in the application cache manifest have been downloaded, and the application is now cached.
progress - Archive of obsolete content
loaded unsigned long (long) the number of bytes transferred since the beginning of the operation.
updateready - Archive of obsolete content
the updateready event is fired when the resources listed in the application cache manifest have been newly redownloaded, and the script can use swapcache() to switch to the new cache.
Index of archived content - Archive of obsolete content
ation extensions faq hostwindow installer scripting styling proxy ui pydom rdf api rdf datasource how-to reading textual data remote xul remote debugging rsyncing the cvs repository running windows debug builds downloaded from tinderbox sxsw 2007 presentations safe browsing safe browsing: design documentation safely loading uris same origin policy for xbl space manager detailed design space manager high level design standalone xpcom standard makefile header static analysis for windows code under linux stre...
JXON - Archive of obsolete content
vvalue : new vvalue.constructor(vvalue); } var atmpels = []; // loaded element nodes cache function getjxontree (oxmlparent) { var sprop, vcontent, vresult, nlength = 0, nlevelstart = atmpels.length, nchildren = oxmlparent.haschildnodes() ?
MMgc - Archive of obsolete content
other is the delta between private and mmgc, it includes things like system malloc, stacks, loaded library data areas etc.
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
been compiled?) about:buildconfig build platform target i686-pc-linux-gnu build tools compiler version compiler flags gcc gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -wall -w -wno-unused -wpointer-arith -wcast-align -wno-long-long -pedantic -pthread -pipe c++ gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -fno-rtti -fno-exceptions -wall -wconversion -wpointer-arith -wcast-align -woverloaded-virtual -wsynth -wno-ctor-dtor-privacy -wno-non-virtual-dtor -wno-long-long -pedantic -fshort-wchar -pthread -pipe -i/usr/x11r6/include configure arguments --disable-mailnews --enable-extensions=cookie,xml-rpc,xmlextras,pref,transformiix,universalchardet,webservices,inspector,gnomevfs,negotiateauth --enable-crypto --disable-composer --enable-single-profile --disable-profilesharing --with-system-...
Automated testing tips and tricks - Archive of obsolete content
.js how to execute test code with chrome privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the domcontentloaded event chromewindow.addeventlistener('domcontentloaded',callbackfunction,false); ...
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
when loaded from local disk on windows.
Adding the structure - Archive of obsolete content
the lock icon in mozilla that shows whether or not a loaded document was encrypted with ssl).
Finding the file to modify - Archive of obsolete content
in the dom inspector window, go to the file menu, select the inspect a window submenu, then select the mozilla browser window item (named after the page currently loaded in the browser).
Creating a Microsummary - Archive of obsolete content
generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.
Download Manager improvements in Firefox 3 - Archive of obsolete content
nsidownload describes a file in the download queue; these files may currently be queued for download, actively being downloaded, or finished being downloaded.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
note that you can only use these libraries from within xul loaded via a chrome url.
Block and Line Layout Cheat Sheet - Archive of obsolete content
ns_frame_external_reference ns_frame_replaced_element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations.
Layout System Overview - Archive of obsolete content
another responsibility of layout is to manage dynamic changes to the content model, changes that occur after the document has been loaded and (possibly) presented.
Repackaging Firefox - Archive of obsolete content
this is loaded in addition to the homepage, the very first time that firefox is run.
Using microformats - Archive of obsolete content
to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript.
JavaScript crypto - Archive of obsolete content
in the add case, the module will be placed in the nss secmod.db database and will be loaded automatically on application restart.
Java in Firefox Extensions - Archive of obsolete content
the following is a somewhat simplified snippet from xquseme: var reflect = java.lang.reflect; // build an array of the class types which are expected by our constructor (in this case, java.io.file and a class from another jar we loaded, com.sleepycat.db.environmentconfig) var paramtypes = reflect.array.newinstance(java.lang.class, 2); // 2nd argument should indicate the number of items in following array paramtypes[0] = java.io.file; var envconfigclass = loader.loadclass('com.sleepycat.db.environmentconfig'); paramtypes[1] = envconfigclass; // get the constructor var constructor = envclass.getconstructor(paramtypes); // now tha...
Basics - Archive of obsolete content
cusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
slideBar - Archive of obsolete content
slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
statusBar - Archive of obsolete content
onready (event) occurs when the item was loaded onunload (event) triggers when the item was removed.
Measuring add-on startup performance - Archive of obsolete content
sessionrestored is fired later in the process, when firefox has loaded all tabs from the saved session.
Metro browser chrome tests - Archive of obsolete content
a simple test looks like this: gtests.push({ desc: "test loading about:blank", setup: function () { }, teardown: function () { }, run: function () { yield addtab("about:blank"); is(tab.browser.currenturi.spec, "about:blank", "about:blank is loaded"); } }); function test() { runtests(); } gtests contains individual tests that make up the library of tests your test file will contain.
Microsummary XML grammar reference - Archive of obsolete content
generators installed from the web via nssidebar::addmicrosummarygenerator are identified by the remote url from which they were downloaded, and firefox ignores the value of this attribute for them.
Microsummary topics - Archive of obsolete content
note: when web sites install generators via window.sidebar.addmicrosummarygenerator(), firefox sets their uri attribute to urn:source:sourceurl, where sourceurl is the url from which the generator was downloaded.
Styling - Archive of obsolete content
this file will be loaded into the web application content stylesheet and can override the web application's native styles.
PyDOM - Archive of obsolete content
content loaded from anywhere other than a chrome:// url can not host python.
RDF Datasource How-To - Archive of obsolete content
each datasource that is listed will be loaded, and the assertions contained in the datasource will be made available to the tree control for display.
Rsyncing the CVS Repository - Archive of obsolete content
the mozilla.org cvs repository can be downloaded via rsync.
Static Analysis for Windows Code under Linux - Archive of obsolete content
build dehydra for cross-compiler build the dehydra plugin dehydra is a shared library which will be loaded by the above plugin-support gcc.
Supporting per-window private browsing - Archive of obsolete content
var channel = services.io.newchannel("http://example.org", null, null); channel.queryinterface(components.interfaces.nsiprivatebrowsingchannel); channel.setprivate(true); // force the channel to be loaded in private mode similarly, xmlhttprequest objects created via createinstance(ci.nsixmlhttprequest) will often require explicit adjustment, since they have no context from which to derive a privacy status.
Table Layout Regression Tests - Archive of obsolete content
execute the baseline test shutdown the layoutdebugger execute mozilla -layoutdebug - p foo >selftest.txt execute the verify test make a note which tests have failed grep 'failed' selftest.txt (these are false positives, quite frequently they indicate reflow problems, pages showing differently when loaded from cache) make your changes to the source, recompile.
Tamarin Build System Documentation - Archive of obsolete content
; cd scripts edit environment.sh, change the basedir and buildsdir settings (around line 51) basedir=~/hg/tamarin-redux (path to my test repository) (next line) buildsdir=~/hg/builds (a directory to store downloaded builds) always set current working directory to the scripts directory when running a script run a script (e.g.) ../all/run-acceptance-release.sh <optional hg revision number like 1902> how do i navigate the build status page?
Tuning Pageload - Archive of obsolete content
during this delay, the page that's coming in is not painted, unless it ends up fully loaded before the delay expires.
Video presentations - Archive of obsolete content
how pages are built using the dom this presentation describes how documents are loaded and the dom tree is constructed.
When To Use ifdefs - Archive of obsolete content
the only time when they might be a problem is in cross-platform extension code and locales: since this code is downloaded on multiple platforms, platform-specific ifdefs are generally out of the question.
Anonymous Content - Archive of obsolete content
stylesheets loaded by bindings that are attached using the dom are treated as author-level sheets.
Elements - Archive of obsolete content
the image is loaded as soon as the binding is used.
XML in Mozilla - Archive of obsolete content
we treat xhtml documents differently depending on the mime type (or file suffix if files are loaded from local discs).
Unix stub installer - Archive of obsolete content
you can step into the xpinstall engine through the xpistub once the xpistub dll is loaded.
Install Wizards (aka: Stub Installers) - Archive of obsolete content
it then proceeds to extract the xpinstall engine and feed it the downloaded software packages to install.) the stub installer code includes: the logic to display the install wizard widgets and dialogs the code that reads in the configuration file (config.ini) and dynamically installs from the net or from local xpi modules found next to the installer binary the code that processes user selections the code that calls the xpinstall engine through xpistub the libxpnet...
Install script template - Archive of obsolete content
l error values used by the cycore developers (www.cycore.com) who helped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyerror = -4713; var registrykeynotwritableerror = -4714; //initinstall block //the installation is initialized here -- if we fail here, cancel the installation // initinstall is quite an overloaded method, but i have invoked it here with three strings // which are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder = getfolder("plugins"); //v...
Methods - Archive of obsolete content
loadresources returns an object whose properties are localized strings loaded from the specified property file.
Properties - Archive of obsolete content
properties archive full local path of the archive after it is downloaded to the platform specific temp folder.
Learn XPI Installer Scripting by Example - Archive of obsolete content
ation appears in theinstall.js file as follows: if (err==success) { err = performinstall(); logcomment("performinstall() returned: " + err); } else { cancelinstall(err); logcomment("cancelinstall() due to error: " + err); } } else cancelinstall(insufficient_disk_space); performinstall is the function used to execute the install once it has been initialized and loaded, and it is the last step to installing the software.
datasources - Archive of obsolete content
when the xul document is contained on a remote web site, the datasources may only be loaded from the same domain as the document.
disablefastfind - Archive of obsolete content
« xul reference homedisablefastfindtype: booleanput disablefastfind="true" on the root element of a xul document, which is intended to be loaded in a tab, to disable the find bar for the tab with this document.
onpaneload - Archive of obsolete content
« xul reference home onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window.
pending - Archive of obsolete content
if the user has turned on the "don't load tabs until selected" preference, the pending attribute is set on tabs until they get loaded.
Building accessible custom components in XUL - Archive of obsolete content
if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { e.target.focus(); } </code> finally, we'll add two lines to our .xul file to link in the javascript file (accjax.js) and call the install_handlers function when the spreadsheet is loaded.
XUL Events - Archive of obsolete content
attribute: onkeyup load this event is sent to the window after it has been fully loaded.
Uploading and Downloading Files - Archive of obsolete content
when the user selects a file, it can be uploaded to a server.
addTabsProgressListener - Archive of obsolete content
« xul reference home addtabsprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents in all tabs in the tabbed browser.
addProgressListener - Archive of obsolete content
« xul reference home addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
loadGroup - Archive of obsolete content
this function returns a reference to the first tab loaded.
loadOneTab - Archive of obsolete content
parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab.
loadTabs - Archive of obsolete content
if loadinbackground is true, the tabs are loaded in the background, and if replace is true, the currently displayed tabs are replaced with the specified uris instead of adding new tabs.
PopupEvents - Archive of obsolete content
another situation is when the document is being unloaded.
contentPrincipal - Archive of obsolete content
« xul reference contentprincipal type: nsiprincipal this read-only property contains the principal for the content loaded in the browser, which provides security context information.
currentURI - Archive of obsolete content
« xul reference currenturi type: nsiuri this read-only property contains the currently loaded url.
datasources - Archive of obsolete content
in newer versions of mozilla (1.7+), the datasources will be reloaded and the template rebuilt.
securityUI - Archive of obsolete content
« xul reference securityui type: nsisecurebrowserui the read-only property holds an object which may be used to determine the security level of the loaded document.
Attribute Substitution - Archive of obsolete content
thus, if you use a variable set in a binding, you must ensure the datasource is loaded before the template is built, or just rebuild the template.
Static Content - Archive of obsolete content
so, if you're using menulists with templates and the data isn't displaying properly when the data hasn't loaded, try using a static menupopup.
XML Templates - Archive of obsolete content
an xml document will be loaded and xpath expressions may be used to take portions of the xml document and generate content from these.
Creating a Window - Archive of obsolete content
note that this url is never actually downloaded.
Introduction - Archive of obsolete content
for extensions, the xul files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user.
More Button Features - Archive of obsolete content
the image is loaded from the url, which can be a relative or absolute url, and then the image is displayed on the button.
More Event Handlers - Archive of obsolete content
this is because the xul elements may not have loaded or fully initialized yet, so some things may not work as expected.
Tree View Details - Archive of obsolete content
the 'init' function is called when the window is loaded to initialize the tree.
Using Visual Studio as your XUL IDE - Archive of obsolete content
to add the xul.xsd from the package that you have downloaded.
Writing Skinnable XUL and CSS - Archive of obsolete content
your css file should never import another skin file if your file is loaded by a xul overlay.
XUL Changes for Firefox 1.5 - Archive of obsolete content
the pageshow and pagehide events are used when switching from a page in the cache, while the load and unload events are used only when the page is loaded or unloaded.
XUL Questions and Answers - Archive of obsolete content
specifying window.onload function to specify a function to run when the window is loaded,add the following code between the script tags in the xul file: window.addeventlistener("load", function(e) { startup(); }, false); similarly, for onunload use the code: window.addeventlistener("unload", function(e) { shutdown(); }, false); is there an event which is called when the firefox browser is initialized?
XUL element attributes - Archive of obsolete content
when the xul document is contained on a remote web site, the datasources may only be loaded from the same domain as the document.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
however, this attribute causes any xul loaded in the browser to have issues with jaws 7.10.
XUL accessibility tool - Archive of obsolete content
once the tool window has loaded, select either a local file, web url, or currently open window from the file menu to generate a xul report for that document.
page - Archive of obsolete content
ArchiveMozillaXULpage
« xul reference home [ examples | attributes | properties | methods | related ] similar to a window, except it should be used for xul files that are to be loaded into an iframe.
toolbar - Archive of obsolete content
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() method.
window - Archive of obsolete content
disablefastfindtype: booleanput disablefastfind="true" on the root element of a xul document, which is intended to be loaded in a tab, to disable the find bar for the tab with this document.
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
building with a prebuilt sdk once you've downloaded the xulrunner sdk, you'll need a .mozconfig of your own.
Debugging a XULRunner Application - Archive of obsolete content
if your pages are not in the loaded script window, uncheck the menu item "debug\exclude browser files" and find them in open windows tab when opening a js file in venkman, the code is unformatted and i get the following error in the jsconsole...
Make your xulrunner app match the system locale - Archive of obsolete content
the first step is to get the code we're about to write to run before any of the locale specific resources are loaded.
XULRunner - Archive of obsolete content
releases until version 41, xulrunner could be downloaded from ftp.mozilla.org.
XUL Explorer - Archive of obsolete content
the xul can be loaded from and saved to files.
mozilla.dev.platform FAQ - Archive of obsolete content
a: have the browser.chromeurl preference - this should be a xul document containing a <browser type="content-primary"> element in which the popup window's content should get loaded.
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
eltnzer announced that 'users running the bon echo 20060921 nightly build will be offered the chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
2006-09-29 - Archive of obsolete content
eltnzer announced that 'users running the bon echo 20060921 nightly build will be offered the chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
2006-10-20 - Archive of obsolete content
question regarding how to make a firefox extension that would insert an image next to all links in the loaded web pages similar to the mcafee siteadvisor extension.
2006-11-10 - Archive of obsolete content
build problem firefox 2.0 on fc3 november 10th: vin downloaded the latest firefox 2 rc3 and tried to build it on fc3 with the following options: ./configure --enable-application=browser --prefix=$prefix --enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x2237): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonr...
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.l10n - november 17, 2006 announcements seamonkey 1.1b in russian (ru-ru) seamonkey 1.1b in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in russian (ru-ru) seamonkey 1.0.6 in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in czech (cs-cz) seamonkey 1.0.6 in czech (cs-cz) is uploaded to ftp.mozilla.org seamonkey 1.0.6 he-il seamonkey 1.0.6 he-il is released.
2006-11-17 - Archive of obsolete content
boaz discuses the evolution of web browsers towards a more "application mode" whereas a web browser is loaded for the sole purpose of running a given website.
NPN_DestroyStream - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
NPN_Evaluate - Archive of obsolete content
description the script is evaluated in the context of the window that the calling plugin instance (the <tt>npp</tt> argument) is loaded in.
NPN_GetURLNotify - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
NPN_GetValue - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
NPN NewStream - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
NPN_PostURLNotify - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
NPN_ReloadPlugins - Archive of obsolete content
if true, all pages are reloaded once the plugins are reloaded; otherwise, they aren't.
NPN_Version - Archive of obsolete content
a plug-in whose major version is less than the major version of the browser is not loaded.
NPP_Destroy - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
NPP_SetWindow - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
the unpack property is necessary to tell applications using newer versions of gecko to unpack the plugin because dlls can't be loaded from xpi files.
Supporting private browsing in plugins - Archive of obsolete content
potentially private information may include (but is not necessarily limited to) history information for downloaded data.
The First Install Problem - Archive of obsolete content
(note that the file name must still begin with "np", just as it must when the file is loaded from the .\plugins directory.) example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] path=c:\mycompany\myapplication\netscape\npmyapp.dll "xptpath" -- string value -- absolute path to xpt module required for scripting plug-in, if applicable example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/mya...
Proposal - Archive of obsolete content
the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically.
Introduction to Public-Key Cryptography - Archive of obsolete content
using certificates and digital signatures in this manner can also make it possible for users to identify and control the kind of access downloaded software has to their computers.
Using workers in extensions - Archive of obsolete content
the startup() method this method is called when the extension is first loaded, and needs to be updated to start up and configure the worker.
ECMAScript 2015 support in Mozilla - Archive of obsolete content
a pdf and html version of the standard can be freely downloaded on ecma-international.org.
LiveConnect - Archive of obsolete content
old liveconnect documents, broken links: java method overloading and liveconnect 3 the technique that liveconnect uses to invoke overloaded java methods from javascript.
Window.importDialog() - Archive of obsolete content
scripts are loaded via an attribute on the <dialog> element, not via the <script> tag.
Troubleshooting XForms Forms - Archive of obsolete content
if you are trying to submit to a different domain than the form is loaded from, make sure that you have allowed cross-domain submission for that specific "form domain".
Correctly Using Titles With External Stylesheets - Archive of obsolete content
thus, when the document is loaded, the browser will use all of the persistent stylesheets and one preferred stylesheet (but remember, there should only be one preferred stylesheet).
The Business Benefits of Web Standards - Archive of obsolete content
firefox alone has been downloaded more than 50 millions times in 6 months.
XQuery - Archive of obsolete content
xquseme is a working proof-of-concept (so far tested on windows and linux with java installed; mac does not work) extension which allows one to perform xqueries on external urls, the currently loaded webpage (even if originally from poorly formed html), and/or xml (including well-formed xhtml) documents stored locally.
Anatomy of a video game - Game development
high resolution time, on the other hand, counts the number of milliseconds since navigationstart (when the previous document is unloaded).
Introduction to game development for the Web - Game development
a great way to save game state and other information locally so it doesn't have to be downloaded every time it's needed.
Building up a basic demo with PlayCanvas editor - Game development
as you can see, the file contains some boilerplate code already: pc.script.create('boxanimation', function (app) { // creates a new boxanimation instance var boxanimation = function (entity) { this.entity = entity; }; boxanimation.prototype = { // called once after all resources are loaded and before the first update initialize: function () { }, // called every frame, dt is time in seconds since last update update: function (dt) { } }; return boxanimation; }); the most interesting part is the update() function, which is where we can put any code that we want repeated on every frame.
Implementing game control mechanisms - Game development
the src folder contains the javascript files split as a separate states — boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order.
Game over - Game development
when you click on the resulting alert, the page will be reloaded so you can play again.
Initialize the framework - Game development
preload takes care of preloading the assets create is executed once when everything is loaded and ready update is executed on every frame.
Load the assets and print them on screen - Game development
that's it — if you load your index.html file you will see the image already loaded and rendered on the canvas!
Certificate authority - MDN Web Docs Glossary: Definitions of Web-related terms
web browsers come preloaded with a list of certificate authorities trusted to issue digital certificates.
Compile time - MDN Web Docs Glossary: Definitions of Web-related terms
the compile time is the time from when the program is first loaded until the program is parsed.
Constructor - MDN Web Docs Glossary: Definitions of Web-related terms
syntax // this is a generic default constructor class default function default() { } // this is an overloaded constructor class overloaded // with parameter arguments function overloaded(arg1, arg2, ...,argn){ } to call the constructor of the class in javascript, use a new operator to assign a new object reference to a variable.
DOM (Document Object Model) - MDN Web Docs Glossary: Definitions of Web-related terms
the dom is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g.
Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded.
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
the time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the the size and complexity of the javascript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices).
First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
minimally interactive is defined as when some, but not necessarily all, ui elements on the page have loaded and are interactive, and, on average, respond to user input in a reasonable amount of time.
Function - MDN Web Docs Glossary: Definitions of Web-related terms
function loop(x) { if (x >= 10) return; loop(x + 1); }; //using ecmascript 2015 arrow notation const loop = x => { if (x >= 10) return; loop(x + 1); }; an immediately invoked function expressions (iife) is a function that is called directly after the function is loaded into the browser’s compiler.
Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view.
Media - MDN Web Docs Glossary: Definitions of Web-related terms
the term media is an overloaded one when talking about the web; it takes on different meanings depending on the context.
Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
also, pre-loaded websites and embedded content can set and read their cookies as if they were visited even if they weren't.
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
javascript is also downloaded, parsed, and then execute.
Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive.
Resource Timing - MDN Web Docs Glossary: Definitions of Web-related terms
the resource timing api is a javascript api that is able to capture timing information for each individual resource that is fetched when a page is loaded.
Same-origin policy - MDN Web Docs Glossary: Definitions of Web-related terms
the same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
author origin the author origin is the style origin which contains all of the styles which are part of the document, whether embedded within the html or loaded from an external stylesheet file.
Web performance - MDN Web Docs Glossary: Definitions of Web-related terms
objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web browser, and become responsive and interactive.
First Meaningful Paint - MDN Web Docs Glossary: Definitions of Web-related terms
first meaningful paint (fmp) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
it parses ahead while scripts are being downloaded and executed.
HTML: A good basis for accessibility - Learn web development
in this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine-generated file names (e.g.
HTML: A good basis for accessibility - Learn web development
in this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine-generated file names (e.g.
Mobile accessibility - Learn web development
conserving image sizes downloaded.
WAI-ARIA basics - Learn web development
dynamic content updates content loaded into the dom can be easily accessed using a screenreader, from textual content to alternative text attached to images.
Organizing your CSS - Learn web development
so for example, with partials, you could have several style files inside a directory, say foundation/_code.scss, foundation/_lists.scss, foundation/_footer.scss, foundation/_links.scss, etc., then use the sass @use role to load them into other stylesheets: // foundation/_index.sass @use 'code' @use 'lists' @use 'footer' @use 'links' if the partials are all loaded into an index file, as implied above, you can then load that entire directory into another stylesheet in one go: // style.sass @use 'foundation' note: a simple way to try out sass is to use codepen — you can enable sass for your css in the settings for a pen, and codepen will then run the sass parser for you, in order that you can see the resulting webpage with regular css applied.
Beginner's guide to media queries - Learn web development
it will not apply when the page is loaded in a browser.
Styling links - Learn web development
this is because if the real links were included, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get back from.) # just links to the current page.
Styling lists - Learn web development
if both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.
How do you set up a local testing server? - Learn web development
when it has downloaded, run it.
HTML forms in legacy browsers - Learn web development
here is an example: modernizr.load({ // this tests if your browser supports the html5 form validation api test : modernizr.formvalidation, // if the browser does not support it, the following polyfill is loaded nope : form-validation-api-polyfill.js, // in any case, your core app file that depends on that api is loaded both : app.js, // once both files are loaded, this function is called in order to initialize the app.
Other form controls - Learn web development
<progress max="100" value="75">75/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.
Styling web forms - Learn web development
if the fontsquirrel output was different to what we described above, you can find the correct @font-face blocks inside your downloaded webfont kit, in the stylesheet.css file (you'll need to replace the below @font-face blocks with them, and update the paths to the font files): @font-face { font-family: 'handwriting'; src: url('fonts/journal-webfont.woff2') format('woff2'), url('fonts/journal-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typewr...
HTML basics - Learn web development
this sets the title of your page, which is the title that appears in the browser tab the page is loaded in.
How the Web works - Learn web development
when a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.
Use JavaScript within a webpage - Learn web development
<script> window.addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major issue in any software development.
Getting started with HTML - Learn web development
this sets the title of the page, which is the title that appears in the browser tab the page is loaded in.
Introduction to HTML - Learn web development
metadata in html the head of an html document is the part that is not displayed in the web browser when the page is loaded.
Images in HTML - Learn web development
but if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in: this is a good thing to do, resulting in the page loading quicker and more smoothly.
From object to iframe — other embedding technologies - Learn web development
they do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.
Introducing asynchronous JavaScript - Learn web development
so you could have different actions to run on the response downloaded, such as processjson(), displaytext(), etc.
Introduction to events - Learn web development
in the case of the web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window.
What went wrong? Troubleshooting JavaScript - Learn web development
note: this error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkguess() { ...
JavaScript object basics - Learn web development
for each webpage loaded, an instance of document is created, called document, which represents the entire page's structure, content, and other features such as its url.
Working with JSON - Learn web development
ne wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] }, { "name": "eternal flame", "age": 1000000, "secretidentity": "unknown", "powers": [ "immortality", "heat immunity", "inferno", "teleportation", "interdimensional travel" ] } ] } if we loaded this object into a javascript program, parsed in a variable called superheroes for example, we could then access the data inside it using the same dot/bracket notation we looked at in the javascript object basics article.
Object-oriented JavaScript for beginners - Learn web development
with your finished exercise from the previous sections loaded in the browser, try this in your javascript console: let person2 = object.create(person1); now try these: person2.name; person2.greeting(); you'll see that person2 has been created based on person1—it has the same properties and method available to it.
Test your skills: JSON - Learn web development
the json is loaded into the page as a text string and made available in the catstring parameter of the displaycatinfo() function, called when the provided promise chain (which starts by fetching the json data) is fulfilled.
Web performance resources - Learn web development
to load css asynchronously one can simpy set the media type to print and then change to all once loaded.
The business case for web performance - Learn web development
the budget can be applied to a single file, a file type, all files loaded on a page, a specific metric, or a threshold over a period of time.the budget reflects reachable goals; whehter they are time, quantity, or rule based.
Getting started with Svelte - Learn web development
there are no other libraries loaded into the web page.
Handling common accessibility problems - Learn web development
once downloaded, install it — you double click the installer, accept the license and follow the prompts.
Introduction to automated testing - Learn web development
once loaded, you can perform live, interactive cross-browser testing with a website.
Handling common JavaScript problems - Learn web development
when it has loaded, we run the function we specified as the second argument (main()).
Client-side tooling overview - Learn web development
bundlers/packagers these are tools that get your code ready for production, for example by “tree-shaking” to make sure only the parts of your code libraries that you are actually using are put into your final production code, or "minifying" to remove all the whitespace in your production code, making it as small as possible before it is uploaded to a server.
Accessibility/LiveRegionDevGuide
this variable can then be used to quickly determine if an event was triggered by the document being loaded.
Embedding API for Accessibility
accepting special content on an instance basis after being notified of special content, the user needs to be able to select specific unloaded content for loading.
Gecko info for Windows accessibility vendors
page loading is tracked via state_change events when a new document is about to be loaded, an event_state_change occurs on the root role_document object for a window.
Links and Resources
this html advanced validator may also be downloaded from firefox add-ons: html validator.
Mozilla’s UAAG evaluation report
(p1) g preferences, advanced, scripts & windows - enable javascript for when toggled off, we don't notify the user when a page is loaded with scripts 3.5 toggle content refresh.
Command line options
-safe-mode launches the application with all extensions disabled, for that launch only (extensions are not loaded, but are not permanently disabled in the extension manager data source).
Creating a Language Pack
$ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.6b5pre.en-us.mac.dmg the en-us binary has been downloaded.
Creating reftest-based unit tests
testing invalidation testing that a document displays correctly once it has loaded is only one part of testing rendering.
Creating Sandboxed HTTP Connections
for cookies, the two topics are: http-on-modify-request - happens after the cookie data has been loaded into the request, but before the request is sent.
HTTP logging
other bugs may require all the logs to be uploaded--ask the developer if you're not sure.
Simple Thunderbird build
note that the downloaded outlook 2010 mapi header files contain 18 fies, of which only 17 are needed.
ESLint
my script is a frame-script, or includes items that loaded into content scripts: add a line to tell eslint to use the frame-script environment: /* eslint-env mozilla/frame-script */ my script is a worker: add a line to tell eslint to use the worker environment: /* eslint-env worker */ or, to use a chrome worker environment: /* eslint-env mozilla/chrome-worker */ my file u...
Eclipse CDT
if you've downloaded an eclipse developer build then you can use eclipse's software update mechanism to update your developer snapshot to the latest nightly for that developer branch.
Displaying Places information using views
second, know this: when it comes to trees, "view" is an overloaded word.
Index
in private browsing windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites.
Multiple Firefox profiles
windows in windows, the developer and nightly builds get their own directory in the "programs" folder, so you don't have to worry about where to store the downloaded files.
Partitioned: All third-party storage access requests
message firefox: cookiepartitionedforeign=partitioned cookie or storage access was provided to “<url>” because it is loaded in the third-party context and storage partitioning is enabled.
Site Identity Button
y looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.
mozbrowsercaretstatechanged
the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>.
mozbrowsermanifestchange
the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes.
mozbrowseropentab
details the details property returns an anonymous javascript object with the following properties: url a domstring representing the url of the new document loaded.
mozbrowseropenwindow
details the details property returns an anonymous javascript object with the following properties: url a domstring representing the url of the document loaded within the frameelement property.
CSS -moz-bool-pref() @supports function
example warning: this will only work when loaded from a gecko chrome stylesheet.
Embedding the editor
the problem with this ownership model is that there can be only one editor per <editor> tag, yet the document loaded in the <iframe> may itself contain multiple <iframe>s (consider a frameset document, or a document itself containing an <html:iframe>).
Gecko SDK
issues with the os x sdk if you need to use the xpidl utility to compile idl files on os x, it's likely that you will receive a strange error when running the tool that looks something along the lines of this: dyld: library not loaded: /opt/local/lib/libintl.3.dylib referenced from: /users/varmaa/xulrunner-sdk/bin/./xpidl reason: image not found trace/bpt trap unfortunately, this is caused by a problem with the sdk build process which cannot currently be resolved (see bugzilla bug #430274).
Addon
for an add-on that has not yet been downloaded, this may be an estimated value.
AddonInstall
this may be null if the add-on is coming from the internet and has yet to be downloaded.
UpdateInfo
updateurl string the updateurl that the update can be downloaded from.
Add-on Manager
any available update is returned as an addoninstall which is ready to be downloaded and installed.
CustomizableUI.jsm
onwidgetinstanceremoved(awidgetid, adocument) fired when a window is unloaded and a widget's instance is destroyed because of this.
DownloadList
this method finalizes each removed download, ensuring that any partially downloaded data associated with it is also removed.
Examples
http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + path + '" the width of this image is = "' + this.naturalwidth + '".'); if (!this.naturalwidth) { loadthisimagepromise.reject('image loaded but it has 0 width at path = "' + path + '" the naturalwidth was 0'); } } myimage.onerror = function(e) { loadthisimagepromise.reject('an error occured while loading path = "' + path + '".
source-editor.jsm
acallback a function that will be called when the editor has been fully loaded and initialized.
JavaScript code modules
xpcomutils.jsm contains utilities for javascript components loaded by the js component loader.
Localizing without a specialized tool
(read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (l10n-mozilla-1.9.2/x-testing/browser/chrome/browser) $ edit l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers.
Localization formats
for example, below is the entire introduction used for a certificate that was presented to those who downloaded firefox during the download day campaign.
Mozilla Web Developer FAQ
in versions prior to gecko 1.9/firefox 3, the document is not loaded and rendered incrementally.
Investigating leaks using DMD heap scan mode
you need the cycle collector analysis script find_roots.py, which can be downloaded as part of this repo on github.
DMD
first, you will need to push the libdmd.so library to the device so that it can by dynamically loaded by fennec.
Profiling with Concurrency Visualizer - Performance
in newer versions of visual studio, it is an addon that needs to be downloaded.
Profiling with the Firefox Profiler
symbols for try builds are not uploaded to the symbol server automatically, you need to trigger a "sym" job on treeherder: using treeherder's add new jobs ui, schedule a "sym" job for each platform whose "b" job you want symbols for.
Reporting a Performance Problem
once uploaded, copy permalink url to your clipboard by right clicking and add the profile url to a bug for your performance problem and/or send it to the appropriate person.
Phishing: a short definition
after all, the browser plays an essential role in the scheme: a fake website is loaded in a browser and here is the maker’s last chance to preventing fraud.
A brief guide to Mozilla preferences
on application launch, several preferences files are loaded.
nglayout.debug.disable_xul_cache
during development of xul applications, it’s convenient to disable the xul cache so that changes you make to files on disk take effect the next time the window or dialog is loaded (instead of the next time mozilla starts).
Preferences system
ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
Debugging out-of-memory problems
by the time about:memory is loaded in a new tab and you have clicked the "measure" button to diagnose what's happened, the memory usage causing the spike has gone away, making temporary memory spikes difficult to diagnose.
Emscripten techniques
by the time about:memory is loaded in a new tab and you have clicked the "measure" button to diagnose what's happened, the memory usage causing the spike has gone away, making temporary memory spikes difficult to diagnose.
Dynamic Library Linking
it also provides a method by which to condition symbols of statically linked code so that to other clients it appears as though they are dynamically loaded.
PL_HashTableAdd
it doubles the number of buckets if the table is overloaded.
PL_HashTableRemove
if the table is underloaded, pl_hashtableremove also shrinks the number of buckets by half.
PR_Connect
if pr_connect is invoked on a udp socket, it has an overloaded meaning: pr_connect merely saves the specified address as the default peer address for the socket, so that subsequently one can send and receive datagrams from the socket using pr_send and pr_recv instead of the usual pr_sendto and pr_recvfrom.
PR_GetLibraryName
the constructed path name refers to the actual dynamically loaded library.
PR_LoadLibrary
syntax #include <prlink.h> prlibrary* pr_loadlibrary(const char *name); parameters the function has this parameter: name a platform-dependent character array that names the library to be loaded, as returned by pr_getlibraryname.
PR_UnloadLibrary
unloads a library loaded with pr_loadlibrary.
Running NSPR tests
since none of our operating systems is a real-time os, such test programs may fail when the test machine is heavily loaded.
Introduction to Network Security Services
platform for 32-bit cpus for 64-bit cpus solaris/sparc libfreebl_pure32_3.so libfreebl_hybrid_3.so hpux/parisc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a future release) libfreebl_pure32_3_shr.a libfreebl_hybrid_3_shr.a an application should not link against these libraries, because they are dynamically loaded by nss at run time.
JSS
MozillaProjectsNSSJSS
read using jss to get you started with development after you've built and downloaded it.
NSS 3.14.2 release notes
bug 816853 - when using libpkix for certificate validation, applications may now supply additional application-defined trust anchors to be used in addition to those from loaded security tokens, rather than as an alternative to.
NSS 3.14 release notes
nss 3.14 source tarballs can be downloaded from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_rtm/src/.
NSS 3.18 release notes
a pkcs#11 library that contains root ca certificates can be loaded by tstclnt, which may either be the nssckbi library provided by nss (-b) or another compatible library (-r).
NSS 3.21 release notes
the module represented by the module structure is not loaded.
NSS Sample Code Sample1
eypublickey **pubkey); int wrapkey(pk11symkey *key, seckeypublickey *pubkey, secitem **data); // export raw key (unwrapped) do not use int rawexportkey(pk11symkey *key, secitem **data); char *mservername; // these items represent data that might be stored // in files or in a configuration file secitem *mwrappedenckey; secitem *mwrappedmackey; // these are the runtime keys as loaded from the files pk11symkey *menckey; pk11symkey *mmackey; }; server::server(const char *servername) : mservername(0), mwrappedenckey(0), mwrappedmackey(0), menckey(0), mmackey(0) { // copy the server name mservername = pl_strdup(servername); } server::~server() { if (mservername) pl_strfree(mservername); if (mwrappedenckey) secitem_freeitem(mwrappedenckey, pr_true); if (mwrappedm...
NSS Third-Party Code
compiled in sqlite [/lib/sqlite] berkleydb [/lib/dbm] zlib [/lib/zlib] libjar [/lib/jar] fiat-crypto, ring [lib/freebl/ecl] used for tests gtest [/gtests] downloaded by certain test tooling tlsfuzzer [/tests/tlsfuzzer] bogo tests [/tests/bogo] boringssl, openssl [/tests/interop] ...
PKCS11 Implement
if a certificate is loaded, the value of the certificate's cka_id attribute must match the value of the cka_id attribute for the corresponding private key, and the value of the certificate's cka_label attribute must also match the value of the cka_label attribute for the private key.
Python binding for NSS
certificate() constructor signature changed from certificate(data=none, der_is_signed=true) to certificate(data, certdb=cert_get_default_certdb(), perm=false, nickname=none) this change was necessary because all certs should be added to the nss temporary database when they are loaded, but earlier code failed to to that.
NSS environment variables
nss_memory_allocation 3.4 nss_disable_unload string (any non-empty value) disable unloading of dynamically loaded nss shared libraries during shutdown.
NSS tools : certutil
* if there are multiple security devices loaded, then the -h tokenname argument can search a specific token or all tokens.
sslerr.html
sec_error_duplicate_cert_name -8169 downloaded certificate's name duplicates one already in your database.
certutil
o if there are multiple security devices loaded, then the -h tokenname argument can search a specific token or all tokens.
Network Security Services
pkcs #11 information documentation on pkcs #11 modules implementing pkcs #11 for nss the strings nss uses to load pkcs #11 modules pkcs #11 faq using the jar installation manager to install a pkcs #11 cryptographic module pkcs #11 conformance testing - archived version ca certificates pre-loaded into nss mozilla ca certificate policy list of pre-loaded ca certificates consumers of this list must consider the trust bit setting for each included root certificate.
Necko Architecture
necko has been designed to accommodate pluggable protocols so developers can contribute their own protocol libraries that can be dynamically loaded and used by applications utilizing necko.
Necko Interfaces Overview
tp) maps uri string to nsiuri instance via newuri method creates nsichannel instance from nsiuri instance via newchannel method nsistreamlistener : nsirequestobserver implemented by the consumer of a nsichannel instance passed to nsichannel::asyncopen method nsirequestobserver::onstartrequest - notifies start of async download nsistreamlistener::ondataavailable - notifies presence of downloaded data nsirequestobserver::onstoprequest - notifies completion of async download, possibly w/ error nsiloadgroup : nsirequest attribute of a nsirequest channel impl adds itself to its load group during invocation of asyncopen channel impl removes itself from its load group when download completes load groups in gecko own all channels used to load a particular page (until the channels comple...
Rhino Debugger
the loaded script will be run in a new thread and control will be given to the debugger on its first instruction.
Rhino history
the classfile generation code was moved to an optional, dynamically-loaded package.
Rhino JavaScript compiler
the resulting java class files can then be loaded and executed at another time, providing a convenient method for transferring javascript, and for avoiding translation cost.
Rhino overview
when the class was defined and loaded, the appropriate security domain was associated with it, and can be retrieved by calling this method.
Shumway
once your flash content is loaded, you can see how shumway manages it in detail.
Creating JavaScript tests
these tests will also show up as infrequent oranges on our heavily loaded test machines, lowering the value of our test suite for everyone.
Hacking Tips
u came from with the following set of gdb commands: (gdb) record full (gdb) si (gdb) record goto 0 (gdb) record stop if you have a core file, you can use the gdb unwinder the same way, or do everything from the command line as follow: $ gdb -ex 'enable unwinder .* spidermonkey' -ex 'bt 0' -ex 'thread apply all backtrace' -ex 'quit' out/dist/bin/js corefile the gdb unwinder is supposed to be loaded by dist/bin/js-gdb.py and load python scripts which are located in js/src/gdb/mozilla under gdb.
Index
that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
Functions
but a with block can: function f(s) { eval(s); print(s); // s can be loaded with getarg with (obj) { print(s); // no getarg here; s might refer to obj.s } } upvar instructions.
Introduction to the JavaScript shell
this function only works with programs loaded from files, either using the -f flag on launching the shell, or by using the load() function.
JSClass.flags
it results in finalization work being offloaded to another thread which improves performance.
JSObjectOps.lookupProperty
the jsobjectops.lookupproperty callback is called for every property access (except when a higher-level callback, such as jsobjectops.getproperty, is overloaded in a way that does not call lookupproperty).
SpiderMonkey 52
that will open a small window in the bottom left with a line like "artifact uploaded:mozjs-52.x.y.tar.bz2".
SpiderMonkey releases
that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
WebReplayRoadmap
recordings can be uploaded, and cloud services can locate the correct build and os needed to replay them.
Setting up an update server
<?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every file that's part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that cont...
Gecko events
is supported: yes event_document_reload the document contents are being reloaded.
Manipulating bookmarks using Places
id, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: function() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Using the Places annotation service
uri's are easier to use for services that want to annotate a web page loaded in the browser, while id's are easier to use for services already working with the places database.
Using the Places favicon service
the expiration time is only used to determine whether data should be reloaded from the network (or cache) or whether the version in the database is fresh enough.
FUEL
cts extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
STEEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
extIApplication
xpcom although the application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
Creating a Python XPCOM component
this is not necessary when your components are loaded by mozilla as the python loader modifies sys.path.
XPCOM glue
MozillaTechXPCOMGlue
this is the case for xpcom components, because they are loaded into mozilla which already has full xpcom loaded and initialized.
Component Internals
"native" here includes any language that can generate a platform native dynamically loaded library.
Using XPCOM Utilities to Make Things Easier
in a debugging environment, this string will be printed to the screen when the component library is loaded or unloaded.
Components.utils.importGlobalProperties
the downside of using hiddendomwindow is that on startup of firefox, the hiddendomwindow objects cannot be accessed until it is fully loaded.
Components.utils
unload() unloads a js module loaded with import().
Components.utils.unload
example you can unload a module called mymodule.jsm using the following line of code: components.utils.unload("resource://myaddon/modules/mymodule.jsm"); note: currently components.utils.unload clears the global object of an unloaded module.
NS_InitXPCOM3
this can be a performance improvement over dynamically loaded xpcom modules.
imgICache
findentryproperties() find properties used to get properties such as 'type' and 'content-disposition' 'type' is a nsisupportscstring containing the images' mime type such as 'image/png' 'content-disposition' will be a nsisupportscstring containing the header if you call this before any data has been loaded from a uri, it will succeed, but come back empty.
mozIAsyncFavicons
afaviconloadtype set to nsifaviconservice.favicon_load_private if the favicon is loaded from a private browsing window.
mozIStorageConnection
this preload operation can dramatically speed up read operations because the data is loaded as one large block.
nsIAccessibleEvent
event_document_reload 0x002c 0x0028 the document contents are being reloaded.
nsIAlertsService
if true, the image url will be loaded in private browsing mode.
nsIAppStartup
event identifier (key) description main time at which main application core was loaded.
nsIApplicationCacheNamespace
namespace_fallback 2 items matching this namespace can be fetched from the network when loading from this cache; however, if the load fails, the cache entry specified by the data attribute should be loaded intstead.
nsIChannel
used by the security manager to grant or deny privileges to mobile code loaded from this channel.
nsIChannelPolicy
loadtype unsigned long indicates what type of content is being loaded, for example nsicontentpolicy::type_image.
nsIChromeFrameMessageManager
aallowdelayedload if true, the script will be loaded when the remote frame becomes available; otherwise, the script will only be loaded if the frame is already available.
nsIComponentManager
if you're targeting gecko 10 or higher there should be no need to call this method, since the bootstrapped add-on's chrome.manifest is loaded automatically now.
nsIContentFrameMessageManager
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisyncmessagesender this interface provides the environment for scripts that are loaded into content frames using the nsiframescriptloader interface.
nsIContentSecurityPolicy
shouldload() delegate method called by the service when sub-elements of the protected document are being loaded.
nsICookiePermission
afirsturi the uri initiated by the user that resulted in auri being loaded.
nsIDOMFile
this allows the file reference to be saved when the form is submitted while the user is using a web application offline, so that the data can be retrieved and uploaded once the internet connection is restored.
nsIDOMFontFace
uri domstring null if not a downloaded font, that is local.
nsIDOMHTMLSourceElement
note that dynamically manipulating this value after the page has loaded has no effect on the containing element; instead, change the src attribute of that element (audio or video) instead.
nsIDOMWindowInternal
if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring url, in domstring name, in domstring options) nsidomwindow nsisupports aextraargument) void close() void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean backwards, [optional] in boolean wraparound, [optional] in boolean wholewor...
nsIEditorDocShell
methods makeeditable() make this docshell editable, setting a flag that causes an editor to get created, either immediately, or after a url has been loaded.
nsIFocusManager
this will always be an element within the document loaded in focusedwindow or null if no element in that document is focused.
nsIFrameLoader
native code only!updatepositionandsize updates the position and size of the subdocument loaded by this frameloader.
nsIGlobalHistory2
atoplevel whether the uri is loaded in a top-level window.
nsIGlobalHistory3
atoplevel whether the uri is loaded in a top-level window.
nsILivemarkService
void reloadlivemarkfolder( in long long folderid ); parameters folderid the id of the folder to be reloaded.
nsIMacDockSupport
note: the hidden window of firefox (services.appshel.hiddendomwindow) loads on browser startup, so if you would like to access it on startup of the browser make sure to check and wait for the window to be loaded.
nsIMessenger
unfortunately, you must call this before navigating to a position, because calling this has the side effect of making us adjust our current history position, and not adding the loaded message to the history queue.
nsIMicrosummary
may need to be loaded.
nsIMicrosummaryGenerator
s from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview long calculateupdateinterval(in nsidomnode apagecontent); boolean equals(in nsimicrosummarygenerator aother); astring generatemicrosummary(in nsidomnode apagecontent); attributes attribute type description loaded boolean has the generator itself (which may be a remote resource) been loaded.
Building an Account Manager Extension
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://messenger/skin/accountmanage.css" type="text/css"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="parent.onpanelloaded('am-devmo-account.xul');"> <script type="application/javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chrome://example@mozilla.org/content/am-devmo-account.js"/> <dialogheader title="devmo example panel"/> <description> this panel is only shown in imap accounts...
nsIMsgAccountManagerExtension
return value a true indicates, that the account manager can display the panel for the given account, while false prevents the panel to be loaded.
nsIMsgWindow
void stopurls(); closewindow() when the msg window is being unloaded from the content window, this notification can be used to force a flush on anything the message window hangs on.
nsIPluginHost
void reloadplugins( in boolean reloadpages ); parameters reloadpages indicates whether currently visible pages should also be reloaded.
nsISHEntry
owner nsisupports get the owner, if any, that was associated with the channel that the document that was loaded to create this history entry came from.
nsITelemetry
(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsval snapshotcapturedstacks([optional] in boolean clear); nsisupports getloadedmodules(); jsval snapshotkeyedhistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in boolean enabled); void asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalaradd(in acstring aname, in jsval avalue); void scala...
nsIWebBrowser
the embedder may set this property to their own implementation if they intend to override or prevent how certain kinds of content are loaded.
nsIWebBrowserChrome
webbrowser nsiwebbrowser the currently loaded webbrowser.
nsIWebProgress
isloadingdocument prbool indicates whether or not a document is currently being loaded in the context of this nsiwebprogress instance.
nsIWindowMediator
ndow) { // wait for the window to finish loading let domwindow = awindow.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidomwindowinternal || ci.nsidomwindow); domwindow.addeventlistener("load", function () { domwindow.removeeventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire alert in that window if (domwindow.gbrowser && domwindow.gbrowser.tabcontainer) { domwindow.gbrowser.tabcontainer.addeventlistener('tabselect', function () { domwindow.alert('tab was selected') }, false); } }...
nsIXULTemplateBuilder
may be null if the datasource has not been loaded yet.
Using nsIDirectoryService
since it was a component and was loaded implicitly by many other components, it was difficult to customize.
Using the Gecko SDK
(<tt>about:buildconfig</tt> can be loaded in mozilla to reveal details about the compiler that was used.) for the remainder of this guide, we'll assume you are developing components under linux.
Using the clipboard
// import the services module for future use, if we're not in // a browser window where it's already loaded.
XPCOM category image-sniffing-services
if mozilla's built-in image code cannot identify an image, then any xpcom components implementing the nsicontentsniffer interface may register under the "image-sniffing-services" category, and will be queried to determine the mime type of the image being downloaded.
XSLT 2.0
for users saxon-ce no extensions are required, saxon-ce runs whenever a html page is loaded that links to the saxon-ce javascript library.
Address Book examples
for example, in order to register a load listener for a contact, the following should take place within the scope of the contact editor dialog: /* an example load listener for a contact * acard the nsiabcard being loaded * adocument a reference to the contact editor document */ function foo(acard, adocument) { // do something useful, like disabling // input fields that cards for this // address book type do not support.
Filelink Providers
that url is then loaded into an iframe directly beneath the provider menulist.
Index
55 thunderbird binaries branch, trunk, comm-central, thunderbird described below are three types of generally available thunderbird packages - releases, early preview releases, and nightly builds (including trunk development builds) - and their downloaded locations.
MailNews Filters
after the fact filters these are one or more filters run on one or more folders *after* the headers have been downloaded.
Mail and RDF
what else do we store?) datasources are created when each window's javascript is loaded by declaring the datasource variables in the source javascript as global variables.
Mail composition back end
const struct nsmsgattachedfile *preloaded_attachments, - attachments that are already locally stored on disk (note: both attachments and preloaded_attachments cannot be specified on a single call void *relatedpart /* nsmsgsendpart */, - a related part for multipart related operations nsimsgsendlistener **alistenerarray) = 0; - an array of listeners for ...
Access Thunderbird Window Areas
var foldertree = getfoldertree(); var searchinput = getsearchinput(); var messagepane = getmessagepane(); var messagepaneframe = getmessagepaneframe(); var mailtoolbox = getmailtoolbox(); var currentmsgfolder = getloadedmsgfolder(); see the msgmail3panewindow.js for other helper methods ...
customDBHeaders Preference
forrow: function(hdr) {return 0;} } function addcustomcolumnhandler() { gdbview.addcolumnhandler("colsuperfluous",columnhandler); dump("column handler being added: " + columnhandler + "\n"); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { dump("here here!"); addcustomcolumnhandler(); } } function doonceloaded(){ var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); window.document.getelementbyid('foldertree').addeventlistener("select",addcustomcolumnhandler,false); } window.addeventlistener("load",doonceloaded,false); dump(" ~ ~ ~ ~ end superfluou...
Using the Multiple Accounts API
ver.server.namespace.personal - the server's namespace for personal folders preference: mail.server.server.namespace.other_users - the server's namespace for other user's folders the following are specific to pop: the following are specific to news: preference: mail.server.server.leave_on_server - boolean, should we leave messages on the server after we have downloaded them?
libmime content type handlers
api's content type handler plugins are dynamically loaded and need to access internal pointers, functions that are part of the c based object system.
Add to iPhoto
downloading the image the downloadimage() method handles actually downloading the image to a temporary file; it then returns the local pathname of the downloaded file to the caller.
Library
the library object represents a native library loaded by the ctypes open() method.
ctypes
the library is loaded from the specified full path, or, if a partial path is specified, from the appropriate library directory based on the platform on which the application is running.
Mozilla
this means that every time an uri is loaded, mozilla must find out its mime type.
Blocking By Domain - Plugins
third-party plugin block list sites on this list may not use plugins when they are loaded into a third-party iframe in another site.
Drawing and Event Handling - Plugins
the npwindow structure when a plug-in is loaded, it is drawn into a target area.
Streams - Plugins
in general, this mode is more expensive, because the entire stream must be downloaded to a temporary file before use unless the stream comes from a local file or an http server that supports the byte-range extension to http.
Preferences System
ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
Accessibility Inspector - Firefox Developer Tools
print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility tab and selecting print to json: when you do, you will get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary.
Browser Toolbox - Firefox Developer Tools
you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false): click ok, and the browser toolbox will open in its own window: you'll be able to inspect the browser's chrome windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any add-ons that are running.
Search - Firefox Developer Tools
you can use the up and down arrows to move through the list, and return to open the file you want: searching within a file to search for a particular substring in the file currently loaded into the source pane, press control + f (or command + f on a mac) while the source pane is focused.
Use a source map - Firefox Developer Tools
in these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded.
Debugger.Script - Firefox Developer Tools
url if the instance refers to a jsscript, the filename or url from which this script’s code was loaded.
Debugger - Firefox Developer Tools
onnewscript(script,global) new code, represented by the debugger.script instancescript, has been loaded in the scope of the debuggees.
Debugger-API - Firefox Developer Tools
you can set functions to be called when new stack frames are pushed; when new code is loaded; and so on.
Index - Firefox Developer Tools
this tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.
Network request list - Firefox Developer Tools
starting in firefox 45, the timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered.
Page Inspector - Firefox Developer Tools
you can examine pages loaded in the local copy of firefox or in a remote target such as firefox for android.
UI Tour - Firefox Developer Tools
access the settings popup recordings pane the recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.
Waterfall - Firefox Developer Tools
domcontentloaded the document's domcontentloaded event.
Web Audio Editor - Firefox Developer Tools
two good demos are: the voice-change-o-matic, which can apply various effects to the microphone input and also provides a visualisation of the result the violent theremin, which changes the pitch and volume of a sine wave as you move the mouse pointer visualizing the graph the web audio editor will now display the graph for the loaded audio context.
Firefox Developer Tools
network monitor see the network requests made when a page is loaded.
AbstractWorker - Web APIs
var myworker = new worker('worker.js'); first.onchange = function() { myworker.postmessage([first.value, second.value]); console.log('message posted to worker'); } the worker's code is loaded from the file "worker.js".
AudioContext.createMediaStreamSource() - Web APIs
); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadf...
AudioContext.createMediaStreamTrackSource() - Web APIs
navigator.mediadevices.getusermedia ({audio: true, video: false}) .then(function(stream) { audio.srcobject = stream; audio.onloadedmetadata = function(e) { audio.play(); audio.muted = true; }; let audioctx = new audiocontext(); let source = audioctx.createmediastreamsource(stream); let biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 3000; biquadfilter.gain.value = 20; source.connect(biquadfilter); biquadfilter.connect(audioctx.destinatio...
BaseAudioContext.decodeAudioData() - Web APIs
in this case the arraybuffer is loaded from xmlhttprequest and filereader.
BaseAudioContext - Web APIs
in this case, the arraybuffer is usually loaded from an xmlhttprequest's response attribute after setting the responsetype to arraybuffer.
Beacon API - Web APIs
requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request (for example xmlhttprequest).
BeforeUnloadEvent - Web APIs
the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
Body.arrayBuffer() - Web APIs
WebAPIBodyarrayBuffer
note that before playing full audio file will be downloaded.
CanvasRenderingContext2D.getImageData() - Web APIs
securityerror the canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded.
Manipulating video using canvas - Web APIs
canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
Basic usage of canvas - Web APIs
this function, or one like it, could also be called using window.settimeout(), window.setinterval(), or any other event handler, as long as the page has been loaded first.
Using channel messaging - Web APIs
when the iframe has loaded, we register an onclick handler for our button and an onmessage handler for messagechannel.port1.
CloseEvent - Web APIs
it is overloaded and is casting off some of its clients.
Content Index API - Web APIs
examples could be a news website prefetching the latest articles in the background, or a content streaming app registering downloaded content.
ConvolverNode.normalize - Web APIs
its default value is true in order to achieve a more uniform output level from the convolver, when loaded with diverse impulse responses.
DataTransfer.clearData() - Web APIs
an> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dr...
Document() - Web APIs
WebAPIDocumentDocument
the document constructor creates a new document object that is a web page loaded in the browser and serving as an entry point into the page's content.
Document.open() - Web APIs
WebAPIDocumentopen
document.open(); document.write("<p>hello world!</p>"); document.write("<p>i am a fish</p>"); document.write("<p>the number is 42</p>"); document.close(); notes an automatic document.open() call happens when document.write() is called after the page has loaded.
Document: readystatechange event - Web APIs
click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'readystatechange' in that specification.
Document.requestStorageAccess() - Web APIs
note: if the requesting origin is not classified as a tracking origin, the access request is automatically given an ephemeral storage access grant, which will go away when the page is reloaded.
Document.title - Web APIs
WebAPIDocumenttitle
in xul, accessing document.title before the document is fully loaded has undefined behavior: document.title may return an empty string and setting document.title may have no effect.
Document.visibilityState - Web APIs
it is useful to know if the document is in the background or an invisible tab, or only loaded for pre-rendering.
Examples of web and XML development using the DOM - Web APIs
"pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
How to create a DOM tree - Web APIs
another application is that, since xul is xml, the ui of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.
Element.innerHTML - Web APIs
WebAPIElementinnerHTML
usage notes the innerhtml property can be used to examine the current html source of the page, including any changes that have been made since the page was initially loaded.
FetchEvent.isReload - Web APIs
syntax var reloaded = fetchevent.isreload value a boolean.
FileReader: abort event - Web APIs
log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); ...
FileReader: load event - Web APIs
log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); ...
FileReader: loadend event - Web APIs
log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); ...
FileReader: loadstart event - Web APIs
log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); ...
FileReader: progress event - Web APIs
log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); ...
FileSystemDirectoryEntry.getDirectory() - Web APIs
when that is loaded successfully (as indicated by the loadend event being fired), the loaded text is passed into json.parse() to be reconstituted into a javascript object.
FileSystemDirectoryEntry.getFile() - Web APIs
when that is loaded successfully (as indicated by the loadend event being fired), the loaded text is passed into json.parse() to be reconstituted into a javascript object.
FileSystemFileEntry.file() - Web APIs
the filereader's load event handler is set up to deliver the loaded string to the successcallback specified when the readfile() method was called; similarly, its error handler is set up to call the errorcallback specified.
FileHandle API - Web APIs
var progress = document.queryselector('progress'); var myfile = myfilehandle.open('readonly'); // let's read a 1gb file var action = myfile.readasarraybuffer(1000000000); action.onprogress = function (event) { if (progress) { progress.value = event.loaded; progress.max = event.total; } } action.onsuccess = function () { console.log('yeah \o/ just read a 1gb file'); } action.onerror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "temporary file" as long as you hold the filehandle instance.
Introduction to the File and Directory Entries API - Web APIs
the app can access partially downloaded files (so that you can watch the first chapter of your dvd, even if the app is still downloading the rest of the content or if the app didn't complete the download because you had to run to catch a train).
FontFace.FontFace() - Web APIs
WebAPIFontFaceFontFace
it can have the following keys: family: family style: style weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface constructor' in that specification.
FontFaceSet.check() - Web APIs
WebAPIFontFaceSetcheck
the check() method of the fontfaceset returns whether all fonts in the given font list have been loaded and are available.
Using FormData Objects - Web APIs
m = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.preventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call.
Guide to the Fullscreen API - Web APIs
view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key.
Using the Gamepad API - Web APIs
if a gamepad is already connected when the page loaded, the gamepadconnected event is dispatched to the focused page when the user presses a button or moves an axis.
GlobalEventHandlers.oncanplay - Web APIs
the canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
GlobalEventHandlers.oncanplaythrough - Web APIs
the canplaythrough event is fired when the user agent can play the media and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
GlobalEventHandlers.onemptied - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
GlobalEventHandlers.onerror - Web APIs
notes when an error occurs in a script, loaded from a different origin, the details of the error are not reported to prevent leaking information (see bug 363897).
GlobalEventHandlers.onloadend - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); ...
GlobalEventHandlers.onloadstart - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment html living standardthe definition of 'onloadstart' in that specification.
HTMLAnchorElement.download - Web APIs
the htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
HTMLAnchorElement - Web APIs
htmlanchorelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
HTMLAreaElement - Web APIs
htmlareaelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
Audio() - Web APIs
determining when playback can begin there are three ways you can tell when enough of the audio file has loaded to allow playback to begin: check the value of the readystate property.
HTMLAudioElement - Web APIs
this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.addeventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip }) events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement.
HTMLButtonElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLCanvasElement.toDataURL() - Web APIs
exceptions securityerror the canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.
HTMLIFrameElement - Web APIs
via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 65), chromium-based browsers, and safari/ios.
Image() - Web APIs
usage note the entire bitmap is loaded regardless of the sizes specified in the constructor.
HTMLInputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLLinkElement.as - Web APIs
the as property of the htmllinkelement interface returns a domstring representing the type of content being loaded by the html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch".
HTMLLinkElement - Web APIs
htmllinkelement.as is a domstring representing the type of content being loaded by the html link.
HTMLMediaElement: abort event - Web APIs
the abort event is fired when the resource was not fully loaded, but not as the result of an error.
HTMLMediaElement.autoplay - Web APIs
syntax htmlmediaelement.autoplay = true | false; var autoplay = htmlmediaelement.autoplay; value a boolean whose value is true if the media element will begin playback as soon as enough content has loaded to allow it to do so without interruption.
HTMLMediaElement: canplay event - Web APIs
the canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
HTMLMediaElement: canplaythrough event - Web APIs
the canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
HTMLMediaElement: emptied event - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
HTMLMediaElement: error event - Web APIs
the error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).
HTMLMediaElement.play() - Web APIs
usage notes although the term "autoplay" is usually thought of as referring to pages that immediately begin playing media upon being loaded, web browsers' autoplay policies also apply to any script-initiated playback of media, including calls to play().
HTMLMeterElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
Option() - Web APIs
so that this <option> will be the default value selected in the <select> element when the page is first loaded.
HTMLOutputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLProgressElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLScriptElement - Web APIs
cripttohead(url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.head.appendchild(newscript); newscript.src = url; } sample usage: affixscripttohead("myscript1.js"); affixscripttohead("myscript2.js", function () { alert("the script \"myscript2.js\" has been correctly loaded."); }); specifications specification status comment html living standardthe definition of 'htmlscriptelement' in that specification.
HTMLSelectElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.options - Web APIs
example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification.
HTMLTextAreaElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLVideoElement.msIsStereo3D - Web APIs
msisstereo3d is a read-only property which determines whether the system considers the loaded video source to be stereo 3-d or not.
HTMLVideoElement - Web APIs
htmlvideoelement.msisstereo3d read only determines whether the system considers the loaded video source to be stereo 3-d or not.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
several windows loaded from the same origin may be running on the same event loop, each queueing tasks onto the event loop so that their tasks take turns with the processor, one after another.
The HTML DOM API - Web APIs
among the things added to document by the html standard are: support for accessing various information provided by the http headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth.
HTML Drag and Drop API - Web APIs
identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute reference drag operations guide define the drag's data the application is ...
Working with the History API - Web APIs
the popstate event won't be fired because the page has been reloaded.
History API - Web APIs
ments // both have the effect of // refreshing the page window.history.go(0) window.history.go() you can determine the number of pages in the history stack by looking at the value of the length property: let numberofentries = window.history.length interfaces history allows manipulation of the browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).
IDBCursor.continuePrimaryKey() - Web APIs
calling this method more than once before new cursor data has been loaded - for example, calling continueprimarykey() twice from the same onsuccess handler - results in an invalidstateerror being thrown on the second call because the cursor’s got value flag has been unset.
IDBObjectStore.createIndex() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
IDBObjectStore.deleteIndex() - Web APIs
example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
IDBOpenDBRequest - Web APIs
example in the following example you can see the onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
IntersectionObserver - Web APIs
if (entries[0].intersectionratio <= 0) return; loaditems(10); console.log('loaded new items'); }); // start observing intersectionobserver.observe(document.queryselector('.scrollerfooter')); specifications specification status comment intersection observerthe definition of 'intersectionobserver' in that specification.
MediaStream.onaddtrack - Web APIs
this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
MediaStream.onremovetrack - Web APIs
this event is fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
MediaStreamAudioSourceNode - Web APIs
); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadf...
MediaStreamTrackAudioSourceNode - Web APIs
); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadf...
Recording a media element - Web APIs
while the download attribute can be a boolean, you can also set it to a string to use as the name for the downloaded file.
MerchantValidationEvent.validationURL - Web APIs
once this has been loaded, it should be passed into complete(), either directly or using a promise.
MessageChannel - Web APIs
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.
MessagePort - Web APIs
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.
Navigator.sendBeacon() - Web APIs
description this method is for analytics and diagnostics that send data to a server before the document is unloaded, where sending the data any sooner may miss some possible data collection.
PageTransitionEvent.persisted - Web APIs
syntax window.addeventlistener('pageshow', function(event) { if (event.persisted) { console.log('page was loaded from cache.'); } }); value a boolean.
PageTransitionEvent - Web APIs
the pagetransitionevent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded.
PaintWorklet.registerPaint - Web APIs
the file itself is loaded through css.paintworklet.addmodule() (documented here on the parent class of paintworklet, at worklet.addmodule().
PaymentRequest.show() - Web APIs
only one payment panel may be visible at a time across all documents loaded by the user agent.
Payment processing concepts - Web APIs
by then delivering this data (or a promise which resolves to the loaded data) to the payment handler by passing it into complete(), the payment handler can use the retrieved data and whatever algorithm and other data to support in order to verify that the merchant can use the payment handler.
Using the Payment Request API - Web APIs
// the page has loaded.
PerformanceEventTiming - Web APIs
this typically happens when a // page is loaded in a background tab.
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties ...
PerformanceNavigationTiming.loadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties ...
PerformanceNavigationTiming.loadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
PerformanceNavigationTiming.type - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
PerformanceNavigationTiming.unloadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
PerformanceNavigationTiming.unloadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties c...
PerformanceTiming.domInteractive - Web APIs
nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts.
Using the Permissions API - Web APIs
"denied" the "enable geolocation" button is revealed (this code needs to be here too, in case the permission state is already set to denied for this origin when the page is first loaded).
Push API - Web APIs
WebAPIPush API
the push api gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent.
RTCRtpReceiver.getCapabilities() static function - Web APIs
nothing is loaded, fetched, or otherwise prepared.
RTCRtpSender.getCapabilities() static function - Web APIs
nothing is loaded, fetched, or otherwise prepared.
Resource Timing API - Web APIs
if the resource is loaded via a secure connection a secureconnectionstart timestamp will be available between the connection start and end events.
SVGElement: error event - Web APIs
bubbles yes cancelable no interface svgevent event handler property onerror examples svgelem.addeventlistener('error', () => { console.log('svg not loaded properly.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'error' in that specification.
SVGElement: unload event - Web APIs
bubbles no cancelable no interface svgevent event handler property onunload examples svgelem.addeventlistener('unload', () => { console.log('svg unloaded.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'unload' in that specification.
SVGElement - Web APIs
load fires on an svgelement when it is loaded in the browser.
Using the Screen Capture API - Web APIs
for example, this line in the http headers will enable screen capture api for the document and any embedded <iframe> elements that are loaded from the same origin: feature-policy: display-capture 'self' if you're performing screen capture within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission: <iframe src="https://mycode.example.net/etc" allow="display-capture"> </iframe> ...
ScriptProcessorNode: audioprocess event - Web APIs
bubbles no cancelable no default action none interface audioprocessingevent event handler property scriptprocessornode.onaudioprocess examples scriptnode.addeventlistener('audioprocess', function(audioprocessingevent) { // the input buffer is a song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channe...
Selection.rangeCount - Web APIs
before the user has clicked a freshly loaded page, the rangecount is 0.
ServiceWorker - Web APIs
a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.) the serviceworker interface is dispatched a set of lifecycle events — install and activate — and functional events including fetch.
Streams API - Web APIs
this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.
TextTrack.mode - Web APIs
WebAPITextTrackmode
when a text track is loaded in the disabled state, the corresponding webvtt file is not loaded until the state changes to either showing or hidden.
TimeRanges.end() - Web APIs
WebAPITimeRangesend
example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.length - Web APIs
WebAPITimeRangeslength
syntax length = timeranges.length; example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.start() - Web APIs
WebAPITimeRangesstart
example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
Touch events - Web APIs
function startup() { var el = document.getelementbyid("canvas"); el.addeventlistener("touchstart", handlestart, false); el.addeventlistener("touchend", handleend, false); el.addeventlistener("touchcancel", handlecancel, false); el.addeventlistener("touchmove", handlemove, false); } document.addeventlistener("domcontentloaded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.
URL.createObjectURL() - Web APIs
browsers will release object urls automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.
VTTCue - Web APIs
WebAPIVTTCue
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle to view the liv...
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
attributes may be matrices, in which case columns of the matrix must be loaded into successive vertex attribute slots.
Clearing with colors - Web APIs
--> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope.
Detect WebGL - Web APIs
<p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it.
Compressed texture formats - Web APIs
note that webgl makes no functionality available to compress or decompress textures: they must already be in a compressed format and can then be directly uploaded to video memory.
Adding 2D content to a WebGL context - Web APIs
if the shader was loaded and successfully compiled, the compiled shader is returned to the caller.
Animating objects with WebGL - Web APIs
requestanimationframe passes us the time in milliseconds since the page loaded.
Animating textures in WebGL - Web APIs
the video must be loaded from a secure source in order to be used to provide texture data to webgl.
Getting started with WebGL - Web APIs
<body> <canvas id="glcanvas" width="640" height="480"></canvas> </body> preparing the webgl context the main() function in our javascript code, is called when our script is loaded.
WebGL model view projection - Web APIs
clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a special coordinate system known as clip space.
A simple RTCDataChannel sample - Web APIs
starting up when the script is run, we set up an load event listener, so that once the page is fully loaded, our startup() function is called.
Using DTMF with WebRTC - Web APIs
they'll get set up when the page is first loaded.
Writing WebSocket client applications - Web APIs
security considerations websockets should not be used in a mixed content environment; that is, you shouldn't open a non-secure websocket connection from a page loaded using https or vice-versa.
Movement, orientation, and motion: A WebXR example - Web APIs
now that the rendering structures and data are loaded, we start preparing to run the xrsession.
Web Animations API Concepts - Web APIs
each document has a master timeline, document.timeline, which stretches from the moment the page is loaded to infinity — or until the window is closed.
Window: beforeunload event - Web APIs
the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
Window.content - Web APIs
WebAPIWindowcontent
in unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content still refers to the window of the currently selected tab).
Window.controllers - Web APIs
however, the added controllers must be explicitly removed when the window is unloaded, as this is not done automatically.
Window.history - Web APIs
WebAPIWindowhistory
the window.history read-only property returns a reference to the history object, which provides an interface for manipulating the browser session history (pages visited in the tab or frame that the current page is loaded in).
Window.matchMedia() - Web APIs
WebAPIWindowmatchMedia
javascript let mql = window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.
Privileged features - Web APIs
chrome if on, the page is loaded as window's only content, without any of the browser's interface elements.
Window.parent - Web APIs
WebAPIWindowparent
when a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.
Window.sizeToContent() - Web APIs
in order for it to work, the dom content should be loaded when this function is called—for example, once the domcontentloaded event has been thrown.
WorkerGlobalScope.console - Web APIs
if you are calling console.log() from a dedicatedworkerglobalscope or other worker scope that acts on a single loaded window, that tab's web console will receive the logs.
Worklet.addModule() - Web APIs
WebAPIWorkletaddModule
aborterror the specified script is invalid or could not be loaded.
XMLDocument.async - Web APIs
WebAPIXMLDocumentasync
true is the default value, indicating that documents should be loaded asynchronously.
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
examples var xmldoc = document.implementation.createdocument("", "test", null); function documentloaded (e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
the channel property becomes available only after the request is sent and the connection was established, that is, on readystate loaded, interactive or completed.
XMLHttpRequest() - Web APIs
this only works in privileged (reviewed) apps (bug 692677); it does not work on arbitrary webpages loaded in firefox ...
XMLHttpRequest: abort event - Web APIs
m; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ...
XMLHttpRequest: error event - Web APIs
m; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ...
XMLHttpRequest: load event - Web APIs
m; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ...
XMLHttpRequest: loadend event - Web APIs
m; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ...
XMLHttpRequest: loadstart event - Web APIs
m; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ...
XMLHttpRequest.multipart - Web APIs
note: when this is set, the onload handler and other event handlers are not reset after the first xmldocument is loaded, and the onload handler is called after each part of the response is received.
XMLHttpRequest: progress event - Web APIs
m; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ...
XMLHttpRequest.readyState - Web APIs
instead of unsent, opened, headers_received, loading and done, the names readystate_uninitialized (0), readystate_loading (1), readystate_loaded (2), readystate_interactive (3) and readystate_complete (4) are used.
XSL Transformations in Mozilla FAQ - Web APIs
this does not affect css stylesheets loaded from the generated dom, those honor media just like in pages without xslt.
msCaching - Web APIs
WebAPImsCaching
the mscaching read/write property specifies whether stream data downloaded using xmlhttprequestis cached to disk or not.
Using the alert role - Accessibility
if the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.
ARIA: feed role - Accessibility
each article element has aria-posinset set to a value that represents its position in the feed and an aria-setsize set to a value that represents either the total number of articles that have been loaded or the total number in the feed, depending on which value is more helpful to users.
ARIA: tab role - Accessibility
window.addeventlistener("domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { // move right i...
Accessibility Information for Web Authors - Accessibility
the html advanced validator may also be downloaded from firefox add-ons: html validator.
-moz-context-properties - CSS: Cascading Style Sheets
ext-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the svg is loaded standalone in a top-level window (where it will have no context element to provide context values).
:-moz-user-disabled - CSS: Cascading Style Sheets
the :-moz-user-disabled css pseudo-class is a mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.
::placeholder - CSS: Cascading Style Sheets
with this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded.
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
<input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].di...
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
if no format hints are supplied, the font resource is always downloaded.
prefers-reduced-data - CSS: Cascading Style Sheets
in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-fa...
At-rules - CSS: Cascading Style Sheets
WebCSSAt-rule
@font-face — describes the aspect of an external font to be downloaded.
CSS Fonts - CSS: Cascading Style Sheets
WebCSSCSS Fonts
css fonts is a module of css that defines font-related properties and how font resources are loaded.
Shapes From Images - CSS: Cascading Style Sheets
in firefox if you inspect the property you will be alerted to the fact that the image could not be loaded.
font-family - CSS: Cascading Style Sheets
the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
Guide to scroll anchoring - CSS: Cascading Style Sheets
this has happened because large images or some other elements have just loaded further up in the content.
table-layout - CSS: Cascading Style Sheets
under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed.
user-select - CSS: Cascading Style Sheets
this doesn't have any effect on content loaded as chrome, except in textboxes.
Video player styling basics - Developer guides
simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web.
Creating a cross-browser video player - Developer guides
ideally, the correct value of the video's duration attribute is available when the loadedmetadata event is raised, which occurs when the video's metadata has been loaded: video.addeventlistener('loadedmetadata', function() { progress.setattribute('max', video.duration); }); unfortunately in some mobile browsers, when loadedmetadata is raised — if it even is raised — video.duration may not have the correct value, or even any value at all.
Audio and video manipulation - Developer guides
gedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simple example showing how to manipulate video frames using a canvas.
Constraint validation - Developer guides
limiting the size of a file before its upload another common constraint is to limit the size of a file to be uploaded.
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
performance improvement with speculative parsing unrelated to the requirements of html5 specification, the gecko 2 parser uses speculative parsing, in which it continues parsing a document while scripts are being downloaded and executed.
Introduction to HTML5 - Developer guides
this is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.
HTML5 - Developer guides
WebGuideHTMLHTML5
custom typefaces can be downloaded and applied thanks to the new @font-face at-rule.
Index - Developer guides
WebGuideIndex
11 media buffering, seeking, and time ranges apps, buffer, html5, timeranges, video, buffering, seeking sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player.
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
WebHTMLElementapplet
code this attribute specifies the url of the applet's class file to be loaded and executed.
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
onbeforeunload function to call when the document is about to be unloaded.
manifest - HTML: Hypertext Markup Language
WebHTMLElementhtmlmanifest
the manifest attribute of <html> element specifies a url of a application cache manifest that is downloaded in the early stages of page load.
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
once chosen, the files can be uploaded to a server using form submission, or manipulated using javascript code and the file api.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
the content to be edited is taken from the database and loaded into an html form to allow the user to make changes.
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
WebHTMLElementmeta
refresh this instruction specifies: the number of seconds until the page should be reloaded - only if the content attribute contains a positive integer.
<template>: The Content Template element - HTML: Hypertext Markup Language
WebHTMLElementtemplate
the html content template (<template>) element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using javascript.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<template> the html content template (<template>) element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using javascript.
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
HTML: Hypertext Markup Language
WebHTML
advanced topics cors enabled image the crossorigin attribute, in combination with an appropriate cors header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.
HTTP authentication - HTTP
from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
Identifying resources on the Web - HTTP
when referring to subresources — that is, files that are being loaded as part of a larger document — you should only use the http and https schemes.
Resource URLs - HTTP
syntax resource urls are composed of two parts: a prefix (resource:), and a url pointing to the resource you want to load: resource://<url> an example: resource://gre/res/svg.css when arrows are found in the resource url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the web for more general details.
Browser detection using the user agent - HTTP
the simplest way to do this is to separate all the code that moves content around based on screen size to a single function that is called when the page is loaded and at each resize event thereafter.
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
if, instead, you need to adjust the server's behavior, you'll need to change the value of access-control-allow-origin to grant access to the origin from which the client is loaded.
HTTP conditional requests - HTTP
once this happens, the client can resume a download by sending a ranges header with the missing ranges: the principle is simple, but there is one potential problem: if the downloaded resource has been modified between both downloads, the obtained ranges will correspond to two different versions of the resource, and the final document will be corrupted.
Using Feature Policy - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Accept-Encoding - HTTP
this may be the case with some image formats; the server is overloaded and cannot afford the computational overhead induced by the compression requirement.
CSP: base-uri - HTTP
'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
CSP: child-src - HTTP
the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
CSP: connect-src - HTTP
the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
CSP: default-src - HTTP
'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.
CSP: form-action - HTTP
'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
CSP: frame-ancestors - HTTP
if no url scheme is specified for a host-source and the iframe is loaded from an https url, the url for the page loading the iframe must also be https, per the w3c spec on matching source expressions.
CSP: img-src - HTTP
'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
CSP: navigate-to - HTTP
'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
CSP: plugin-types - HTTP
the http content-security-policy (csp) plugin-types directive restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.
CSP: require-sri-for - HTTP
examples if you set your site to require sri for script and styles using this directive: content-security-policy: require-sri-for script style <script> elements like the following will be loaded as they use a valid integrity attribute.
CSP: script-src-elem - HTTP
'strict-dynamic' the strict-dynamic source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
CSP: style-src - HTTP
s violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are applied in javascript by setting the style attribute directly, or by setting csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csst...
Content-Security-Policy-Report-Only - HTTP
stylesheets are only allowed to be loaded from cdn.example.com, yet the website tries to load one from its own origin (http://example.com).
Content-Type - HTTP
length: 68137 content-type: multipart/form-data; boundary=---------------------------974767299852498929531610575 -----------------------------974767299852498929531610575 content-disposition: form-data; name="description" some text -----------------------------974767299852498929531610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded file foo.txt) -----------------------------974767299852498929531610575-- specifications specification title rfc 7233, section 4.1: content-type in multipart hypertext transfer protocol (http/1.1): range requests rfc 7231, section 3.1.1.5: content-type hypertext transfer protocol (http/1.1): semantics and content ...
Cross-Origin-Embedder-Policy - HTTP
to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } avoiding coep blockage with cors if you enable coep using require-corp and have a cross origin resource that needs to be loaded, it needs to support cors and you need to explicitly mark the resource as loadable from another origin to avoid blockage from coep.
Cross-Origin-Opener-Policy - HTTP
cross-origin documents are not loaded in the same browsing context.
Cross-Origin-Resource-Policy - HTTP
due to a bug in firefox, setting cross-origin-resource-policy can prevent some resources (such as pdfs) from being downloaded in some circumstances.
Feature-Policy: accelerometer - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: ambient-light-sensor - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: autoplay - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: battery - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: camera - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: display-capture - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: document-domain - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: encrypted-media - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: fullscreen - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: geolocation - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: gyroscope - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: layout-animations - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: legacy-image-formats - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: magnetometer - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: microphone - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: midi - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: oversized-images - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: payment - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: picture-in-picture - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: publickey-credentials-get - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: screen-wake-lock - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: sync-xhr - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: unoptimized-images - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: usb - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: vibrate - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: wake-lock - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
web-share - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy: xr-spatial-tracking - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
Feature-Policy - HTTP
'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute.
If-None-Match - HTTP
they are only useful when uploading a resource, usually with put, to check if another resource with the identity has already been uploaded before.
Save-Data - HTTP
a value of on indicates explicit user opt-in into a reduced data usage mode on the client, and when communicated to origins allows them to deliver alternative content to reduce the data downloaded such as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
X-Content-Type-Options - HTTP
this can cause html web pages to be downloaded instead of being rendered when they are served with a mime type other than text/html.
X-DNS-Prefetch-Control - HTTP
also, by default, prefetching of embedded link hostnames is not performed on documents loaded over https.
X-Frame-Options - HTTP
header type response header forbidden header name no syntax there are two possible directives for x-frame-options: x-frame-options: deny x-frame-options: sameorigin directives if you specify deny, not only will attempts to load the page in a frame fail when loaded from other sites, attempts to do so will fail when loaded from the same site.
HTTP Public Key Pinning (HPKP) - HTTP
setenv.add-response-header = ( "public-key-pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includesubdomains") note: this requires the mod_setenv server.module loaded which can be included by the following if not already loaded.
200 OK - HTTP
WebHTTPStatus200
the successful result of a put or a delete is often not a 200 ok but a 204 no content (or a 201 created when the resource is uploaded for the first time).
302 Found - HTTP
WebHTTPStatus302
this is useful when you want to give a response to a put method that is not the uploaded resource but a confirmation message such as: 'you successfully uploaded xyz'.
303 See Other - HTTP
WebHTTPStatus303
the hypertext transfer protocol (http) 303 see other redirect status response code indicates that the redirects don't link to the newly uploaded resources, but to another page (such as a confirmation page or an upload progress page).
307 Temporary Redirect - HTTP
WebHTTPStatus307
this is useful when you want to give an answer to a put method that is not the uploaded resources, but a confirmation message (like "you successfully uploaded xyz").
503 Service Unavailable - HTTP
WebHTTPStatus503
common causes are a server that is down for maintenance or that is overloaded.
HTTP response status codes - HTTP
WebHTTPStatus
common causes are a server that is down for maintenance or that is overloaded.
Introduction - JavaScript
single-line input in the web console the web console shows you information about the currently loaded web page, and also includes a javascript interpreter that you can use to execute javascript expressions in the current page.
Regular expressions - JavaScript
creating a regular expression you construct a regular expression in one of two ways: using a regular expression literal, which consists of a pattern enclosed between slashes, as follows: let re = /ab+c/; regular expression literals provide compilation of the regular expression when the script is loaded.
TypeError: can't access dead object - JavaScript
to avoid these issues, references to dom nodes in foreign document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references.
ReferenceError: "x" is not defined - JavaScript
note: when loading a library (such as jquery), make sure it is loaded before you access library variables, such as "$".
Error: Permission denied to access property "x" - JavaScript
this is likely an <iframe> element loaded from a different domain for which you violated the same-origin policy.
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject('always fails'); }); promise.any([perr]).catch((err) => { console.log(err); }) // expected output: "aggregateerror: no promise in promise.any was resolved" displaying the first image loaded in this example, we have a function that fetches an image and returns a blob.
WebAssembly.Memory() constructor - JavaScript
the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the webassembly.instantiatestreaming() method, while importing the memory created in the line above.
WebAssembly.Memory.prototype.buffer - JavaScript
examples using buffer the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the webassembly.instantiatestreaming() method, while importing the memory created in the line above.
WebAssembly.Memory - JavaScript
the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the webassembly.instantiatestreaming() method, while importing the memory created in the line above.
WebAssembly.Module.customSections() - JavaScript
the wast2wasm command available as part of the wabt tool has a --debug-names option — specify this during conversion to get a .wasm with a names custom section, for example: wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names examples using customsections the following example (see the custom-section.html source and live example) compiles the loaded simple-name-section.wasm byte code.
WebAssembly.Module.exports() - JavaScript
examples using exports the following example (see our index-compile.html demo on github, and view it live also) compiles the loaded simple.wasm byte code using the webassembly.compilestreaming() method and then sends it to a worker using postmessage().
WebAssembly.Module.imports() - JavaScript
examples using imports the following example (see imports.html source code; see it live also) compiles the loaded simple.wasm module.
WebAssembly.Module - JavaScript
examples sending a compiled module to a worker the following example (see our index-compile.html demo on github, and view it live also) compiles the loaded simple.wasm byte code using the webassembly.compilestreaming() method and then sends the resulting module instance to a worker using postmessage().
WebAssembly.Table.prototype.get() - JavaScript
examples using get the following example (see table.html on github, and view it live also) compiles and instantiates the loaded table.wasm byte code using the webassembly.instantiatestreaming() method.
WebAssembly.compile() - JavaScript
examples using compile the following example compiles the loaded simple.wasm byte code using the compile() function and then sends it to a worker using postmessage().
WebAssembly.instantiate() - JavaScript
second overload example the following example (see our index-compile.html demo on github, and view it live also) compiles the loaded simple.wasm byte code using the webassembly.compilestreaming() method and then sends it to a worker using postmessage().
Strict mode - JavaScript
but strict mode code on the web, loaded with <script src=""> or <script>...</script>, won't be able to use let/yield as identifiers.
start_url - Web app manifests
type string mandatory no the start_url member is a string that represents the start url of the web application — the prefered url that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).
<mglyph> - MathML
WebMathMLElementmglyph
users will see this displayed if the image url is wrong, the image is not in one of the supported formats, or until the image is downloaded.
Using images in HTML - Web media technologies
WebMediaimages
mapping the width and height attributes of media container elements to their aspect-ratio this changes how browsers load images so their aspect ratios are calculated by the browser early on and can later be used to correct the display size of an image before it's loaded.
OpenSearch description format
note: for icons loaded remotely (that is, from https:// uris as opposed to data: uris), firefox will reject icons larger than 10 kilobytes.
Optimizing startup performance - Web Performance
this allows html parsers to continue processing the document, instead of having to wait until the scripts have been downloaded and executed before continuing.
Performance budgets - Web Performance
it can apply to a file, a file type, all files loaded on a page, a specific metric (e.g.
Add to Home screen - Progressive web apps (PWAs)
start_url: provides a path to the asset that should be loaded when the added-to-home screen app is launched.
How to make PWAs installable - Progressive web apps (PWAs)
splash screen in some browsers, a splash screen is also generated from the information in the manifest, which is shown when the pwa is launched and while it's being loaded started up.
Graphic design for responsive sites - Progressive web apps (PWAs)
so when the page is loaded on a mobile device, the mobile will only download the mobile assets, and not the desktop resource assets.
Mobile first - Progressive web apps (PWAs)
then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional information is loaded on top of that, whenever appropriate.
The building blocks of responsive design - Progressive web apps (PWAs)
you can include media attributes on the <source> element containing media queries — the video loaded in the browser will depend on both the format the browser supports, and the results of the media tests.
Progressive web apps (PWAs)
most of the features related to a pwa such as geolocation and even service workers are available only once the app has been loaded using https.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
you can rotate the text: <svg height="60" width="200"> <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">example text</text> </svg> using external references svg used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the html document to which it's applied.
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element.
SVG Event Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeEvents
roll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onf...
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event).
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event).
restart - SVG: Scalable Vector Graphics
WebSVGAttributerestart
never this value indicates that the animation cannot be restarted for the time the document is loaded.
textLength - SVG: Scalable Vector Graphics
by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet).
xlink:show - SVG: Scalable Vector Graphics
embed this value specifies that instead of linking to the resource it will be loaded and shown within the document.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onf...
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
svg files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive.
<script> - SVG: Scalable Vector Graphics
WebSVGElementscript
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fi...
Linking - SVG: Scalable Vector Graphics
WebSVGLinking
(the problem will be fixed in firefox 2.0.) anyway, the resultant behavior in moz svg is that page2.html will be loaded into the frame where the svg button was (i.e.
SVG as an Image - SVG: Scalable Vector Graphics
images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris.
Mixed content - Web security
the mixed content resource that was loaded via http will show up in red, along with the text "mixed content", which links to this page.
Same-origin policy - Web security
the same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
Securing your site - Web security
http access control the cross-origin resource sharing standard provides a way to specify what content may be loaded from other domains.
Subresource Integrity - Web security
a resource will be loaded if it matches one of those hashes.
Types of attacks - Web security
for endpoints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to pre...
Web security
robots.txt to be written site maps to be written integrity same-origin policy the same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
Web Components
html templates <template> contains an html fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using javascript, mainly used as the basis of custom element structures.
Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).
Basic Example - XSLT: Extensible Stylesheet Language Transformations
this allows fetching of data after the page has been loaded, without initiating a fresh page load.
Introduction - XSLT: Extensible Stylesheet Language Transformations
since the xml data loaded only contains the raw information without any presentation data, it can load quickly even on dialup.
Caching compiled WebAssembly modules - WebAssembly
caching is useful for improving the performance of an app — we can store compiled webassembly modules on the client so they don't have to be downloaded and compiled every time.
Index - WebAssembly
2 caching compiled webassembly modules caching, indexeddb, javascript, module, webassembly, compile, wasm caching is useful for improving the performance of an app — we can store compiled webassembly modules on the client so they don't have to be downloaded and compiled every time.
Compiling from Rust to WebAssembly - WebAssembly
once it's loaded, it calls the greet function from that module, passing "webassembly" as a string.
Using the WebAssembly JavaScript API - WebAssembly
if you have already compiled a module from another language using tools like emscripten, or loaded and run the code yourself, the next step is to learn more about using the other features of the webassembly javascript api.
WebAssembly
using the webassembly javascript api once you've loaded a .wasm module, you'll want to use it.