Search completed in 2.39 seconds.
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 html
iframeelement 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/html
iframeelement" 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">html
iframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
... html
iframeelement.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
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 html
iframeelement 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/ns
iframeloader.idlscriptable represents the owner of an ns
iframeloader.
... 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 ns
iframeloaderowner aotherowner); attributes attribute type description frameloader ns
iframeloader the frame loader owned by this ns
iframeloaderowner.
...return value the ns
iframeloader owned by this object.
...And 3 more matches
nsIFrameMessageManager
method overview void addmessagelistener(in astring amessage, in ns
iframemessagelistener alistener, [optional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in ns
iframemessagelistener 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 ns
iframemessagelistener alistener [optional in boolean listenwhenclosed ); parameters amessage the name of the message for which to add a listener.
... alistener an object implementing ns
iframemessagelistener whose receivemessage method will be called when the message is received.
...And 3 more matches
HTMLIFrameElement.sendMouseEvent()
the sendmouseevent() method of the html
iframeelement interface allows you to fake a mouse event and send it to the browser <
iframe>'s content.
... syntax instanceofhtml
iframeelement.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 html
iframeelement allows you to fake a touch event and send it to the browser <
iframe>'s content.
... syntax instanceofhtml
iframeelement.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 html
iframeelement lets you request a screenshot of a content <
iframe>, scaled to fit within a specified maximum width and height.
... syntax var instanceofdomrequest = instanceofhtml
iframeelement.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 html
iframeelement is used to request the current visible state of the browser <
iframe>.
... syntax instanceofdomrequest = instanceofhtml
iframeelement.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 html
iframeelement sets the current <
iframe> as the active frame, which has an effect on how it is prioritized by the process manager.
... syntax instanceofhtml
iframeelement.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/ns
iframeloader.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 ns
iframe a
iframe); native code only!
... void updatepositionandsize( in ns
iframe a
iframe ); parameters a
iframe the ns
iframe for the content node that owns this frameloader.
... see also content process event handling ns
iframeloaderowner ns
iframemessagelistener nsichromeframemessagemanager nsidomwindowutils ...
HTMLIFrameElement.contentWindow - Web APIs
the contentwindow property returns the window object of an html
iframeelement.
... 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 'html
iframeelement: contentwindow' in that specification.
HTMLIFrameElement.referrerPolicy - Web APIs
the html
iframeelement.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 'html
iframeelement: referrerpolicy' in that specification.
HTMLIFrameElement.addNextPaintListener()
the addnextpaintlistener() method of the html
iframeelement is used to define a handler to listen for the next mozafterpaint event coming from the browser <
iframe>.
... syntax instanceofhtml
iframeelement.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 html
iframeelement interface downloads a specified url, storing it at /sdcard/download.
... syntax var instanceofdomrequest = instanceofhtml
iframeelement.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 html
iframeelement 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 instanceofhtml
iframeelement.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 html
iframeelement indicates whether the current browser <
iframe> is the currently active frame.
... syntax var amiactive = instanceofhtml
iframeelement.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 html
iframeelement interface retrieves the x and y dimensions of the content window.
... syntax var instanceofdomrequest = instanceofhtml
iframeelement.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 html
iframeelement interface retrieves the manifest of an app loaded in the browser <
iframe> and returns it as json.
... syntax instanceofhtml
iframeelement.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 html
iframeelement indicates whether the browser <
iframe> is currently muted.
... syntax there are two versions of this method, a callback version: var request = instanceofhtml
iframeelement.getmuted(); and a promise version: instanceofhtml
iframeelement.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 html
iframeelement 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 = instanceofhtml
iframeelement.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 html
iframeelement gets the current volume of the browser <
iframe>.
... syntax there are two versions of this method, a callback version: var request = instanceofhtml
iframeelement.getvolume(); and a promise version: instanceofhtml
iframeelement.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 html
iframeelement 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 instanceofhtml
iframeelement.goback(); returns void.
HTMLIFrameElement.goForward()
the goforward() method of the html
iframeelement 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 instanceofhtml
iframeelement.goforward(); returns void.
HTMLIFrameElement.mute()
the mute() method of the html
iframeelement mute any audio playing in the browser <
iframe>.
... syntax instanceofhtml
iframeelement.mute(); returns void.
... example var browser = document.queryselector('
iframe'); browser.mute(); specification not in a specification.
HTMLIFrameElement.purgeHistory()
the purgehistory() method of the html
iframeelement 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 = instanceofhtml
iframeelement.purgehistory(); instanceofhtml
iframeelement.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 html
iframeelement interface is used to remove a handler previously set with the addnextpaintlistener method.
... syntax instanceofhtml
iframeelement.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 html
iframeelement sets the current volume of the browser <
iframe>.
... syntax instanceofhtml
iframeelement.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 html
iframeelement unmutes any audio playing in the browser <
iframe>.
... syntax instanceofhtml
iframeelement.unmute(); returns void.
... example var browser = document.queryselector('
iframe'); browser.unmute(); specification not part of any specification.
HTMLIFrameElement.zoom()
the zoom() method of the html
iframeelement interface changes the zoom factor of the browser <
iframe>'s content.
... syntax var instanceofdomrequest = instanceofhtml
iframeelement.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 html
iframeelement interface returns a boolean indicating whether the payment request api may be invoked on a cross-origin
iframe.
... syntax var allow = html
iframeelement.allowpaymentrequest value a boolean.
... html living standardthe definition of 'html
iframeelement: allowpaymentrequest' in that specification.
HTMLIFrameElement.setNfcFocus() - Web APIs
the setnfcfocus() method of the html
iframeelement interface sets whether an <
iframe> can receive an nfc event.
... syntax my
iframe.setnfcfocus(true); returns void.
... parameters a boolean indicating whether the <
iframe> can receive an nfc event.
HTMLIFrameElement.clearMatch()
the clearmatch() method of the html
iframeelement clears any content highlighted by findall() or findnext().
... syntax instanceofhtml
iframeelement.clearmatch(); returns void.
HTMLIFrameElement.executeScript()
the executescript() method of the html
iframeelement interface allows a specified script to be executed against a page loaded in the browser <
iframe>.
... syntax var mydomrequest = instanceofhtml
iframeelement.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 html
iframeelement highlights the next or previous instance of a search result after a findall() search has been carried out.
... syntax instanceofhtml
iframeelement.findnext(direction); return value void.
HTMLIFrameElement.getCanGoBack()
the getcangoback() method of the html
iframeelement interface is used to indicate whether it's possible to go back in the navigation history of the browser <
iframe>.
... syntax instanceofhtml
iframeelement.getcangoback() .then(function(result) { ...
HTMLIFrameElement.getCanGoForward()
the getcangoforward() method of the html
iframeelement is used to indicate whether it's possible to go forward in the navigation history of the browser <
iframe>.
... syntax instanceofhtml
iframeelement.getcangoforward() .then(function(result) { ...
HTMLIFrameElement.reload()
the reload() method of the html
iframeelement interface is used to reload the content of the <
iframe>.
... syntax instanceofhtml
iframeelement.reload(hardreload); returns void.
HTMLIFrameElement.stop()
the stop() method of the html
iframeelement interface is used to stop loading the content of the <
iframe>.
... syntax instanceofhtml
iframeelement.stop(); returns void.
nsIIFrameBoxObject
layout/xul/base/public/nsi
iframeboxobject.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 html
iframeelement interface specifies the content security policy that an embedded document must agree to enforce upon itself.
... syntax var csp = html
iframeelement.csp html
iframeelement.csp = csp value a content security policy.
HTMLIFrameElement.featurePolicy - Web APIs
the featurepolicy read-only property of the html
iframeelement interface returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific frame.
... syntax var policy = html
iframeelement.featurepolicy value a featurepolicy object that can be used to inspect the feature policy settings applied to the frame.
HTMLIFrameElement.src - Web APIs
the html
iframeelement.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 'html
iframeelement: src' in that specification.
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 html
iframeelement interface.
...And 62 more matches
Index - Web APIs
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, ns
iframe* 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.
... */ ns
iframe* 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(ns
iframe* aframe, const nsrect& aunavailablespace); /** * resize the rectangular region associated with aframe by the specified * deltas.
...And 14 more matches
Using the 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.
... 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 html
iframeelement 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
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 ns
iframescriptloader 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 ns
iframeloader 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 ns
iframe hierarchy.
...each content node corresponds to one or more ns
iframe, 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 ns
iframe.
...And 3 more matches
Index - Archive of obsolete content
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
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
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
ns
iframe::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 ns
iframe::getparentstylecontextframe.
...(i'll call this the data-struct-based hint mechanism.) caller of ns
iframemanager::computestylechangefor processes the change list, which has been built to avoid duplication.
... bugs due to failure to call ns
iframe::didsetstylecontext.
Mozilla accessibility architecture
html elements ask the node's primary frame for an accessible via ns
iframe::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 → ns
iframe::getaccessible() (if html), which either return nothing or → nsiaccessibilityservice::create[inserttypenamehere]accessible() → operator new, which finally constructs the object.
... whether via nsiaccessibleprovider::getaccessible() or ns
iframe::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 html
iframeelement.findall(), html
iframeelement.findnext(), and html
iframeelement.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
ns
iframe 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 ns
iframe of that document.
... if not (or if the root ns
iframe is not available for some reason), this method returns nsnull.
...ns
iframe 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
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 html
iframeelement.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 ns
iframescriptloader 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 ns
iframescriptloader 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 ns
iframescriptloader 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: ns
iframescriptloader 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: ns
iframescriptloader 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 ns
iframescriptloader 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 ns
iframe), although a pair of frames represents table formatting objects.
... dynamic changes describe nsframemanager::reresolvestylecontext and ns
iframe::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 ns
iframe 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 'html
iframeelement: 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
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: html
iframeelement), 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); ...
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 get
iframedocument(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(a
iframe){ this.meditordocument = null; this.m
iframeelement = null; // argument is a string, therefore an id if ( (typeof(a
iframe) == "string") && (document.getelementbyid(a
iframe).tagname.tolowercase()=="
iframe") ){ this.m
iframeelement = document.getelementbyid(a
iframe); } else if( (typeof(a
iframe)=="object") && (a
iframe.tagname.tolowercase() == "
iframe") ){ this.m
iframeelement = aifr...
...ame; } else { throw "argument isn't an id of an
iframe or an
iframe reference"; } if (this.m
iframeelement.contentdocument){ // gecko this.meditordocument = this.m
iframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocument = this.m
iframeelement.contentwindow.document; this.meditordocument.designmode = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.m
iframeelement.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 to
iframe 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 ns
iframe 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 ns
iframe 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: ns
iframemessagemanager 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 ns
iframeloader ns
iframemessagelistener ...
nsIContentView
content/base/public/ns
iframeloader.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 ns
iframe aframe, in print32 inoffset, in nspointref apoint); native code only!
... void getcachedframeoffset( in ns
iframe 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
inknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2ns
iframeloaderns
iframeloaderownerns
iframemessagelistenerns
iframemessagemanagerns
iframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpu...
...pgradelistenernsiidnservicensi
iframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservicensilogininfonsiloginmanagernsiloginmanagercryptonsiloginmanageriemigrationhelpernsiloginmanagerprompternsiloginmanagerstoragensiloginmetainfonsimimeinputstreamnsimacdocksupportnsimarkupdocumentviewernsimemorynsimemorymultireporternsimemorymultireportercallbacknsimemoryreporternsimemoryreportermanagernsimenuboxobjectnsimessagebroadcasternsimessagelistenernsimessagelistenermanagernsimessagesendernsim...
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.
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 html
iframeelement 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 'html
iframeelement: 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
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
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
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), html
iframeelement.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
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
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
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.
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.
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.
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.
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.
Interaction between privileged and non-privileged pages - Archive of obsolete content
var targetdoc = null; function onload() { var
iframe = document.getelementbyid("content
iframe"); 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...
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/nsbid
iframes.cpp subclass of nsframe with additional method setoffsets, to adjust mcontentoffset and mcontentlength during bidi processing nsdirectionalframe layout/generic/nsbid
iframes.cpp subclass of nsframethis is a special frame which represents a bidi control.
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.
src - Archive of obsolete content
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 ...
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
« xul reference home [ examples | attributes | properties | methods | related ] similar to a window, except it should be used for xul files that are to be loaded into an
iframe.
toolbar - Archive of obsolete content
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...
CSS - Archive of obsolete content
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...
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).
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 ...
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?
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 ns
iframescriptloader nsimessagelistenermanager nsimessagebroadcaster nsimessagesender nsisyncmessagesender nsicontentframemessagemanager nsiprocessscriptloader ...
Chrome-only API reference
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 ns
iframe::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 ns
iframescriptloader 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 ns
iframe, 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.
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 ns
iframescriptloader interface.
nsIContentViewManager
content/base/public/ns
iframeloader.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 ns
iframeloader 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.).
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 ns
iframemessagelistener.
Document.cookie - Web APIs
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
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: 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.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
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
note: in edge only, calling document.write() more than once in an <
iframe> causes the error "script70: permission denied".
Element.name - Web APIs
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...
Event.timeStamp - Web APIs
example html <p> focus this
iframe and press any key to get the current timestamp for the keypress event.
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 html
iframeelement 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
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.
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[...
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.
Request.mode - Web APIs
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
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.
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
note also that close() has no effect when called on window objects returned by html
iframeelement.contentwindow.
Window.content - Web APIs
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
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: 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
when a window is loaded in an <
iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.
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.
Web APIs
lcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils html
iframeelement 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.
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 ...
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
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
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.
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...
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
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
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
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
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
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
the best way to get access to the document representing an svg document is to look at html
iframeelement.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.