Search completed in 1.61 seconds.
470 results for "Iframe":
Your results are loading. Please wait...
From object to iframe — other embedding technologies - Learn web development
at this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements.
... <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly.
... objective: to learn how to embed items into web pages using <object>, <embed>, and <iframe>, like flash movies and other webpages.
...And 27 more matches
HTMLIFrameElement - Web APIs
the htmliframeelement interface provides special properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
... htmliframeelement.align is a domstring that specifies the alignment of the frame with respect to the surrounding context.
...And 25 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
the html inline frame element (<iframe>) represents a nested browsing context, embedding another html page into the current one.
... because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources.
... while theoretically you can use as many <iframe>s as you like, check for performance problems.
...And 23 more matches
HTMLIFrameElement.setVisible()
the setvisible() method of the htmliframeelement is used to change the visibility state of the browser <iframe>.
... the visible state of a browser <iframe> has nothing to do with its actual visibility (which is handled through css).
... the visible state is used to define the level of resources required by the browser <iframe>.
...And 5 more matches
iframe - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an inner frame that works much like the html <iframe> element.
...the children of the iframe are ignored.
... currently, xul iframes running in remote processes are not supported.
...And 4 more matches
nsIFrameLoaderOwner
content/base/public/nsiframeloader.idlscriptable represents the owner of an nsiframeloader.
... 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 [noscript, notxpcom] alreadyaddrefed_nsframeloader getframeloader(); void swapframeloaders(in nsiframeloaderowner aotherowner); attributes attribute type description frameloader nsiframeloader the frame loader owned by this nsiframeloaderowner.
...return value the nsiframeloader owned by this object.
...And 3 more matches
nsIFrameMessageManager
method overview void addmessagelistener(in astring amessage, in nsiframemessagelistener alistener, [optional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in nsiframemessagelistener alistener); void sendasyncmessage(in astring amessage, in astring json); methods addmessagelistener() adds a message listener to the local frame.
... void addmessagelistener( in astring amessage, in nsiframemessagelistener alistener [optional in boolean listenwhenclosed ); parameters amessage the name of the message for which to add a listener.
... alistener an object implementing nsiframemessagelistener whose receivemessage method will be called when the message is received.
...And 3 more matches
HTMLIFrameElement.sendMouseEvent()
the sendmouseevent() method of the htmliframeelement interface allows you to fake a mouse event and send it to the browser <iframe>'s content.
... syntax instanceofhtmliframeelement.sendmouseevent(type, x, y, button, clickcount, modifiers); returns void.
... x a number representing the x position of the cursor relative to the browser <iframe>'s visible area in css pixels.
...And 2 more matches
HTMLIFrameElement.sendTouchEvent()
the sendtouchevent() method of the htmliframeelement allows you to fake a touch event and send it to the browser <iframe>'s content.
... syntax instanceofhtmliframeelement.sendtouchevent(type, x, y, rx, ry, rotationangles, forces, count, modifiers); returns void.
... x an array of numbers representing the x position of each touch point relative to the browser <iframe>'s visible area in css pixels.
...And 2 more matches
HTMLIFrameElement.getScreenshot()
the getscreenshot() method of the htmliframeelement lets you request a screenshot of a content <iframe>, scaled to fit within a specified maximum width and height.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.getscreenshot(maxwidth, maxheight, mimetype); returns a domrequest for handling the screenshot request.
...this lets you get a transparent background for the content <iframe>.
... examples var browser = document.queryselector('iframe'); var request = browser.getscreenshot(100, 100); request.onsuccess = function() { var blob = request.result; var url = url.createobjecturl(blob); } specification not part of any specification.
HTMLIFrameElement.getVisible()
the getvisible() method of the htmliframeelement is used to request the current visible state of the browser <iframe>.
... syntax instanceofdomrequest = instanceofhtmliframeelement.getvisible(); returns a domrequest object to handle the getvisible() request's success and error cases.
... if the request is successful, the request's result is a boolean indicating the visible state of the browser <iframe>.
... example var browser = document.queryselector('iframe'); var request = browser.getvisible(); request.onsuccess = function() { console.log('the visible state is: ' + this.result ?
HTMLIFrameElement.setActive()
the setactive() method of the htmliframeelement sets the current <iframe> as the active frame, which has an effect on how it is prioritized by the process manager.
... syntax instanceofhtmliframeelement.setactive(boolean); returns void.
... parameters boolean a boolean that indicates whether the iframe is to be the active frame (true) or not (false).
... example var browser = document.queryselector('iframe'); browser.setactive(); specification not part of any specification.
nsIFrameLoader
content/base/public/nsiframeloader.idlscriptable handles loading a frame.
...iuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only!
... void updatepositionandsize( in nsiframe aiframe ); parameters aiframe the nsiframe for the content node that owns this frameloader.
... see also content process event handling nsiframeloaderowner nsiframemessagelistener nsichromeframemessagemanager nsidomwindowutils ...
HTMLIFrameElement.contentWindow - Web APIs
the contentwindow property returns the window object of an htmliframeelement.
... you can use this window object to access the iframe's document and its internal dom.
... example of contentwindow var x = document.getelementsbytagname("iframe")[0].contentwindow; //x = window.frames[0]; x.document.getelementsbytagname("body")[0].style.backgroundcolor = "blue"; // this would turn the 1st iframe in document blue.
... specifications specification status comment html living standardthe definition of 'htmliframeelement: contentwindow' in that specification.
HTMLIFrameElement.referrerPolicy - Web APIs
the htmliframeelement.referrerpolicy property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
... syntax refstr = iframeelt.referrerpolicy; iframeelt.referrerpolicy = refstr; values no-referrer the referer header will be omitted entirely.
... examples var iframe = document.createelement("iframe"); iframe.src = "/"; iframe.referrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
... html living standardthe definition of 'htmliframeelement: referrerpolicy' in that specification.
HTMLIFrameElement.addNextPaintListener()
the addnextpaintlistener() method of the htmliframeelement is used to define a handler to listen for the next mozafterpaint event coming from the browser <iframe>.
... syntax instanceofhtmliframeelement.addnextpaintlistener(listener); returns void.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIFrameElement.download()
the download() method of the htmliframeelement interface downloads a specified url, storing it at /sdcard/download.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.download(url, options); returns a domrequest for handling the download request.
... examples var browser = document.queryselector('iframe'); var request = browser.download(foourl, { filename: 'foo.bin' }); request.onsuccess = function() { console.log("file downladed"); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIFrameElement.findAll()
the findall() method of the htmliframeelement searches for a string in a browser <iframe>'s text content; if found, the first instance of the string relative to the caret position will be highlighted.
... syntax instanceofhtmliframeelement.findall(searchstring, casesensitivity); returns void.
... parameters searchstring the string you want to search for in the browser <iframe>'s text.
HTMLIFrameElement.getActive()
the getactive() method of the htmliframeelement indicates whether the current browser <iframe> is the currently active frame.
... syntax var amiactive = instanceofhtmliframeelement.getactive(); returns a boolean indicating whether the current browser <iframe> is the currently active frame (true) or not (false.) parameters none.
... example var browser = document.queryselector('iframe'); var amiactive = browser.getactive(); specification not part of any specification.
HTMLIFrameElement.getContentDimensions()
the getcontentdimensions() method of the htmliframeelement interface retrieves the x and y dimensions of the content window.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.getcontentdimensions(); returns a domrequest for handling the dimensions request.
... examples var browser = document.queryselector('iframe'); var request = browser.getcontentdimensions(); request.onsuccess = function() { console.log("page size:", request.result.width + "x" + request.result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
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.
... syntax instanceofhtmliframeelement.getmanifest().then(function(json) { ...
... examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getmanifest().then(function(json) { console.log(json); }); }); specification not part of any specification.
HTMLIFrameElement.getMuted()
the getmuted() method of the htmliframeelement indicates whether the browser <iframe> is currently muted.
... syntax there are two versions of this method, a callback version: var request = instanceofhtmliframeelement.getmuted(); and a promise version: instanceofhtmliframeelement.getmuted().then(function(muted) { ...
... example callback version: var browser = document.queryselector('iframe'); var request = browser.getmuted(); request.onsuccess = function() { if(request.result) { console.log('the browser is muted.'); } else { console.log('the browser is unmuted.'); } } promise version: var browser = document.queryselector('iframe'); browser.getmuted().then(function(muted) { if(muted) { console.log('the browser is muted.'); } else { console.log('the br...
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.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.getstructureddata(); returns a domrequest to handle the getstructureddata() request's success and error cases.
... examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ { "type":["http://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": ...
HTMLIFrameElement.getVolume()
the getvolume() method of the htmliframeelement gets the current volume of the browser <iframe>.
... syntax there are two versions of this method, a callback version: var request = instanceofhtmliframeelement.getvolume(); and a promise version: instanceofhtmliframeelement.getvolume().then(function(volume) { ...
... example callback version: var browser = document.queryselector('iframe'); var request = browser.getvolume(); request.onsuccess = function() { console.log('the current browser volume is ' + request.result); } promise version: var browser = document.queryselector('iframe'); browser.getvolume().then(function(volume) { console.log('the current browser volume is ' + volume); }); specification not part of any specification.
HTMLIFrameElement.goBack()
the goback() method of the htmliframeelement interface is used to navigate backwards in the browser <iframe>'s history.
... by calling this method, the browser <iframe> changes its location for the previous location available in its navigation history, which sends a series of related events: mozbrowserlocationchange, mozbrowserloadstart, and so on.
... syntax instanceofhtmliframeelement.goback(); returns void.
HTMLIFrameElement.goForward()
the goforward() method of the htmliframeelement is used to navigate forward in the browser <iframe>'s history.
... by calling this method, the browser <iframe> changes its location to the next location available in its navigation history, which sends a series of related events: mozbrowserlocationchange, mozbrowserloadstart and so on.
... syntax instanceofhtmliframeelement.goforward(); returns void.
HTMLIFrameElement.mute()
MozillaGeckoChromeAPIBrowser APImute
the mute() method of the htmliframeelement mute any audio playing in the browser <iframe>.
... syntax instanceofhtmliframeelement.mute(); returns void.
... example var browser = document.queryselector('iframe'); browser.mute(); specification not in a specification.
HTMLIFrameElement.purgeHistory()
the purgehistory() method of the htmliframeelement interface is used to clear the browsing history associated with the browser <iframe>.
... syntax there is a domrequest version and a promise version: var mydomrequest = instanceofhtmliframeelement.purgehistory(); instanceofhtmliframeelement.purgehistory().then(function() { ...
... examples domrequest: var browser = document.queryselector('iframe'); var request = browser.purgehistory(); request.onsuccess = function() { console.log('history deleted!'); } request.onerror = function() { console.error(this.error.name); } promise: var browser = document.queryselector('iframe'); browser.purgehistory().then(function() { console.log('history deleted!'); }, function(error) { console.error(this.error.name); }); specification not part of any specification.
HTMLIframeElement.removeNextPaintListener()
the removenextpaintlistener() method of the htmliframeelement interface is used to remove a handler previously set with the addnextpaintlistener method.
... syntax instanceofhtmliframeelement.removenextpaintlistener(listener); returns void.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); browser.removenextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIFrameElement.setVolume()
the setvolume() method of the htmliframeelement sets the current volume of the browser <iframe>.
... syntax instanceofhtmliframeelement.setvolume(number); returns void.
... example var browser = document.queryselector('iframe'); browser.setvolume(0.5); specification not part of any specification.
HTMLIFrameElement.unmute()
the unmute() method of the htmliframeelement unmutes any audio playing in the browser <iframe>.
... syntax instanceofhtmliframeelement.unmute(); returns void.
... example var browser = document.queryselector('iframe'); browser.unmute(); specification not part of any specification.
HTMLIFrameElement.zoom()
MozillaGeckoChromeAPIBrowser APIzoom
the zoom() method of the htmliframeelement interface changes the zoom factor of the browser <iframe>'s content.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.zoom(zoomfactor); returns void.
... examples var browser = document.queryselector('iframe'); var zoomfactor = 1; zoomin.addeventlistener('touchend',function() { zoomfactor += 0.1; browser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1; browser.zoom(zoomfactor); }); specification not part of any specification.
Working with iframes - Firefox Developer Tools
you can point the developer tools at a specific iframe within a document.
... you'll see a button in the toolbar: click it, and you'll see a popup listing all the iframes in the document, as well as the main document itself.
... if you select an entry in the list, all the tools in the toolbox - the inspector, the console, the debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist.
HTMLIFrameElement.allowPaymentRequest - Web APIs
the allowpaymentrequest property of the htmliframeelement interface returns a boolean indicating whether the payment request api may be invoked on a cross-origin iframe.
... syntax var allow = htmliframeelement.allowpaymentrequest value a boolean.
... html living standardthe definition of 'htmliframeelement: allowpaymentrequest' in that specification.
HTMLIFrameElement.setNfcFocus() - Web APIs
the setnfcfocus() method of the htmliframeelement interface sets whether an <iframe> can receive an nfc event.
... syntax myiframe.setnfcfocus(true); returns void.
... parameters a boolean indicating whether the <iframe> can receive an nfc event.
HTMLIFrameElement.clearMatch()
the clearmatch() method of the htmliframeelement clears any content highlighted by findall() or findnext().
... syntax instanceofhtmliframeelement.clearmatch(); returns void.
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.findNext()
the findnext() method of the htmliframeelement highlights the next or previous instance of a search result after a findall() search has been carried out.
... syntax instanceofhtmliframeelement.findnext(direction); return value void.
HTMLIFrameElement.getCanGoBack()
the getcangoback() method of the htmliframeelement interface is used to indicate whether it's possible to go back in the navigation history of the browser <iframe>.
... syntax instanceofhtmliframeelement.getcangoback() .then(function(result) { ...
HTMLIFrameElement.getCanGoForward()
the getcangoforward() method of the htmliframeelement is used to indicate whether it's possible to go forward in the navigation history of the browser <iframe>.
... syntax instanceofhtmliframeelement.getcangoforward() .then(function(result) { ...
HTMLIFrameElement.reload()
the reload() method of the htmliframeelement interface is used to reload the content of the <iframe>.
... syntax instanceofhtmliframeelement.reload(hardreload); returns void.
HTMLIFrameElement.stop()
MozillaGeckoChromeAPIBrowser APIstop
the stop() method of the htmliframeelement interface is used to stop loading the content of the <iframe>.
... syntax instanceofhtmliframeelement.stop(); returns void.
nsIIFrameBoxObject
layout/xul/base/public/nsiiframeboxobject.idlscriptable please add a summary to this article.
... inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul iframe element implements this interface.
HTMLIFrameElement.csp - Web APIs
the csp property of the htmliframeelement interface specifies the content security policy that an embedded document must agree to enforce upon itself.
... syntax var csp = htmliframeelement.csp htmliframeelement.csp = csp value a content security policy.
HTMLIFrameElement.featurePolicy - Web APIs
the featurepolicy read-only property of the htmliframeelement interface returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific frame.
... syntax var policy = htmliframeelement.featurepolicy value a featurepolicy object that can be used to inspect the feature policy settings applied to the frame.
HTMLIFrameElement.src - Web APIs
the htmliframeelement.src property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
... syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification.
iframe.transparent - Archive of obsolete content
« xul reference hometransparenttype: one of the values belowset the background of an iframe as transparent.transparentthis results in the iframe's background being transparent.
nsIFrameMessageListener
see also content process event handling nsiframelistener ...
Browser API
the html browser api is an extension of the html <iframe> element that allows web apps to implement browsers or browser-like applications.
... browser api concepts and usage the browser api consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content.
... api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface.
...And 62 more matches
Index - Web APIs
WebAPIIndex
362 broadcast channel api api, broadcast channel api, html api, overview, reference the broadcast channel api allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).
...it allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin.
... 612 channel messaging api api, channel messaging, html api, overview, reference the channel messaging api allows two separate scripts running in different browsing contexts attached to the same document (e.g., two iframes, or the main document and an iframe, two documents via a sharedworker, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
...And 28 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the first one looks like a traditional dhtml ticker application and uses hidden iframes and javascript to provide updates inside the webpage's ticker headlines section.
... this sample was made using iframes to illustrate a possible implementation.
...the next section illustrates a case of implementation using javascript, iframes and dom.
...And 18 more matches
Event reference
mozbrowseractivitydone firefox os browser api-specific sent when some activity has been completed (complete description tbd.) mozbrowserasyncscroll firefox os browser api-specific sent when the scroll position within a browser <iframe> changes.
... mozbrowseraudioplaybackchange firefox os browser api-specific sent when audio starts or stops playing within the browser <iframe> content.
... mozbrowsercaretstatechanged firefox os browser api-specific sent when the text selected inside the browser <iframe> content changes.
...And 18 more matches
Space Manager Detailed Design - Archive of obsolete content
*/ class nsspacemanager { public: nsspacemanager(nsipresshell* apresshell, nsiframe* aframe); ~nsspacemanager(); void* operator new(size_t asize); void operator delete(void* aptr, size_t asize); static void shutdown(); /* * get the frame that's associated with the space manager.
... */ nsiframe* getframe() const { return mframe; } /** * translate the current origin by the specified (dx, dy).
...must not be null * @param aunavailablespace the bounding rect of the unavailable space * @return ns_ok if successful * ns_error_failure if there is already a region tagged with aframe */ nsresult addrectregion(nsiframe* aframe, const nsrect& aunavailablespace); /** * resize the rectangular region associated with aframe by the specified * deltas.
...And 14 more matches
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
the html browser api is an extension of the html <iframe> element that allows web apps to implement browsers or browser-like applications.
... it consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content.
... api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface.
...And 14 more matches
Using channel messaging - Web APIs
the channel messaging api allows two separate scripts running in different browsing contexts attached to the same document (e.g., two iframes, or the main document and an iframe, or two documents via a sharedworker) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
... use cases channel messaging is mainly useful in cases where you've got a social site that embeds capabilities from other sites into its main interface via iframes, such as games, address book, or an audio player with personalized music choices.
... when these act as standalone units, things are ok, but the difficulty comes when you want interaction between the main site and the iframes, or the different iframes.
...And 13 more matches
Using Remote XUL - Archive of obsolete content
source | rendered step 2: an iframe for displaying the web site content now that we have a basic xul document, we need a way to display pages from the mozilla.org web site.
... for that we'll use a xul iframe element.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the xul iframe element is just like its html counterpart: it defines an area within which web content can be displayed.
...And 11 more matches
Using Feature Policy - HTTP
allowlist an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 11 more matches
HTML attribute reference - HTML: Hypertext Markup Language
align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element.
... allow <iframe> specifies a feature-policy for the iframe.
... crossorigin <audio>, <img>, <link>, <script>, <video> how the element handles cross-origin requests csp <iframe> specifies the content security policy that an embedded document must agree to enforce upon itself.
...And 9 more matches
HTML to DOM - Archive of obsolete content
this will remove tags like <script>, <style>, <head>, <body>, <title>, and <iframe>.
...ns the element name html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome).
... see using a hidden iframe element to parse html to a window's dom below.
...And 8 more matches
Storage access policy: Block cookies from trackers
we also support an initial implementation of the storage access api, through which embedded <iframe>s can request storage access by calling document.requeststorageaccess().
...this includes all resources loaded in the main context of the page, embedded <iframe>s, and resources loaded within embedded <iframe>s.
...this means that <iframe>s embedded in the main context of the page and loaded from a domain classified as a tracker will have full access to all storage locations accessible through javascript.
...And 8 more matches
Index - Archive of obsolete content
xul <iframe> elements) that are not displayed to the user.
... 120 ui/frame create html iframes, using bundled html, css and javascript, that can be added to a designated area of the firefox user interface.
... 897 iframe.transparent no summary!
...And 6 more matches
Content Panels - Archive of obsolete content
another approach is to use the iframe element, which works much like the html element of the same name.
...you can use a script to change the contents of the iframe without affecting the main window.
... in the mozilla browser window, the area where the web page is displayed is created by using an iframe.
...And 6 more matches
mozbrowserasyncscroll
the mozbrowserasyncscroll event is fired when the content of a browser <iframe> is scrolled.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: top the scroll top position in css pixels of the document within the browser <iframe>.
...And 6 more matches
Index
MozillaTechXPCOMIndex
432 nsicontainerboxobject interfaces, interfaces:scriptable, needscontent, xpcom, xpcom interface reference the boxobject belonging to a xul browser, editor or iframe element implements this interface.
... 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.
... 442 nsicontentviewmanager electrolysis, interfaces, interfaces:scriptable, mobile, xpcom interface reference to obtain a reference to the view manager for a document, you can queryinterface() the nsiframeloader object to nsicontentviewmanager.
...And 6 more matches
Viewport concepts - CSS: Cascading Style Sheets
for a page containing iframes, objects, or external svg, both the containing pages and each included file has their own unique window object.
...they are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and svg.
... <iframe> inside an iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document.
...And 6 more matches
Feature-Policy: fullscreen - HTTP
via the allow attribute) and the allowfullscreen attribute are present on an <iframe> element, this directive takes precedence.
... syntax feature-policy: fullscreen <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
...And 6 more matches
Feature-Policy: geolocation - HTTP
syntax feature-policy: geolocation <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 5 more matches
Feature-Policy - HTTP
the http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the document.
... <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
...And 5 more matches
Splitters - Archive of obsolete content
splitter example an example would be helpful here: example 1 : source view <hbox flex="1"> <iframe id="content-1" width="60" height="20" src="w1.html"/> <splitter collapse="before" resizeafter="farthest"> <grippy/> </splitter> <iframe id="content-2" width="60" height="20" src="w2.html"/> <iframe id="content-3" width="60" height="20" src="w3.html"/> <iframe id="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a splitter has bee...
...you can use the style properties such as min-width, max-height on the iframes to specify minimum or maximum widths or heights in the box.
...similarly, you do not have to collapse just iframes.
...And 4 more matches
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.
... the <iframe> contents are then editable.
... note that the <editor> element is really just an <iframe> which takes over some of the task of creating the editor from javascript.
...And 4 more matches
Using IndexedDB - Web APIs
<iframe> content) cannot access indexeddb if the browser is set to never accept third party cookies (see bug 1147821.) warning about browser shutdown when the browser shuts down (because the user chose the quit or exit option), the disk containing the database is removed unexpectedly, or permissions are lost to the database store, the following things happen: each transaction on every affected datab...
...order-radius: 0.3em; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer iframe { width: 100%; height: 100%; } #pub-list { width: 46%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff140...
...ue) success_callback(value.blob); }; } /** * @param {idbobjectstore=} store */ function displaypublist(store) { console.log("displaypublist"); if (typeof store == 'undefined') store = getobjectstore(db_store_name, 'readonly'); var pub_msg = $('#pub-msg'); pub_msg.empty(); var pub_list = $('#pub-list'); pub_list.empty(); // resetting the iframe so that it doesn't display previous content newviewerframe(); var req; req = store.count(); // requests are executed in the order in which they were made against the // transaction, and their results are returned in the same order.
...And 4 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
is muted or its volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing keys, etc.) if the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features if the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.
... note: the specified feature policy applies to the document and every <iframe> nested within it, unless those frames include an allow, which sets a new feature policy for that frame and all frames nested within it.
... when using the allow attribute on an <iframe> to specify a feature policy for that frame and its nested frames, you can also specify the value 'src' to allow autoplay of media only from the same domain as that specified by the frame's src attribute.
...And 4 more matches
The life of an HTML HTTP request - Archive of obsolete content
this is used to create and update the nsiframe hierarchy.
...each content node corresponds to one or more nsiframe, except content with displaytype "none".
... if there are several frames created from a content node, then the first of these are called the "primary" node, and the following frames can be found by using the getnextinflow() method of nsiframe.
...And 3 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
150 iframe.transparent no summary!
... 969 using the editor from xul xul 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.
... the <iframe> contents are then editable.
...And 3 more matches
Index - Learn web development
243 multimedia and embedding assessment, audio, beginner, codingscripting, embedding, flash, guide, html, images, landing, learn, multimedia, svg, vector graphics, video, web, iframes, imagemaps, img, responsive we've looked at a lot of text so far in this course, but the web would be really boring only using text.
... 244 adding vector graphics to the web beginner, graphics, guide, html, images, learn, raster, svg, vector, iframe, img this article has provided you with a quick tour of what vector graphics and svg are, why they are useful to know about, and how to include svg inside your webpages.
... 245 from object to iframe — other embedding technologies article, beginner, codingscripting, embedding, flash, guide, html, learn, multimedia and embedding, object, embed, iframe the topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies.
...And 3 more matches
mozbrowsershowmodalprompt
the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the window.alert(), window.confirm(), or window.prompt() methods.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... message a domstring representing the value passed to the window.alert(), window.confirm(), or window.prompt() methods within the browser <iframe>'s content.
...And 3 more matches
Embedding the editor
composer embedded in a native application in this application, the <iframe> on which the editor lives is embedded directly in the native application; this is equivalent to embedding the browser via nsiwebbrowser, but instead having an editable document.
...the <editor> tag is simply a <iframe> on which an editor is created; in all other respects, it behaves like a xul <iframe>.
... 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>).
...And 3 more matches
Rich-Text Editing in Mozilla - Developer guides
setting up rich-text editing rich-text editing is initialized by setting the designmode property of a document to "on", such as the document inside an iframe.
... : generated html differences mozilla: <span style="font-weight: bold;">i love geckos.</span> <span style="font-weight: bold; font-style: italic; text-decoration: underline;">dinosaurs are big.</span> internet explorer: <strong>i love geckos.</strong> <strong><em><u>dinosaurs are big.</u></em></strong> another difference between mozilla and ie is how to access the document object of an iframe, which is usually used in conjunction with designmode.
... mozilla uses the w3c standard way, namely iframeelement.contentdocument, while ie requires iframeelement.document.
...And 3 more matches
Index - HTTP
WebHTTPHeadersIndex
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>.
... 36 csp: frame-ancestors csp, directive, http, security the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
... 37 csp: frame-src csp, directive, http, reference, security the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
...And 3 more matches
HTTP Index - HTTP
WebHTTPIndex
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>.
... 84 csp: frame-ancestors ancestors, csp, content-security-policy, directive, frame, http, security, frame-ancestors the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
... 85 csp: frame-src csp, content-security-policy, directive, frame, http, reference, security, frame-src, source the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
...And 3 more matches
Gecko info for Windows accessibility vendors
in total, gecko supports the following window classes: mozillauiwindowclass - root ui window, at the root of the window hierarchy mozillacontentwindowclass -- root document window mozillacontentframewindowclass - root of a subdocument created by a <frame> or <iframe> element mozillahiddenwindowclass - ignore these windows, they are used to help manage other windows mozillawindowclass - general filler window, a catch all starting in firefox 2, however, you should begin switching your code to use navrelation_embeds.
...the following html tags are exposed as bstr's: abbr, acronym, blockquote, dd, dl, dt, form, frame, h1, h2, h3, h4, h5, h6, iframe, q, tbody, tfoot, thead in addition, an html list uses the bullet bstr role to expose bullets and numbers that are automatically inserted into the formatting by gecko.
... n/a role_caret supported for caret fires event_show, event_hide, event_locationchange role_alert xul: <browsermessage> dhtml: role="wairole:alert" fires event_alert role_window supported automatically by ms windows role_client xul: <browser> html: <frame> or <iframe> role_menupopup dhtml: role="wairole:menu" fires event_menupopupstart, event_menupopupend role_menuitem xul: menuitem dhtml: role="wairole:menuitem" sets state_checked for radio or checkbox menuitem types accelerator key comes in accname after a \t (tab) character.
...And 2 more matches
mozbrowsercaretstatechanged
the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... commands an object that defines what commands can currently be executed in the browser <iframe>.
...And 2 more matches
mozbrowsercontextmenu
the mozbrowsercontextmenu event is fired when the user tried to access a context menu over a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport.
...And 2 more matches
mozbrowseropenwindow
the mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target.
... the embedder must use the <iframe> passed in the event.details.frameelement property as the new window content.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
...And 2 more matches
mozbrowserresize
the mozbrowserresize event is fired when a browser <iframe> viewport is resized in some way.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels.
...And 2 more matches
mozbrowserscroll
the mozbrowserscroll event is fired when the browser <iframe> content scrolls.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: top a number representing the new vertical scroll position of the <iframe> viewport — in css pixels — from the top of the viewport.
...And 2 more matches
mozbrowserscrollareachanged
the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes.
... this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: width a number representing the new scroll area width of the <iframe> viewport, in css pixels.
...And 2 more matches
DevTools API - Firefox Developer Tools
{toolid}-init(toolbox, iframe) a tool with the given id has began to load in the given toolbox to the given frame.
...the frame is the <iframe> element that has been created for the tool.
...each tab will hold an iframe.
...And 2 more matches
Storage Inspector - Firefox Developer Tools
cookies — all the cookies created by the page or any iframes inside of the page.
... indexeddb — all indexeddb databases created by the page or any iframes inside the page, their object stores and the items stored in these object stores.
... local storage — all local storage items created by the page or any iframes inside the page.
...And 2 more matches
The JavaScript input interpreter - Firefox Developer Tools
working with iframes if a page contains embedded iframes, you can use the cd() function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe.
... there are three ways to select an iframe using cd(): you can pass the iframe dom element: var frame = document.getelementbyid("frame1"); cd(frame); you can pass a css selector that matches the iframe: cd("#frame1"); you can pass the iframe's global window object: var frame = document.getelementbyid("frame1"); cd(frame.contentwindow); to switch the context back to the top-level window, call cd() with no arguments: cd(); for example, suppose we have a document that embeds an iframe: <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> </body> </html> the iframe defines a new function: <!doctype html> <html> <head> <meta charset="utf-8"> <script> function whoareyou() { ...
... return "i'm frame1"; } </script> </head> <body> </body> </html> you can switch context to the iframe like this: cd("#frame1"); now you'll see that the global window's document is the iframe: and you can call the function defined in the iframe: helper commands the javascript command line provided by the web console offers a few built-in helper functions that make certain tasks easier.
...And 2 more matches
MediaDevices.getUserMedia() - Web APIs
only a window's top-level document context for a valid origin can even request permission to use getusermedia(), unless the top-level context expressly grants permission for a given <iframe> to do so using feature policy.
...for example, you may need to use the allow attribute on any <iframe> that uses getusermedia(), and pages that use getusermedia() will eventually need to supply the feature-policy header.
... for example, this line in the http headers will enable use of a camera for the document and any embedded <iframe> elements that are loaded from the same origin: feature-policy: camera 'self' this will request access to the microphone for the current origin and the specific origin https://developer.mozilla.org: feature-policy: microphone 'self' https://developer.mozilla.org if you're using getusermedia() within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission.
...And 2 more matches
Pointer Lock API - Web APIs
animation = requestanimationframe(function() { animation = null; canvasdraw(); }); } } the canvasdraw() function draws the ball in the current x and y positions: function canvasdraw() { ctx.fillstyle = "black"; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "#f00"; ctx.beginpath(); ctx.arc(x, y, radius, 0, degtorad(360), true); ctx.fill(); } iframe limitations pointer lock can only lock one iframe at a time.
... if you lock one iframe, you cannot try to lock another iframe and transfer the target to it; pointer lock will error out.
... to avoid this limitation, first unlock the locked iframe, and then lock the other.
...And 2 more matches
Storage Access API - Web APIs
in addition, sandboxed <iframe>s cannot be granted storage access by default for security reasons.
...the embedding website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
... </iframe> the api is designed to limit the potential storage exceptions to origins for which the user has shown an intent to interact.
...And 2 more matches
Window.pageYOffset - Web APIs
integer euismod lectus a ipsum pellentesque lacinia.</p> `; document.getelementbyid("frame").contentdocument .body.innerhtml = contenthtml; in this example, an <iframe> is created and filled with content, then a specific element within the document is scrolled into view in the frame.
... html the html is extremely simple and has just two elements: an <iframe> that contains the document we're going to scroll, and a <div> into which we'll output the value of pageyoffset when we've finished the scroll.
... <iframe id="frame"> </iframe> <div id="info"> </div> javascript var frame = document.getelementbyid("frame"); var framedoc = frame.contentdocument; var info = document.getelementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check.
...And 2 more matches
Content-Security-Policy - HTTP
child-src defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
... frame-src specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
... elements controlled by object-src are perhaps coincidentally considered legacy html elements and are not receiving new standardized features (such as the security attributes sandbox or allow for <iframe>).
...And 2 more matches
Feature-Policy: accelerometer - HTTP
syntax feature-policy: accelerometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: ambient-light-sensor - HTTP
syntax feature-policy: ambient-light-sensor <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: autoplay - HTTP
syntax feature-policy: autoplay <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: battery - HTTP
syntax feature-policy: battery <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: camera - HTTP
syntax feature-policy: camera <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: display-capture - HTTP
syntax feature-policy: display-capture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: document-domain - HTTP
syntax feature-policy: document-domain <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: encrypted-media - HTTP
syntax feature-policy: encrypted-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: gyroscope - HTTP
syntax feature-policy: gyroscope <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: layout-animations - HTTP
syntax feature-policy: layout-animations <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: legacy-image-formats - HTTP
syntax feature-policy: legacy-image-formats <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: magnetometer - HTTP
syntax feature-policy: magnetometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: microphone - HTTP
syntax feature-policy: microphone <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: midi - HTTP
syntax feature-policy: midi <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: oversized-images - HTTP
syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: payment - HTTP
syntax feature-policy: payment <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: picture-in-picture - HTTP
syntax feature-policy: picture-in-picture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: publickey-credentials-get - HTTP
syntax feature-policy: publickey-credentials-get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: screen-wake-lock - HTTP
syntax feature-policy: screen-wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: sync-xhr - HTTP
syntax feature-policy: sync-xhr <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: unoptimized-images - HTTP
syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: unsized-media - HTTP
syntax feature-policy: unsized-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: usb - HTTP
syntax feature-policy: usb <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: vibrate - HTTP
syntax feature-policy: vibrate <allowlist>; <vibrate> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: wake-lock - HTTP
syntax feature-policy: wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
web-share - HTTP
syntax feature-policy: web-share <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Feature-Policy: xr-spatial-tracking - HTTP
syntax feature-policy: xr-spatial-tracking <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin.
... '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.
...And 2 more matches
Privacy, permissions, and information security
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 man-in-the-m...
...this is the technology behind the https (hypertext transport protocol secured) protocol not all of these are generally directly used within code; notably, the permissions api, feature policy, and the allow attribute on <iframe> elements are primary tools directly used by code to help secure a site and its content.
... keeping personal data safe managing site permissions bringing it all together <using feature policy with permissions and so forth; how to use them together, how they interact, etc> permission requests in <iframe> elements things can get tricky when your web app uses the <iframe> element to embed content from another site inside your own, especially if the document you load into the frame has its own permission needs to consider.
...And 2 more matches
Cross-domain Content Scripts - Archive of obsolete content
in particular, they can't: access content hosted in an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content" key, which itself lives under the "permissions" key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
... cross-domain iframes the following "main.js" creates a page-worker which loads a local html file called "page.html", attaches a content script called "page.js" to the page, waits for messages from the script, and logs the payload.
... //main.js var data = require("sdk/self").data; var pageworker = require("sdk/page-worker").page({ contenturl: data.url("page.html"), contentscriptfile: data.url("page-script.js") }); pageworker.on("message", function(message) { console.log(message); }); the "page.html" file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.contentwindow.document.getelementbyid("mp-tf...
...a"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the add-on should successfully retrieve the iframe's content.
page-mod - Archive of obsolete content
attachto controls whether to attach scripts to tabs that were already open when the page-mod was created, and whether to attach scripts to iframes as well as the topmost document.
... are attached to all documents whose url matches the rule: so if your rule matches a specific hostname and path, and the topmost document that satisfies the rule includes ten iframes using a relative url, then your page-mod is applied eleven times.
... "top": the page-mod will be applied to top-level tab documents "frame": the page-mod will be applied to all iframes inside tab documents if the option is set at all, you must set at least one of "top" and "frame".
... for example, the following page-mod will be attached to already opened tabs, but not to any iframes: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: "", attachto: ["existing", "top"], onattach: function(worker) { console.log(worker.tab.url); } }); name: onattach type: function assign a listener function to this option to listen to the page-mod's attach event.
Canvas code snippets - Archive of obsolete content
=> canvas.toblob(accept, type, options)); reader.readasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load event.
...this method gets a reference to the iframe's window and draws this window to a canvas object.
... remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
... 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; //draw canvas var canvas = document.createelement('canvas'); canvas.style.width = remotecanvas.canvas_width + 'px'; canvas.style.height = remotecanvas.canvas_height + 'px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var windowwi...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you can set the src attribute of an iframe element to the uri of another xul document or web page, and it will be displayed there.
... but iframes are rarely used in xul—in practice, the browser element is used more often.
...unlike an iframe, a browser element has the ability to navigate backward and forward through pages and includes the ability to prevent scripts in embedded frames from accessing outside the frame.
... access restrictions with frames defined using html's frame and iframe elements, it is possible for a child frame to access its parent and ancestor frames by getting the parent and top properties of window objects.
Style System Overview - Archive of obsolete content
nsiframe::getstyledata does the same thing for the frame's mstylecontext member, and the global ::getstyledata is a typesafe helper that doesn't require the style struct id.
...[design flaw, again] any specially-parented style contexts (not along frame parents, which need not be content parents) are reconstructed using nsiframe::getparentstylecontextframe.
...(i'll call this the data-struct-based hint mechanism.) caller of nsiframemanager::computestylechangefor processes the change list, which has been built to avoid duplication.
... bugs due to failure to call nsiframe::didsetstylecontext.
Mozilla accessibility architecture
html elements ask the node's primary frame for an accessible via nsiframe::getaccessible().
... is returned by nsiaccessible's traversal methods atk/msaa toolkit traversal method → nsaccessible traversal method → nsaccessibletreewalker method which traverses dom & anonymous content → nsiaccessibilityservice::getaccessible() with the content node → nsdocaccessible::getcachedaccessnode() and returns if successful, or → nsiaccessibleprovider::getaccessible() (if xul) or → nsiframe::getaccessible() (if html), which either return nothing or → nsiaccessibilityservice::create[inserttypenamehere]accessible() → operator new, which finally constructs the object.
... whether via nsiaccessibleprovider::getaccessible() or nsiframe::getaccessible(), new accessibles are created by calling back to the accessibility service, and using a specific method for creating each type of accessible.
... nsouterdocaccessible: used for elements such as <iframe>, <browser> and <editor>, which spawn an entire new document, but don't actually have any child nodes in their own dom.
Inner and outer windows
this may be a window or a tab, or it might be an <iframe> contained within another document.
...this happens, for example, when a document contains a <frame> or <iframe>.
...consider a document that has three <iframe> elements in it.
...the <iframe> element offers the contentwindow property, which gives you the outer window window object containing the frame's document.
mozbrowserfindchange
the mozbrowserfindchange event is fired when a search method is invoked in the browser <iframe> content.
... this includes htmliframeelement.findall(), htmliframeelement.findnext(), and htmliframeelement.clearmatch().
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwind...
mozbrowserloadend
the mozbrowserloadend event is fired when the browser <iframe> has finished loading all its assets, or has failed to load.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... detail the detail property returns an anonymous javascript object with the following properties: backgroundcolor a domstring representing the main background color of the browser <iframe> content, expressed as an rgb value.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowse...
mozbrowservisibilitychange
the mozbrowservisibilitychange event is fired when the visibility state of the current browser iframe <iframe> changes, for example due to a call to setvisible().
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: visible a boolean that indicates whether the browser iframe is visible (true) or not (false).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
imgIContainer
nsiframe getrootlayoutframe(); violates the xpcom interface guidelines pruint16 gettype(); violates the xpcom interface guidelines void init(in print32 awidth, in print32 aheight, in imgicontainerobserver aobserver); obsolete since gecko 2.0 void lockimage(); void removeframe(in gfxiimageframe item); obsolete since gecko 1.9.2 void requestdecode(); ...
...return value missing description exceptions thrown missing exception missing description violates the xpcom interface guidelines getrootlayoutframe() if this image is type_vector, that is really an embedded svg document, and this method returns a pointer to the root nsiframe of that document.
... if not (or if the root nsiframe is not available for some reason), this method returns nsnull.
...nsiframe getrootlayoutframe(); parameters none.
Filelink Providers
that url is then loaded into an iframe directly beneath the provider menulist.
... note: the setup dialog window should resize itself automatically in order to fit the content of the iframe without scrollbars.
...providers need only provide an extraargs function in the iframe content which returns an object specifying the name, type, and value to save.
... the content to the right of the menulist is an iframe, pointed at a url read from the providers managementurl attribute, which should point to an xhtml page.
Window.prompt() - Web APIs
WebAPIWindowprompt
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpromptchrome full support 1notes full support 1notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 4notes full support 4notes notes this function has no effect in the modern ui/metro version of internet...
...desktop versions of ie do implement this function.opera full support 3notes full support 3notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1webview android full support 1notes full support 1notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals...
....chrome android full support 18notes full support 18notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android full support 4opera android full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari ios full support 1samsung internet android full support 1.0notes ...
... full support 1.0notes notes starting with samsung internet 5.0, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.legend full support full supportsee implementation notes.see implementation notes.
aspect-ratio - CSS: Cascading Style Sheets
examples the example below is contained in an <iframe>, which creates its own viewport.
... resize the <iframe> to see aspect-ratio in action.
...</div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af;...
... } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text.
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
...elements that belong to this category include: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>.
...elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
Feature Policy - HTTP
allow iframes to use the fullscreen api.
... the allow attribute on iframes.
... the primary difference between the http header and the allow attribute is that the allow attribute only controls features within an iframe.
... inferring the policy scripts can programatically query information about the feature policy via the featurepolicy object located at either document.featurepolicy or htmliframeelement.featurepolicy.
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).
...so in the simplest case you would have: <iframe type="content" src="data:text/html,%3chtml%3e%3cbody%3e%3c/body%3e%3c/html%3e"/> but usually you don’t want to start 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.
...this can be done as well, by placing the event handler on the frame tag (meaning that it is outside the restricted document and can execute without restrictions): <iframe type="content" onclick="handleclick(event);"/> and the event handler would look like that: function handlebrowserclick(event) { // only react to left mouse clicks if (event.button != 0) return; // default action on link clicks is to go to this link, cancel it event.preventdefault(); if (event.target instanceof htmlanchorelement && event.target.href) openlinkinbrowser(event.ta...
XUL Questions and Answers - Archive of obsolete content
see http://www.xulplanet.com/references/...ef_iframe.html, the first user note at the bottom.
... with mozilla trunk --------------------------------------------------------- nsidomcanvasrenderingcontext2d* c2d = //coming from <canvas> nsidomwindow* window = //coming from <iframe> c2d->drawwindow( window, ..., "rgba(0,0,0,0)"); --------------------------------------------------------- this makes canvas background transparent if background is transparent but when "window" is coming from top level content window, background is not transparent.
... so how can i do this same way as <iframe>?
Accessibility/XUL Accessibility Reference - Archive of obsolete content
groupbox <groupbox> <caption label="<!--group label-->" /> <hbox> <button label="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe element causes many, unpredictable issues with xul inside of the iframe.
... okay to use html inside of iframe.
... tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredictable issues with xul inside of the iframe.
nsIContentPolicy - Archive of obsolete content
type_subdocument 7 indicates a document contained within another document (for example, <iframe> and <frame> elements).
... note: gecko uses type_internal_frame and type_internal_iframe in order to discern the difference internally.
... type_internal_iframe 29 an internal constant used to represent content loaded from <iframe> elements.
Test your skills: Links - Learn web development
this is not strictly best practice, but we've done it here so that the page doesn't open in the embedded <iframe>, getting rid of your example code in the process!
...this is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process!
...this is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process!
Adding vector graphics to the Web - Learn web development
how to embed an svg with an <iframe> you can open svg images in your browser just like webpages.
... so embedding an svg document with an <iframe> is done just like we studied in from <object> to <iframe> — other embedding technologies.
... here's a quick review: <iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
Message manager overview
browser windows) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); you can also access it as the mm property of services.jsm, if you are in the parent process.
...s) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in this window broadcastasyncmessage() : send a message to all frame scripts in this window addmessagelistener() : start listening to a specific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access you can access it as a property of the browser window: // chrome script let windowmm = window.messagemanager; browser message manager note that in this context, "browser" refers to the xul <browser> object, which is a frame that hosts a single web document.
... most important functions are: loadframescript() : load a frame script into this browser frame (tab) sendasyncmessage() : send a message to all frame scripts in this browser frame addmessagelistener() : start listening to a specific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiprocesschecker nsiframescriptloader nsimessagelistenermanager nsimessagesender how to access the browser message manager can be accessed as a property of the xul <browser> element: // chrome script let browsermm = gbrowser.selectedbrowser.messagemanager; content process content frame message manager description there's a content frame message manager for...
Message manager overview
it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader 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) loa...
... it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster the window message manager can be accessed as a property of the browser window: // chrome script let windowmm = window.messagemanager; browser message manager the browser message manager is specific to a single xul <browser> element (which essentially corresponds to a single tab): loadframescript() loads the given script only into its <browser> sendasyncmessage() sends the message only to that <browser>.
... it's a chromemessagesender object, which implements the following interfaces: nsiprocesschecker nsiframescriptloader nsimessagelistenermanager nsimessagesender the browser message manager can be accessed as a property of the xul <browser> element: // chrome script let browsermm = gbrowser.selectedbrowser.messagemanager; process message managers process message managers correspond to process boundaries, and enable code running in different processes to communicate.
mozbrowseractivitydone
the mozbrowseractivitydone event is fired when something inside the browser <iframe> triggers a web activity, and that web activity's message is consumed by the receiving app.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbr...
mozbrowseraudioplaybackchange
the mozbrowseraudioplaybackchange event is fired when audio starts or stops playing within a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
the mozbrowserclose event is fired when the content of a browser <iframe> calls the window.close() method.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
the mozbrowserdocumentfirstpaint event is fired when a new paint occurs on any document in the browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
the mozbrowsererror event is fired when an error occurs while trying to load content within a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
...terrupt nettimeout cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrow...
mozbrowserfirstpaint
the mozbrowserfirstpaint event is fired when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank).
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsericonchange
<link rel="icon"> or <link rel="apple-touch-icon">) is available in the browser <iframe>'s content.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserti...
mozbrowserloadstart
the mozbrowserloadstart event is fired when the browser <iframe> starts to load a new page.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuri...
mozbrowserlocationchange
the mozbrowserlocationchange event is fired when a browser <iframe>'s location changes — it is fired every time navigation occurs.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpass...
mozbrowsermanifestchange
the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlech...
mozbrowsersecuritychange
the mozbrowsersecuritychange event is fired when the browser <iframe> has connected to the server, and when the mixed content state changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswor...
mozbrowserselectionstatechanged
the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserselectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserload...
mozbrowsertitlechange
the mozbrowsertitlechange event is fired when the title of a browser <iframe> (i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
the mozbrowserusernameandpasswordrequired event is fired when the content within a browser <iframe> requires an http authentification.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange ...
Mozilla Style System Documentation
in the layout system, these formatting objects are described as frames (interface nsiframe), although a pair of frames represents table formatting objects.
... dynamic changes describe nsframemanager::reresolvestylecontext and nsiframe::getparentstylecontextframe ...</p> describe nscssframeconstructor::attributechanged hack for style attribute that avoids style context tree manipulation.
... the fundamental way to get a style struct from a style context looks like this: const nsstyledisplay *display = ns_static_cast(const nsstyledisplay*, sc->getstyledata(estylestruct_display)); there is also a (non-virtual) method on nsiframe to get the style data from a frame's style context (saving the refcounting needed to get the style context): const nsstyledisplay *display; frame->getstyledata(estylestruct_display, (const nsstylestruct*&)display); however, there are similar typesafe global function templates that (should) compile to the same thing but use the type of the template parameter to pass the correct nsstylestructid ...
Midas
notes since an entire document becomes editable, authors often load the editable document into an iframe and do the bulk of the scripting in the parent document.
... according to standards, the iframe element has the contentdocument property that refers to the document in the inline frame.
... examples this example shows the basic structure described in the notes section : <html> <head> <title>simple edit box</title> </head> <body> <iframe id="midasform" src="about:blank" onload="this.contentdocument.designmode='on';" ></iframe> </body> </html> methods document.execcommand executes the given command.
Working with windows in chrome code
content windows when a xul window contains a widget capable of displaying a page, such as <browser> or <iframe>, the document in that widget is, naturally, separate from the document of the chrome window itself.
... 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>.
Firefox Developer Tools
this button only appears when there are multiple iframes on a page.
... click it to display a list of the iframes on the current page and select the one with which you want to work.
... connecting to iframes connect the developer tools to a specific iframe in the current page.
Channel Messaging API - Web APIs
the channel messaging api allows two separate scripts running in different browsing contexts attached to the same document (e.g., two iframes, or the main document and an iframe, two documents via a sharedworker, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
... examples we have published a channel messaging basic demo on github (run it live too), which shows a really simple single message transfer between a page and an embedded <iframe>.
... you can also see a multimessaging demo (run this live), which shows a slightly more complex setup that can send multiple messages between main page and iframe.
Cross-global fetch usage - Web APIs
when a cross-origin fetch involving a relative url is initiated from an <iframe>, the relative url used to be resolved against the current global location, rather than the iframe's location.
...to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-global, e.g.
...so in the case described above, it is resolved against the iframe's location: let absolute = new url(relative, frame.contentwindow.location.href) there is a lot of discussion in progress about getting new specs to align with this behavior change, to mitigate potential problems going forward.
contentDocument - Web APIs
if the iframe and the iframe's parent document are same origin, returns a document (that is, the active document in the inline frame's nested browsing context), else returns null.
... example of contentdocument var iframedocument = document.getelementsbytagname("iframe")[0].contentdocument; iframedocument.body.style.backgroundcolor = "blue"; // this would turn the iframe blue.
... specifications specification status comment html living standardthe definition of 'htmliframeelement: contentdocument' in that specification.
MessageChannel() - Web APIs
when the iframe has loaded, we pass port2 to the iframe using messageport.postmessage along with a message.
... the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage), putting it into a paragraph.
... 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.
... the handlemessage handler then responds to a message being sent back from the <iframe> (using messageport.onmessage), putting it into a paragraph.
... 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.
... the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage), putting it into a paragraph.
... 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 - 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.
... when a message is received back from the iframe, the onmessage function simply outputs the message to a paragraph.
... var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.onmessage - Web APIs
when the iframe has loaded, we pass messagechannel.port2 to the iframe using messageport.postmessage along with a message.
... the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = 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.
... the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [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 - 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.
... when a message is received back from the iframe, the onmessage function simply outputs the message to a paragraph.
... var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
Page Visibility API - Web APIs
visibility states of an <iframe> are the same as the parent document.
... hiding an <iframe> using css properties (such as display: none;) doesn't trigger visibility events or change the state of the document contained within the frame.
...these may include: most browsers stop sending requestanimationframe() callbacks to background tabs or hidden <iframe>s in order to improve performance and battery life.
Using the Storage Access API - Web APIs
accessing a user's cookies in an embedded cross-origin iframe in this example we show how an embedded cross-origin <iframe> can access a user’s cookies under a storage access policy that blocks third-party cookies.
... first of all, if the <iframe> is sandboxed, the embedding website needs to add the allow-storage-access-by-user-activation sandbox token to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
... </iframe> now on to the code executed inside the embedded document.
Window.print() - Web APIs
WebAPIWindowprint
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprintchrome full support 1notes full support 1notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 5opera full support 6notes full support 6notes notes start...
...ing with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1.1webview android full support 1notes full support 1notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support 18notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android no support ...
... nonotes no support nonotes notes see bug 1247609.opera android full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari ios full support 1samsung internet android full support 1.0notes full support 1.0notes notes starting with samsung internet 5.0, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.legend full support ...
Text labels and names - Accessibility
frame elements must be labeled frame elements, both <iframe> and the older, obsolete <frame>, must have a title to describe the contents of the frame.
... example <iframe title="mdn web docs" width="300" height="200" src="https://developer.mozilla.org"> </iframe> use alt attribute to label mglyph elements when writing equations with mathml, give each <mglyph> element an alt attribute containing a name that describes the symbol.
... use title attribute to describe <iframe> content make sure that <iframe> elements have a title attribute to describe the contents of the frame.
Printing - Developer guides
you can also try changing the code to use <code>beforeprint</code> to see the difference.</p> <p><a href="javascript: popuponclick()">open popup window</a></p> </body> </html> view live examples print an external page without opening it if you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: htmliframeelement), automatically removing it after the user prints its contents.
...ipt"> function closeprint () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');" style="cursor:p...
...ointer;text-decoration:underline;color:#0000ff;">print external page!</span></p> </body> </html> note: older versions of internet explorer cannot print the contents of a hidden <iframe>.
itemprop - HTML: Hypertext Markup Language
property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>.
... if the element is a meta element the value is the value of the element's content attribute if the element is an audio, embed, iframe, img, source, track, or video element the value is the resulting url string that results from parsing the value of the element's src attribute relative to the node document (part of the microdata dom api) of the element at the time the attribute is set if the element is an a, area, or link element the value is the resulting url string that results from parsing the value of the e...
...the url property elements are the a, area, audio, embed, iframe, img, link, object, source, track, and video elements.
Lazy loading - Web Performance
see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load.
... loading attribute the loading attribute on an <img> element (or the loading attribute on an <iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.
... <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.
Web security
consequently, your website may appear broken to users (if iframes or plugins don't load, etc.).
... http x-frame-options the x-frame-options http response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>.
... csp: frame-ancestors the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
Porting the Library Detector - Archive of obsolete content
list.foreach(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.
... so main.js needs to filter out any duplicates, in case a page contains more than one iframe, and those iframes use the same library.
ui/frame - Archive of obsolete content
experimental create html iframes, using bundled html, css and javascript, that can be added to a designated area of the firefox user interface.
...a frame creates a separate iframe instance for each browser window.
Low-Level APIs - Archive of obsolete content
xul <iframe> elements) that are not displayed to the user.
... ui/frame create html iframes, using bundled html, css and javascript, that can be added to a designated area of the firefox user interface.
Tabbed browser - Archive of obsolete content
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.
... // note that this includes frames/iframes within the document gbrowser.addeventlistener("load", examplepageload, true); }, false); ...
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
our ad-serving partner basically requires that we use iframes to dynamically pull in ads from available inventory.
... because of the iframe, we backed off of the idea that we'd be able to adhere to xhtml strict rules, and settled for using the xhtml transitional dtd.
jspage - Archive of obsolete content
(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(browser.engine.trident)?null:window.window,initialize:function(a){$uid(a); if(!a.element){a.element=$empty;if(browser.engine.webkit){a.document.createelement("iframe");}a.element.prototype=(browser.engine.webkit)?window["[[domelement.prototype]]"]:{}; }a.document.window=a;return $extend(a,window.prototype);},afterimplement:function(b,a){window[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.
...lement(a,b);}return document.id(a).set(b);},afterimplement:function(a,b){element.prototype[a]=b; if(array[a]){return;}elements.implement(a,function(){var c=[],g=true;for(var e=0,d=this.length;e<d;e++){var f=this[e][a].apply(this[e],arguments);c.push(f); if(g){g=($type(f)=="element");}}return(g)?new elements(c):c;});}});element.prototype={$family:{name:"element"}};element.constructors=new hash;var iframe=new native({name:"iframe",generics:false,initialize:function(){var f=array.link(arguments,{properties:object.type,iframe:$defined}); var d=f.properties||{};var c=document.id(f.iframe);var e=d.onload||$empty;delete d.onload;d.id=d.name=$pick(d.id,d.name,c?(c.id||c.name):"iframe_"+$time()); c=new element(c||"iframe",d);var b=function(){var g=$try(function(){return c.contentwindow.location.host;});i...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
alternatively, you could use an iframe to add a rich text editor.
... rich text differences mozilla supports the w3c standard of accessing iframe's document object through iframeelmref.contentdocument, while internet explorer requires you to access it through document.frames["iframename"] and then access the resulting document: <script> function getiframedocument(aid) { var rv = null; // if contentdocument exists, w3c compliant (mozilla) if (document.getelementbyid(aid).contentdocument){ rv = document.getelementbyid(aid).contentdocument; } else { // ie rv = document.frames[aid].document; } return rv; } </script> another difference between mozilla and internet explorer is the html that the rich text editor creates.
browser.type - Archive of obsolete content
subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type.
... see also more information in the xul tutorial and iframe ...
Introduction to XUL - Archive of obsolete content
f="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble.
...(see menu bars and menus for details.) finally there is an html iframe.
Features of a Window - Archive of obsolete content
as in html, you can use the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... see also window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script...
...rspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbo...
browser - Archive of obsolete content
it is similar to an iframe except that it holds a page history and contains additional methods to manipulate the currently displayed page.
...subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type.
xbDesignMode.js - Archive of obsolete content
* * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xbdesignmode a javascript wrapper for browsers that support designmode */ function xbdesignmode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == "iframe") ){ this.miframeelement = aifr...
...ame; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ // gecko this.meditordocument = this.miframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocument = this.miframeelement.contentwindow.document; this.meditordocument.designmode = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xbdesignmode.prototype.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xbdesignmode.prototype.setcsscreation = function (a...
-ms-flow-into - Archive of obsolete content
the -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.
... initial valuenoneapplies toiframe elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none default.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
in modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe.
... 518 document environment codingscripting, glossary, javascript when the javascript global environment is a window or an iframe, it is called a document environment.
Multimedia and Embedding - Learn web development
from <object> to <iframe> — other embedding technologies at this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements.
... <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology on its way out, but which you may still see semi-regularly.
Website security - Learn web development
this technique might be used, for example, to display a legitimate bank site but capture the login credentials into an invisible <iframe> controlled by the attacker.
...as a defense, your site can prevent itself from being embedded in an iframe in another site by setting the appropriate http headers.
mozbrowsermetachange
general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ".
mozbrowseropensearch
general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitle...
mozbrowseropentab
the mozbrowseropentab event is fired when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the typ...
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitle...
mozbrowserscrollviewchange
general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernamea...
GCIntegration - SpiderMonkey Redirect 1
{{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental1.svg", embedding: "iframe", height:"130"} }} assume object b is already marked, as in the leftmost frame, while objects a and c have not been marked yet.
...to see how weak pointers can cause trouble, consider the following situation: {{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental2.svg", embedding: "iframe", height:"130"} }} in the left frame, a has a weak pointer to c.
nsIAccessibilityService
cessible createrootaccessible(in nsipresshell ashell, in nsidocument adocument); nsiaccessible createhtml4buttonaccessible(in nsisupports aframe); nsiaccessible createhypertextaccessible(in nsisupports aframe); nsiaccessible createhtmlbraccessible(in nsisupports aframe); nsiaccessible createhtmlbuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlaccessiblebymarkup(in nsiframe aframe, in nsiweakreference aweakshell, in nsidomnode adomnode); nsiaccessible createhtmlliaccessible(in nsisupports aframe, in nsisupports abulletframe, in astring abullettext); nsiaccessible createhtmlcheckboxaccessible(in nsisupports aframe); nsiaccessible createhtmlcomboboxaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlgenericaccessible(in...
...; nsiaccessible createhtmltableheadaccessible(in nsidomnode adomnode); nsiaccessible createhtmltextaccessible(in nsisupports aframe); nsiaccessible createhtmltextfieldaccessible(in nsisupports aframe); nsiaccessible createhtmlcaptionaccessible(in nsisupports aframe); nsiaccessible getaccessible(in nsidomnode anode, in nsipresshell apresshell, in nsiweakreference aweakshell, inout nsiframe framehint, out boolean aishidden); nsiaccessible addnativerootaccessible(in voidptr aatkaccessible); void removenativerootaccessible(in nsiaccessible arootaccessible); void invalidatesubtreefor(in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent); methods removenativerootaccessible() void removenativerootaccessible( in nsiaccessible arootaccessible ...
nsIAccessibleRole
role_internal_frame 10 a sub-document or iframe.
...it is used for the first child of a or iframe.
nsIChromeFrameMessageManager
1.0 66 introduced gecko 2.0 inherits from: nsiframemessagemanager last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void loadframescript(in astring aurl, in boolean aallowdelayedload); void removedelayedframescript(in astring aurl); methods loadframescript() loads a script into the remote frame.
... see also content process event handling nsicontentframemessagemanager nsiframeloader nsiframemessagelistener ...
nsIContentView
content/base/public/nsiframeloader.idlscriptable represents a scrollable content view whose contents are actually drawn by a separate process; this is part of the electrolysis multi-process support framework.
... note: currently, only <frame> and <iframe> elements are handled as content views.
nsIDOMMozNetworkStatsManager
if true, return only browsing traffic, which is generated from the mozbrowser iframe element within an app.
... if false or not set, the total traffic, which is generated from both the mozapp and mozbrowser iframe elements, is returned.
nsISelectionPrivate
method overview void addselectionlistener(in nsiselectionlistener newlistener); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only!
... void getcachedframeoffset( in nsiframe aframe, in print32 inoffset, in nspointref apoint ); parameters aframe inoffset apoint getenumerator() nsienumerator getenumerator(); parameters none.
nsIWindowWatcher
aname a window name assigned using window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
...see window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
XPCOM Interface Reference
inknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpu...
...pgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservicensilogininfonsiloginmanagernsiloginmanagercryptonsiloginmanageriemigrationhelpernsiloginmanagerprompternsiloginmanagerstoragensiloginmetainfonsimimeinputstreamnsimacdocksupportnsimarkupdocumentviewernsimemorynsimemorymultireporternsimemorymultireportercallbacknsimemoryreporternsimemoryreportermanagernsimenuboxobjectnsimessagebroadcasternsimessagelistenernsimessagelistenermanagernsimessagesendernsim...
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.
... criteria in order to improve firefox security and performance, there are two major categories of sites mozilla may choose to add to plugin domain blocking: sites commonly embedded in a 3rd-party context web sites which are commonly embedded into other sites using iframes can have a large impact on browser security and also cause many sites to show plugin activation prompts.
Browser Toolbox - Firefox Developer Tools
targeting a document in the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the document.
... the same button appears in the browser toolbox where it lists all the top-level chrome and content windows as well as any iframes they contain.
Index - Firefox Developer Tools
16 dom property viewer dom, tools, web development the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the window object of the current page or the selected iframe.
... 156 working with iframes debugging, devtools, developer tools, frames, tools you can point the developer tools at a specific iframe within a document.
Console messages - Firefox Developer Tools
password fields present on an insecure (http://) iframe.
... iframes containing login forms must be served over https, not http.
Web Console Helpers - Firefox Developer Tools
cd() switches javascript evaluation context to a different iframe in the page.
...you can supply any of the following: a selector string to be passed to document.queryselector to locate the iframe element the iframe element itself the content window inside the iframe see working with iframes.
BroadcastChannel: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button.
... there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element.
CanvasRenderingContext2D.drawWindow() - Web APIs
top-level browsed documents are usually not transparent because the user's background-color preference is applied, but iframes are transparent if the page doesn't set a background.
... with this method, it is possible to fill a hidden iframe with arbitrary content (e.g., css-styled html text, or svg) and draw it into a canvas.
DOMImplementation.createHTMLDocument() - Web APIs
example this example creates a new html document and inserts it into an <iframe> in the current document.
... here's the html for this example: <body> <p>click <a href="javascript:makedocument()">here</a> to create a new document and insert it below.</p> <iframe id="theframe" src="about:blank" /> </body> the javascript implementation of makedocument() follows: function makedocument() { let frame = document.getelementbyid("theframe"); let doc = document.implementation.createhtmldocument("new document"); let p = doc.createelement("p"); p.innerhtml = "this is a new paragraph."; try { doc.body.appendchild(p); } catch(e) { console.log(e); } // copy the new html document into the frame let destdocument = frame.contentdocument; let srcnode = doc.documentelement; let newnode = destdocument.importnode(srcnode, true); destdocument.replacechild(newnode, destdocument.d...
DocumentOrShadowRoot.elementFromPoint() - Web APIs
if the element at the specified point belongs to another document (for example, the document of an <iframe>), that document's parent element is returned (the <iframe> itself).
... if the method is run on another document (like an <iframe>'s subdocument), the coordinates are relative to the document where the method is being called.
Using files from web applications - Web APIs
in firefox, to have the pdf appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false .
... <iframe id="viewer"> and here is the change of the src attribute: const obj_url = url.createobjecturl(blob); const iframe = document.getelementbyid('viewer'); iframe.setattribute('src', obj_url); url.revokeobjecturl(obj_url); example: using object urls with other file types you can manipulate files of other formats the same way.
Fullscreen API - Web APIs
in firefox 44 and onwards this has been fixed: only elements in the top-level document or in an <iframe> element with the allowfullscreen attribute can be displayed fullscreen.alternate name uses the non-standard name: mozrequestfullscreenie full support 11prefixed full support 11prefixed prefixed implemented with the vendor prefix: msopera full support 58 ...
...in firefox 44 and onwards this has been fixed: only elements in the top-level document or in an <iframe> with the allowfullscreen attribute can be displayed fullscreen.alternate name uses the non-standard name: mozrequestfullscreenopera android full support 50 full support 50 full support 14prefixed prefixed implemented with the vendor prefix: webkit n...
srcdoc - Web APIs
the srcdoc property of the htmliframeelement specifies the content of the page.
... examples var iframe = document.createelement("iframe"); iframe.srcdoc = `<!doctype html><p>hello world!</p>`; document.body.appendchild(iframe); specifications specification status comment html living standardthe definition of 'htmliframeelement: srcdoc' in that specification.
Intersection Observer API - Web APIs
if one of the containing elements is the root of a nested browsing context (such as the document contained in an <iframe>, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block.
... so if the top level of an <iframe> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.
Using Navigation Timing - Web APIs
html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the result looks like this: the values listed are for the <iframe> in which the sample is presented.
Request.context - Web APIs
WebAPIRequestcontext
the deprecated context read-only property of the request interface contains the context of the request (e.g., audio, image, iframe).
... the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the url is for an image, or an embeddable object such as a <video>, iframe, etc.
Using the Screen Capture API - Web APIs
this can be done using the feature-policy http header or—if you're using the screen capture api in an <iframe>, the <iframe> element's allow attribute.
... 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> ...
Selection - Web APIs
WebAPISelection
can return null if selection never existed in the document (e.g., an iframe that was never clicked on).
...can return null if selection never existed in the document (for example, in an iframe that was never clicked on).
TaskAttributionTiming.containerType - Web APIs
the containertype readonly property of the taskattributiontiming interface returns the type of frame container, one of iframe, embed, or object.
... syntax var containertype = taskattributiontiming.containertype; value a domstring containing the container's type, one of iframe, embed, or object.
TaskAttributionTiming - Web APIs
the frame context, also called the container, is the iframe, embed or object that is being implicated, on the whole, for a long task.
...="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
VisualViewport - Web APIs
for a page containing iframes, each iframe, as well as the containing page, will have a unique window object.
...for an <iframe>, visual viewport metrics like visualviewport.width always correspond to layout viewport metrics like document.documentelement.clientwidth.
Functions and classes available to Web Workers - Web APIs
o postmessage() yes, on dedicatedworkerglobalscope no no unknown no apis available in workers function functionality support in gecko (firefox) support in ie support in blink (chrome and opera) support in webkit (safari) broadcast channel api allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).
... channel messaging api allows two separate scripts running in different browsing contexts attached to the same document (e.g., two iframes, or the main document and an iframe, two documents via a sharedworker, or two workers) to communicate directly via two ports.
Web Workers API - Web APIs
in addition to dedicated workers, there are other types of worker: shared workers are workers that can be utilized by multiple scripts running in different windows, iframes, etc., as long as they are in the same domain as the worker.
... sharedworker represents a specific kind of worker that can be accessed from several browsing contexts, being several windows, iframes or even workers.
Window.frameElement - Web APIs
the window.frameelement property returns the element (such as <iframe> or <object>) in which the window is embedded.
... note: despite this property's name, it works for documents embedded within any embedding point, including <object>, <iframe>, or <embed>.
Window.open() - Web APIs
WebAPIWindowopen
the window interface's open() method loads the specified resource into the new or existing browsing context (window, <iframe> or tab) with the specified name.
... windowname optional a domstring specifying the name of the browsing context (window, <iframe> or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowname.
window.postMessage() - Web APIs
the window.postmessage() method safely enables cross-origin communication between window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
...methods for obtaining such a reference include: window.open (to spawn a new window and then reference it), window.opener (to reference the window that spawned this one), htmliframeelement.contentwindow (to reference an embedded <iframe> from its parent window), window.parent (to reference the parent window from within an embedded <iframe>), or window.frames + an index value (named or numeric).
Window: unload event - Web APIs
bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
... examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!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> �...
Replaced elements - CSS: Cascading Style Sheets
some replaced elements, such as <iframe> elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.
... replaced elements typical replaced elements are: <iframe> <video> <embed> <img> some elements are treated as replaced elements only in specific cases: <option> <audio> <canvas> <object> <applet> html spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>.
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
instead of the <frame> element, <iframe> may be preferred.
... example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/element/iframe" /> <frame src="https://udn.realityripple.com/docs/web/html/element/frame" /> </frameset> ...
Global attributes - HTML: Hypertext Markup Language
dir is supported on all elements but <applet>, <base>, <basefont>, <bdo>, <br>, <frame>, <frameset>, <iframe>, <param>, and <script>.
... lang is supported on all elements but <applet>, <base>, <basefont>, <br>, <frame>, <frameset>, <iframe>, <param>, and <script>.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>.
... 115 <iframe>: the inline frame element content, element, embedded content, embedding, frames, html, html embedded content, inline frames, reference, web, embedded, iframe the html inline frame element (<iframe>) represents a nested browsing context, embedding another html page into the current one.
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>.
... examples violation cases given this csp header: content-security-policy: child-src https://example.com/ this <iframe> and worker are blocked and won't load: <iframe src="https://not-example.com"></iframe> <script> var blockedworker = new worker("data:application/javascript,..."); </script> specifications specification status comment content security policy level 3the definition of 'child-src' in that specification.
CSP: frame-ancestors - HTTP
the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
... 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: frame-src - HTTP
the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
... examples violation cases given this csp header: content-security-policy: frame-src https://example.com/ the following <iframe> is blocked and won't load: <iframe src="https://not-example.com/"></iframe> specifications specification status comment content security policy level 3the definition of 'frame-src' in that specification.
CSP: sandbox - HTTP
the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute.
... allow-presentation allows embedders to have control over whether an iframe can start a presentation session.
Large-Allocation - HTTP
it can occur in these situations: the document with the large-allocation header was loaded in an <iframe>.
... firefox cannot move an iframe into a new process currently, so the document must load in the current process.
HTTP headers - HTTP
WebHTTPHeaders
feature-policy provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds.
... x-frame-options (xfo) indicates whether a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>.
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.
... examples no permission to access document <!doctype html> <html> <head> <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> <script> onload = function() { console.log(frames[0].document); // error: permission denied to access property "document" } </script> </head> <body></body> </html> ...
Array.isArray() - JavaScript
ng calls return false array.isarray(); array.isarray({}); array.isarray(null); array.isarray(undefined); array.isarray(17); array.isarray('array'); array.isarray(true); array.isarray(false); array.isarray(new uint8array(32)); array.isarray({ __proto__: array.prototype }); instanceof vs isarray when checking for array instance, array.isarray is preferred over instanceof because it works through iframes.
... var iframe = document.createelement('iframe'); document.body.appendchild(iframe); xarray = window.frames[window.frames.length-1].array; var arr = new xarray(1,2,3); // [1,2,3] // correctly checking for array array.isarray(arr); // true // considered harmful, because doesn't work through iframes arr instanceof array; // false specifications specification ecmascript (ecma-262)the definition of 'array.isarray' in that specification.
Same-origin policy - Web security
anything embedded by <iframe>.
... cross-origin script api access javascript apis like iframe.contentwindow, window.parent, window.open, and window.opener allow documents to directly reference each other.
Content Scripts - Archive of obsolete content
in particular, they can't access content hosted in an iframe, if that content is served from a different domain, or make cross-domain xmlhttprequests.
panel - Archive of obsolete content
embedding an iframe in the panel, and changing its document setting the panel's contenturl property.
ui - Archive of obsolete content
from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and javascript.
frame/hidden-frame - Archive of obsolete content
xul <iframe> elements) that are not displayed to the user.
lang/type - Archive of obsolete content
the difference is that the type constructor can be from a scope that has a different top level object: for example, it could be from a different iframe, module or sandbox.
package.json - Archive of obsolete content
cross-domain-content: a list of domains for which content scripts are given cross-domain privileges to access content in iframes or to make xmlhttprequests.
Modifying Web Pages Based on URL - Archive of obsolete content
in particular, the pagemod constructor takes several additional options to control its behavior: by default, content scripts are not attached to any tabs that are already open when the page-mod is created, and are attached to iframes as well as top-level documents.
HTML in XUL for rich tooltips - Archive of obsolete content
for security reasons, the conversion will strip out some of the more dangerous elements in the html string, like javascript and iframes.
On page load - Archive of obsolete content
// if (win.frameelement) return; // skip iframes/frames alert("page is loaded \n" +doc.location.href); } } window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); references if you need to have a more complicated listener (not just onload), use progress listeners.
Code snippets - Archive of obsolete content
applies to scrollbars in browser and iframe as well.
Interaction between privileged and non-privileged pages - Archive of obsolete content
var targetdoc = null; function onload() { var iframe = document.getelementbyid("contentiframe"); targetdoc = iframe.contentdocument; iframe.contentwindow.addeventlistener("newstuff", receivestufffrompage, false); } function receivestufffrompage(event) { var uc = geteventdata(event); // uc = unchecked data in form of e4x xml var stuff = {}; stuff.id = sanitize.integer(uc.@id); stuff.name = sanitize.label(uc.@name); } function sendsomet...
Intercepting Page Loads - Archive of obsolete content
few modern sites use framesets, but it is common for ads to appear inside iframe elements.
Security best practices in extensions - Archive of obsolete content
the main way to do this is by creating an iframe or browser element in the sidebar, and loading your content there.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
main roles nsdocshell this class corresponds, basically, to a "window" object in javascript -- each frame, iframe, content area, tab, etc has its own docshell.
Documentation for BiDi Mozilla - Archive of obsolete content
ing, including: character classification symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidiframes.cpp subclass of nsframe with additional method setoffsets, to adjust mcontentoffset and mcontentlength during bidi processing nsdirectionalframe layout/generic/nsbidiframes.cpp subclass of nsframethis is a special frame which represents a bidi control.
Layout System Overview - Archive of obsolete content
the class nsframe is the base class for all frames, and it inherits from the base class nsiframe (note: nsiframe is not an interface, it is an abstract base class.
statusBar - Archive of obsolete content
namespace: jetpack.statusbar methods copybackground embediframe append the append methods adds a new item to the statusbar.
Safely loading URIs - Archive of obsolete content
by passing the string to something that loads it in a <browser> or <iframe>), you must call checkloaduristr to be secure.
Elements - Archive of obsolete content
the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol.
showcaret - Archive of obsolete content
examples <iframe id="content-body" src="http://www.mozilla.org/" showcaret="true"/> <browser src="http://www.mozilla.org" flex="1" showcaret="true"/> ...
src - Archive of obsolete content
ArchiveMozillaXULAttributesrc
examples <iframe id="content-body" src="http://www.mozilla.org/"/> <browser src="http://www.mozilla.org" flex="1"/> <image src='firefoxlogo.png' width='135' height='130'/> see also prefpane.src treecell.src treecol.src script.src stringbundle.src checkbox.src ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
each xul window has its own distinct document, and there may even be a few different documents in a single window, when there is an <iframe>, <browser>, or a <tabbrowser> element.
Adding Methods to XBL-defined Elements - Archive of obsolete content
methods are the functions of objects, such as window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
the following code should be added in place of the iframe.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner ...
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.
panel - Archive of obsolete content
ArchiveMozillaXULpanel
warning: for firefox versions between 3.6 and 4.0, placing an iframe, browser or editor inside a panel is not supported.
toolbar - Archive of obsolete content
the chromeclass-toolbar class may be used to create a toolbar where its visibility depends on the toolbar flag when opening the window with the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
Opening a Link in the Default Browser - Archive of obsolete content
this is how you do it: var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("http")) { // handler for http:// urls exists } link within an iframe to enable a link inside an html document that is the "src" of an iframe to be opened in the default browser, setting the preference: pref("network.protocol-handler.expose-all", false); seems to work.
reftest opportunities files - Archive of obsolete content
ml parser/htmlparser/tests/html/26347.html parser/htmlparser/tests/html/24462.html parser/htmlparser/tests/html/24184.html parser/htmlparser/tests/html/22596.html parser/htmlparser/tests/html/22480.html parser/htmlparser/tests/html/22263.html parser/htmlparser/tests/html/20087.html parser/htmlparser/tests/html/19116.html parser/htmlparser/tests/html/187790.html parser/htmlparser/tests/html/184029_iframe.html parser/htmlparser/tests/html/184029.html parser/htmlparser/tests/html/183711.html parser/htmlparser/tests/html/18308.html parser/htmlparser/tests/html/17003.html parser/htmlparser/tests/html/15204.html parser/htmlparser/tests/html/149877.html parser/htmlparser/tests/html/142965_1.html parser/htmlparser/tests/html/142965.html parser/htmlparser/tests/html/124788.html parser/htmlparser/tests/ht...
Extentsions FAQ - Archive of obsolete content
there's a bug in bugzilla about stacking other widgets on top of browser/iframe, which hopefully will be fixed for gecko 1.9.
2006-09-29 - Archive of obsolete content
he needs help testing it out and wants to know how to make an iframe loads not go into the history.
CSS - Archive of obsolete content
ArchiveWebCSS
rosoft extension that sets or retrieves the filter or collection of filters applied to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to thre...
Browsing context - MDN Web Docs Glossary: Definitions of Web-related terms
in modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe.
First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
this excludes any content of iframes, but includes text with pending webfonts.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
frame-ancestors specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
document environment - MDN Web Docs Glossary: Definitions of Web-related terms
when the javascript global environment is a window or an iframe, it is called a document environment.
Images, media, and form elements - Learn web development
this technique will work with other replaced elements such as <video>s, or <iframe>s.
Sizing items in CSS - Learn web development
to see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport).
CSS values and units - Learn web development
if you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work.
Styling links - Learn web development
the reason for this is that if we used real links, you would be able to load an external site in the <iframe> the live example is embedded in, thereby losing the example.
What is a URL? - Learn web development
discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its related resources through various elements such as <link> or <script>; to display media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element.
Images in HTML - Learn web development
overview: multimedia and embedding next in this module images in html video and audio content from <object> to <iframe> — other embedding technologies adding vector graphics to the web responsive images mozilla splash page ...
Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this module images in html video and audio content from <object> to <iframe> — other embedding technologies adding vector graphics to the web responsive images mozilla splash page ...
Test your skills: Multimedia and embedding - Learn web development
this aim of this skill test is to assess whether you've understood our video and audio content and from object to iframe — other embedding technologies articles.
Video and audio content - Learn web development
in the next article, we'll look at other ways of embedding content on the web, using technologies like <iframe> and <object>.
Third-party APIs - Learn web development
the youtube iframe player api to display the returned video examples inside iframe video players so you can watch them.
Test your skills: JSON - Learn web development
in the live code editor above, both the javascript code and the requested json file are on the same origin (the code sits on a github repo, and is embedded here in an <iframe>).
CSS performance optimization - Learn web development
some elements, including <video>, <canvas> and <iframe>, are also on their own layer.
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
Learning area release notes - Learn web development
you can see these on: html text fundamentals creating hyperlinks advanced text formatting images in html video and audio content from object to iframe — other embedding technologies ...
Client-Server Overview - Learn web development
the x-frame-options: deny line tells the browser not to allow this page to be embedded in an <iframe> in another site).
ZoomText
mozilla issues cannot tab into frames and iframes.
Limitations of chrome scripts
if the custom protocol is registered only in the chrome process, no iframes or tabs will be able to load any resource from the custom procotol.
Message manager
guides message manager overview frame script loading and lifetime communicating with frame scripts performance best practices frame script environment limitations of frame scripts process scripts api reference nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster nsimessagesender nsisyncmessagesender nsicontentframemessagemanager nsiprocessscriptloader ...
Chrome-only API reference
MozillaGeckoChromeAPI
browser apithe html browser api is an extension of the html <iframe> element that allows web apps to implement browsers or browser-like applications.
HTML parser threading
(this indeed means that removing parser-created nodes from the dom during parsing doesn't release memory until the parser stops parsing, which is, in theory, a problem for long polling using html in an iframe e.g.
Introduction to Layout in Mozilla
rough the frame hierarchy, areas are invalidated via nsiviewmanager::updateview unless immediate, invalid areas are coalesced and processed asynchronously via os expose event native expose event dispatched to widget; widget delegates to the view manager view manager paints views back-to-front, invoking presshell’s paint method presshell::paint walks from the view to the frame; invokes nsiframe::paint for each layer incrementalism single-threaded simple (no locking) can’t leave event queue unattended content construction unwinds “at will” parser and content sink do some buffering content sink has “notification limits” efficiency vs.
Services.jsm
event listener service etld nsieffectivetldservice effectivetld service focus nsifocusmanager focus manager io nsiioservice nsiioservice2 i/o service locale nsilocaleservice locale service logins nsiloginmanager password manager service metro nsiwinmetroutils 2 mm nsimessagebroadcaster nsiframescriptloader global frame message manager3 obs nsiobserverservice observer service perms nsipermissionmanager permission manager service ppmm nsimessagebroadcaster nsiprocessscriptloader global parent process message manager3 prefs nsiprefbranch nsiprefbranch2 nsiprefservice preferences service prompt nsiprompts...
source-editor.jsm
when using the default orion editor, this is a xul <xul:iframe> element.
Mozilla Style System
the style context has a getter for each struct, and nsiframe, which represents the concept of a css box (or rendering object), also has getters that forward to the frame's style context.
Hacking Tips
example output might look as follows: 0x1234abcd b global object ========== # zone 0x56789123 # compartment http://gmail.com [in zone 0x56789123] # compartment http://gmail.com/iframe [in zone 0x56789123] # arena allockind=3 size=64 0x1234abcd b object > 0x1234abcd b prop1 > 0xabcd1234 w prop2 0xabcd1234 w object > 0xdeadbeef b prop3 # arena allockind=5 size=72 0xdeadbeef w object > 0xabcd1234 w prop4 the output is textual.
inIDOMUtils
the parent of a document node is the frame/iframe containing that document.
mozIThirdPartyUtil
(this means that nested iframes with different base domains, even though the bottommost and topmost uris might be equal, will be considered third party.) for example, if auri is "http://mail.google.com/", 'awindow' has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the result will be true.
nsIAccessibleProvider
for example now it is used by <xul:iframe>, <xul:browser> and <xul:editor>.
nsIContainerBoxObject
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul browser, editor or iframe element implements this interface.
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.
nsIContentViewManager
content/base/public/nsiframeloader.idlscriptable manages the content views contained in a browser 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to obtain a reference to the view manager for a document, you can queryinterface() the nsiframeloader object to nsicontentviewmanager.
nsIDOMWindow
it represents a single window object that may contain child windows if the document in the window contains an html frameset document, or if the document contains iframe elements.
nsIDOMWindow2
it represents a single window object that may contain child windows if the document in the window contains an html frameset document, or if the document contains <iframe> elements.
nsIDOMWindowInternal
void print() void moveto(in long xpos, in long ypos) void moveby(in long xdif, in long ydif) void resizeto(in long width, in long height) void resizeby(in long widthdif, in long heightdif) void scroll(in long xscroll, in long yscroll) nsidomwindow window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
nsIDOMWindowUtils
note: for scrollable frames containing documents (that is, <frame> and <iframe>), the enclosed document's root element is returned.
nsIDOMXULElement
gets or creates a box object for the element; browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional properties not normally available from script.
nsIDocShell
allowsubframes boolean attribute stating if it should allow subframes (framesets/iframes) or not.
nsIDocumentLoader
uriloader/base/nsidocumentloader.idlscriptable this interface responsible for tracking groups of loads that belong together (images, external scripts, and so on.) and subdocuments (iframe, frame, and so on.).
nsIInProcessContentFrameMessageManager
content/base/public/nsiframemessagemanager.idlnot scriptable ???
nsIMessageWakeupService
currently, services must expose a wrappedjsobject in order to support this; however, once bug 593407 is fixed, the service to be woken up must implement nsiframemessagelistener.
nsINavHistoryQueryOptions
hidden things include the content of iframes and all images on web pages.
nsINavHistoryService
this is true of all images on a page, and the contents of the iframe.
nsIParserUtils
the sanitizer is designed to protect against xss when sanitized content is inserted into a different-origin context without an iframe-equivalent sandboxing mechanism.
nsISHEntry
isdynamicallyadded() returns true if the related docshell was added because of dynamic addition of an iframe/frame.
nsIWebBrowserFind
it does not by default search subframes or iframes.
nsIWebBrowserFindInFrames
embedding/components/find/public/nsiwebbrowserfind.idlscriptable controls how find behaves when multiple frames or iframes are present.
nsIWebBrowserPersist
persist_flags_ignore_iframes 8 ignore iframe content (usually adverts).
nsIWebProgressListener
this includes other document requests (for example corresponding to html <iframe> elements).
XPCOM Interface Reference by grouping
tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache nsiapplicationcachechannel nsiapplicationcachecontainer nsiapplicationcachenamespace nsiapplicationcacheservice places nsiannotationobserver ...
DOM Property Viewer - Firefox Developer Tools
the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the window object of the current page or the selected iframe.
Debugger.Object - Firefox Developer Tools
for example, a web browser might provide host annotations for global objects to distinguish top-level windows, iframes, and internal javascript scopes.
Examine and edit HTML - Firefox Developer Tools
note that this button is disabled if the selected element's type is such that adding a last-child would have no effect (for example, if is is an <html> or <iframe> element).
Settings - Firefox Developer Tools
as of firefox 62, if the option to "select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the settings tab is displayed, even if the current page doesn't include any iframes.
Tips - Firefox Developer Tools
cd switches the javascript evaluation context to a different iframe in the page.
AuthenticatorAssertionResponse.signature - Web APIs
note: this property may only be used in top-level contexts and will not be available in an <iframe> for example.
AuthenticatorAssertionResponse.userHandle - Web APIs
note: this property may only be used in top-level contexts and will not be available in an <iframe> for example.
AuthenticatorAssertionResponse - Web APIs
use from within an <iframe> element will not have any effect.
AuthenticatorAttestationResponse.getTransports() - Web APIs
note: this method may only be used in top-level contexts and will not be available in an <iframe> for example.
AuthenticatorAttestationResponse - Web APIs
use from within an <iframe> element will not have any effect.
BroadcastChannel - Web APIs
it allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin.
Broadcast Channel API - Web APIs
the broadcast channel api allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin.
Managing screen orientation - Web APIs
*/ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } } and here's the result portrait landscape note: the orientation media query actually applies based on the orientation of the browser window (or iframe) not the orientation of the device.
Credential Management API - Web APIs
calls to get() and store() within an <iframe> element will resolve without effect.
CredentialsContainer.create() - Web APIs
calls to it within an <iframe> element will resolve without effect.
CredentialsContainer.get() - Web APIs
calls to it within an <iframe> element will resolve without effect.
CredentialsContainer.store() - Web APIs
calls to it within an <iframe> element will resolve without effect.
DOMTokenList.supports() - Web APIs
example let iframe = document.getelementbyid('display'); if (iframe.sandbox.supports('an-upcoming-feature')) { // support code for mystery future feature } else { // fallback code } if (iframe.sandbox.supports('allow-scripts')) { // instruct frame to run javascript // // (note: this feature is well-supported; this is just an example!) // } specifications specification status comment cre...
DOMTokenList - Web APIs
such a set is returned by element.classlist, htmllinkelement.rellist, htmlanchorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
Detecting device orientation - Web APIs
[0,180] x += 90; y += 90; // 10 is half the size of the ball // it center the positioning point to the center of the ball ball.style.top = (maxy*y/180 - 10) + "px"; ball.style.left = (maxx*x/180 - 10) + "px"; } window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers.
Document.adoptNode() - Web APIs
example const iframe = document.queryselector('iframe'); const iframeimages = iframe.contentdocument.queryselectorall('img'); const newparent = document.getelementbyid('images'); iframeimages.foreach(function(imgel) { newparent.appendchild(document.adoptnode(imgel)); }); notes before they can be inserted into the current document, nodes from external documents should either be: cloned using document.importno...
Document.cookie - Web APIs
WebAPIDocumentcookie
it can be easily bypassed using the dom, for example by creating a hidden <iframe> element with the path of the cookie, then accessing this iframe's contentdocument.cookie property.
Document.designMode - Web APIs
example make an <iframe>'s document editable: iframenode.contentdocument.designmode = "on"; specifications specification status comment html living standardthe definition of 'designmode' in that specification.
Document.domain - Web APIs
WebAPIDocumentdomain
exceptions securityerror an attempt has been made to set domain under one of the following conditions: the document is inside a sandboxed <iframe> the document has no browsing context the document's effective domain is null the given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.o...
Document.featurePolicy - Web APIs
syntax var policy = iframeelement.featurepolicy value a featurepolicy object that can be used to inspect the feature policy settings applied to the document.
Document.fullscreenEnabled - Web APIs
full-screen mode is available only for a page that has no windowed plug-ins in any of its documents, and if all <iframe> elements which contain the document have their allowfullscreen attribute set.
Document.importNode() - Web APIs
example const iframe = document.queryselector("iframe"); const oldnode = iframe.contentwindow.document.getelementbyid("mynode"); const newnode = document.importnode(oldnode, true); document.getelementbyid("container").appendchild(newnode); notes before they can be inserted into the current document, nodes from external documents should either be: cloned using document.importnode(); or adopted using document.a...
Document: keydown event - Web APIs
<p>focus the iframe first (e.g.
Document: keypress event - Web APIs
<p>press inside this iframe first to focus it, then try pressing keys on the keyboard.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent document.onkeypress = logkey; specifications specification status ui events working draft ...
Document: keyup event - Web APIs
addeventlistener keyup example <p>focus the iframe first (e.g.
Document.querySelectorAll() - Web APIs
var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[...
Document.referrer - Web APIs
WebAPIDocumentreferrer
inside an <iframe>, the document.referrer will initially be set to the same value as the href of the parent window's window.location.
Document.write() - Web APIs
WebAPIDocumentwrite
note: in edge only, calling document.write() more than once in an <iframe> causes the error "script70: permission denied".
Element.msZoomTo() - Web APIs
WebAPIElementmsZoomTo
this method has no effect if called from a parent document to scroll or zoom content hosted in an iframe.
Element.name - Web APIs
WebAPIElementname
it only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.
Element.querySelectorAll() - Web APIs
var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is "userlist" which have a "data-active" attribute whose value is "1": var container = document.queryselector("#userlist"); var matches = container.queryselectora...
Element.requestFullscreen() - Web APIs
it must either be located within the top-level document or in an <iframe> which has the allowfullscreen attribute applied to it.
Event.timeStamp - Web APIs
WebAPIEventtimeStamp
example html <p> focus this iframe and press any key to get the current timestamp for the keypress event.
FetchEvent.respondWith() - Web APIs
note that navigation requests for windows and iframes do not use the final url.
Introduction to the File and Directory Entries API - Web APIs
for example, you can use the file api, create a blob, redirect an iframe to the blob, and invoke the download manager.
Guide to the Fullscreen API - Web APIs
for example, <iframe> elements have the allowfullscreen attribute in order to opt-in to allowing their content to be displayed in fullscreen mode.
HTMLImageElement.x - Web APIs
if the image is in an <iframe>, its x is relative to that frame.
HTMLImageElement.y - Web APIs
if the image is in an <iframe>, its y is relative to that frame.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
if a window is actually a container within an <iframe>, it likely shares an event loop with the window that contains it.
The HTML DOM API - Web APIs
t htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogress...
Basic concepts - Web APIs
<iframe> content) can access the indexeddb store for the origin it is embedded into, unless the browser is set to never accept third party cookies (see bug 1147821.) definitions this section defines and explains terms used in the indexeddb api.
Long Tasks API - Web APIs
culprit browsing context container the "culprit browsing context container", or "the container" for short, is the top level page, iframe, embed or object that the task occurred within.
MessagePort: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage...
MessagePort: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); })...
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
since this example is presented in an <iframe>, that top-left corner is the top-left corner of the frame, not the browser window.
Navigator.cookieEnabled - Web APIs
note: when the browser is configured to block third-party cookies, and navigator.cookieenabled is invoked inside a third-party iframe, it returns true in safari, edge spartan and ie (while trying to set a cookie in such scenario would fail).
Notification.requestPermission() - Web APIs
} we no longer show a live sample on this page, as chrome and firefox no longer allow notification permissions to be requested from cross-origin <iframe>s, with other browsers to follow.
Notification - Web APIs
} we no longer show a live sample on this page, as chrome and firefox no longer allow notification permissions to be requested from cross-origin <iframe>s, with other browsers to follow.
Using the Notifications API - Web APIs
https), and you can no longer allow notification permissions to be requested from cross-origin <iframe>s.
ParentNode.querySelectorAll() - Web APIs
var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[...
PasswordCredential - Web APIs
note: this interface is restricted to top-level contexts and cannot be used from an <iframe>.
Payment Request API - Web APIs
note: the api is available inside cross-origin <iframe> elements only if they have had the allowpaymentrequest attribute set on them.
PublicKeyCredential.getClientExtensionResults() - Web APIs
note: this method may only be used in top-level contexts and will not be available in an <iframe> for example.
PublicKeyCredential.id - Web APIs
note: this property may only be used in top-level contexts and will not be available in an <iframe> for example.
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
note: this method may only be used in top-level contexts and will not be available in an <iframe> for example.
PublicKeyCredential.rawId - Web APIs
note: this property may only be used in top-level contexts and will not be available in an <iframe> for example.
PublicKeyCredential.response - Web APIs
note: this property may only be used in top-level contexts and will not be available in an <iframe> for example.
PublicKeyCredential - Web APIs
use from within an <iframe> element will not have any effect.
Request.mode - Web APIs
WebAPIRequestmode
ther than by the request.request constructor, no-cors is typically used as the mode; for example, for embedded resources where the request is initiated from markup, unless the crossorigin attribute is present, the request is in most cases made using the no-cors mode — that is, for the <link> or <script> elements (except when used with modules), or <img>, <audio>, <video>, <object>, <embed>, or <iframe> elements.
Request - Web APIs
WebAPIRequest
request.context read only contains the context of the request (e.g., audio, image, iframe, etc.) request.credentials read only contains the credentials of the request (e.g., omit, same-origin, include).
Screen Capture API - Web APIs
feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow) can specify a desire to use the screen capture api using the policy control directive display-capture: <iframe allow="display-capture" src="/some-other-document.html"> the default allow list is self, which lets the any content within the document use screen capture.
Sensor APIs - Web APIs
const sensor = new absoluteorientationsensor(); sensor.start(); sensor.onerror = event => { if (event.error.name === 'securityerror') console.log("no permissions to use absoluteorientationsensor."); }; the following table describes for each sensor type, the name required for the permissions api, the <iframe> element's allow attribute and the feature-policy directive.
SharedWorker - Web APIs
the sharedworker interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers.
TaskAttributionTiming.containerId - Web APIs
a container is the iframe, embed or object etc.
TaskAttributionTiming.containerName - Web APIs
a container is the iframe, embed or object etc.
TaskAttributionTiming.containerSrc - Web APIs
a container is the iframe, embed or object etc.
Web Storage API - Web APIs
note: access to web storage from third-party iframes is denied if the user has disabled third-party cookies (firefox implements this behaviour from version 43 onwards.) note: web storage is not the same as mozstorage (mozilla's xpcom interfaces to sqlite) or the session store api (an xpcom storage utility for use by extensions).
Using Web Workers - Web APIs
shared workers a shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers.
Window.close() - Web APIs
WebAPIWindowclose
note also that close() has no effect when called on window objects returned by htmliframe​element​.content​window.
Window.content - Web APIs
WebAPIWindowcontent
this is useful in xul windows that have a <browser> (or tabbrowser or <iframe>) with type="content-primary" attribute on it — the most famous example is firefox main window, browser.xul.
Window.frames - Web APIs
WebAPIWindowframes
each item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].contentwindow).
Window.getSelection() - Web APIs
when called on an <iframe> that is not displayed (eg.
Window.length - Web APIs
WebAPIWindowlength
returns the number of frames (either <frame> or <iframe> elements) in the window.
Window: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this: const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const windowmessagebutton = document.queryselector('#window-message'); windowmessagebutton.addeventlistener('click', () => { targetframe.postmessage('hello there', targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this: window.addeventliste...
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.requestAnimationFrame() - Web APIs
requestanimationframe() calls are paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.
Window: resize event - Web APIs
bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect.
WindowEventHandlers.onlanguagechange - Web APIs
these events are received by the object implementing this interface, usually a window, an htmlbodyelement, or an htmliframeelement.
Web APIs
WebAPI
lcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeigneleme...
ARIA Test Cases - Accessibility
ws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - listbox and option dojo nightly build single select listbox using aria-activedescendant listbox in an iframe -- this is an important case as it's an example of how a mashup widget can be built (the widget source simply comes from another url, and is tied in using an iframe) yui "carousel" listbox -- a more advanced test case expected at behavior: (mz) screen reader should announce the label and role of the listbox when it gains focus.
ARIA: contentinfo role - Accessibility
contentinfo landmarks present in content embedded via <iframe> elements do not count towards this limit.
HTML To MSAA - Accessibility
e_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
the nsaccessibletreewalker class knows what it needs to expose by asking each dom node's primary frame (a gecko formatting object) for an nsiaccessible, using the nsiframe::getaccessible() method.
aspect-ratio - CSS: Cascading Style Sheets
in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification.
resize - CSS: Cascading Style Sheets
WebCSSresize
resize does not apply to the following: inline elements block elements for which the overflow property is set to visible formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
HTML5 - Developer guides
WebGuideHTMLHTML5
improvement in <iframe> using the sandbox and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
target where to display the linked url, as the name for a browsing context (a tab, window, or <iframe>).
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
this is the name of, or keyword for, a browsing context (a tab, window, or <iframe>).
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
in html5, it is a name/keyword for a browsing context (for example, tab, window, or iframe).
<frameset> - HTML: Hypertext Markup Language
WebHTMLElementframeset
note: because the use of frames is now discouraged in favor of using <iframe>, this element is not typically used by modern web sites.
<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
WebHTMLElementhead
permitted content if the document is an <iframe> srcdoc document, or if title information is available from a higher level protocol (like the subject line in html email), zero or more elements of metadata content.
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
the string must be the name of a browsing context (that is, a tab, window, or <iframe>.
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
the string must be the name of a browsing context (that is, a tab, window, or <iframe>.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
value applies to audio <audio> elements document <iframe> and <frame> elements embed <embed> elements fetch fetch, xhr this value also requires <link> to contain the crossorigin attribute.
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
WebHTMLElementnoframes
when frames are needed at all, they should be presented using the <iframe> element.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<iframe> the html inline frame element (<iframe>) represents a nested browsing context, embedding another html page into the current one.
dir - HTML: Hypertext Markup Language
recommendation supported on all elements but <applet>, <base>, <basefont>, <bdo>, <br>, <frame>, <frameset>, <iframe>, <param>, and <script>.
lang - HTML: Hypertext Markup Language
recommendation supported on all elements but <applet>, <base>, <basefont>, <br>, <frame>, <frameset>, <iframe>, <param>, and <script>.
title - HTML: Hypertext Markup Language
some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fallback for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements.
Inline elements - HTML: Hypertext Markup Language
list of "inline" elements the following elements are inline by default (although block and inline elements are no longer defined in html 5, use content categories instead): <a> <abbr> <acronym> <audio> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr> see also block-level elements html element reference display content categories block and inline layou...
Preloading content with rel="preload" - HTML: Hypertext Markup Language
document: an html document intended to be embedded by a <frame> or <iframe>.
CSP: block-all-mixed-content - HTTP
this also applies to <iframe> documents, ensuring the entire page is mixed content-free.
CSP: object-src - HTTP
elements controlled by object-src are perhaps coincidentally considered legacy html elements and aren't receiving new standardized features (such as the security attributes sandbox or allow for <iframe>).
Referrer-Policy - HTTP
for example, you can set the referrer policy for the entire document with a <meta> element with a name of referrer: <meta name="referrer" content="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets.
X-Frame-Options - HTTP
the x-frame-options http response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>.
Concurrency model and the event loop - JavaScript
just a message'); settimeout(function cb1() { console.log('callback 2: this is a msg from call back'); }, 0); console.log('this is the end'); })(); // "this is the start" // "this is just a message" // "this is the end" // "callback 1: this is a msg from call back" // "callback 2: this is a msg from call back" several runtimes communicating together a web worker or a cross-origin iframe has its own stack, heap, and message queue.
Grammar and types - JavaScript
for example, if a variable called phonenumber is declared in a document, you can refer to this variable from an iframe as parent.phonenumber.
globalThis - JavaScript
html and the windowproxy in many engines globalthis will be a reference to the actual global object, but in web browsers, due to iframe and cross-window security considerations, it references a proxy around the actual global object (which you can't directly access).
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <table>, and <video>, in addition to actual images (<img> and <input type="image">).
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
e x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" /> </svg> this example is embed in an iframe.
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
e x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" /> </svg> this example is embed in an iframe.
opacity - SVG: Scalable Vector Graphics
WebSVGAttributeopacity
as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <st...
overflow - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatabl...
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla...
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width...
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: 216 targetx filters, needsexample, svg, svg attribute the targetx attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
unknown elements in text render as unpositioned spans implementation status unknown offset distances of text positioned along a transformed path measured in text elements coordinate system implementation status unknown embedded content change notes <video> implementation status unknown <audio> implementation status unknown <iframe> implementation status unknown <canvas> implementation status unknown <source> implementation status unknown <track> implementation status unknown painting change notes paint-order implemented (bug 828805) will-change instead of buffered-rendering implementation status unknown context-fill and context-...
SVG as an Image - SVG: Scalable Vector Graphics
note that the above restrictions are specific to image contexts; they don't apply when svg content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
the best way to get access to the document representing an svg document is to look at htmliframeelement.contentdocument (if the document is presented in an <iframe>) or htmlobjectelement.contentdocument (if the document is presented in an <object> element), like this: var svgdoc = document.getelementbyid("iframe_element").contentdocument; in addition, the <iframe>, <embed>, and <object> elements offer a method, getsvgdocument(), which returns the xmldocument representing the element's embe...
Getting started - SVG: Scalable Vector Graphics
the svg file can be referenced with an object element: <object data="image.svg" type="image/svg+xml" /> likewise an iframe element can be used: <iframe src="image.svg"></iframe> an img element can theoretically be used too.
How to fix a website with blocked mixed content - Web security
consequently, your website may appear broken to users (if iframes or plugins don't load, etc.).
Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth).
Referer header: privacy and security concerns - Web security
social networking widgets embedded in <iframe>) from secure areas of your website, like password reset pages, payment forms, login areas, etc.
Secure contexts - Web security
for example, even for a document delivered over tls within an <iframe>, its context is not considered secure if it has an ancestor that was not also delivered over tls.
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 ...