Iframe

Inline Frames (also commonly abbreviated by their HTML tag name, iFrame) are useful HTML page elements used to specify content to be displayed in a particular region on the screen.

Usage

The following is the standard syntax for iFrames:

<iframe id="myframe" name="myInlineFrame1" src="newpage.html" width="200" height="200" frameborder="0" scrolling="auto">
 TEXT FOR NON-COMPATIBLE BROWSERS HERE
</iframe>

Loading iFrames

New documents can be loaded into iframes, either by including a target attribute specifying the name of the iframe element, or through JavaScript.

Two methods are available for loading new documents via JavaScript. The first obtains a reference through the frames array and assigns the new url to the location property, as shown here:

  window.frames[iframeName].location = url;   

Using the frames array for referencing is backwards compatible and more broadly supported by older browsers. The vast majority of browsers in current use will cooperate with assigning the new url to the iframe's src property obtained via document.getElementById:

  document.getElementById(iframeId).src = url;

Load all iFrames on a given page (i.e. get all Elements via the JavaScript DOM API):

var frames = document.getElementsByTagName("iframe");
for(var i = 0, len = frames.length; i < len; i++) {
  var frame = frames[i];
  /* do something to each frame (i.e. change height/width or other attributes) */
}

Communicating Between iFrames

• Using a Hidden Iframe: http://www.dyn-web.com/tutorials/iframes/hidden.php
• AJAX Tutorial -- A Tale of Two IFrames (or, How To Control Your Browsers History): http://codinginparadise.org/weblog/2005/08/ajax-tutorial-tale-of-two-iframes-or.html
• Cross-Domain Communication with IFrames: https://softwareas.com/cross-domain-communication-with-iframes/

iFRAME Embedded Videos

• Using IFRAMES for Embedded Video: http://nunzioweb.com/misc/movies/iframe-embed_example.htm
• YouTube's default embed is now an iFrame (many online video providers to follow):

Resources

• W3C on iFrames: http://www.w3.org/WAI/PF/wiki/IFRAME
• W3schools' iFrame reference: http://www.w3schools.com/tags/tag_iframe.asp
• IFRAME - Inline Frames reference: http://htmlhelp.com/reference/html40/special/iframe.html
• Nunzio's IFRAME Examples: http://nunzioweb.com/iframes-example.htm

Tutorials

• iFrame Tutorial: http://www.designplace.org/tutorials.php?page=1&c_id=1
• Iframe loading techniques and performance: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?%3E
• Fallback for Blocked iframes: A (Crude) Solution With Vue.js: https://dzone.com/articles/fallback-for-blocked-iframes-a-crude-solution-with
• Force Page into an Iframe: http://javascript.about.com/library/bliframe.htm
• set target frame for jumpURL function: http://bytes.com/forum/thread152460.html
• Using inline frames(iframe elements)to embed documents into HTML documents: http://www.cs.tut.fi/~jkorpela/html/iframe.html
• Emulate xHTML Strict – Compliant iFrames & Using jQuery: http://www.ninjaswithjetpacks.com/posts/28/xhtml-strict-iframes-using-jquery
• Unobtrusive iFrame with JQuery: http://33rockers.com/2006/12/05/unobtrusive-iframe-with-jquery/

• Dynamic iframe height: http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/14810/531000#post531000
• Iframe SSI script II - dynamic resizing iFrames and loading/resizing new content: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
• jQuery iFrame Sizing: http://sonspring.com/journal/jquery-iframe-sizing
• Iframe dynamically resizing with 100% Height: http://www.guymal.com/mycode/100_percent_iframe/
• Making a 100% height interface: http://www.thefutureoftheweb.com/blog/100-percent-height-interface
• Resizing IFrames Across Domains: http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/
• Responsive IFRAMEs — The Right Way (CSS Only)!: https://benmarshall.me/responsive-iframes/

• Transparent iframes in All Browsers: http://www.tech-recipes.com/rx/1253/htmlcss-transparent-iframes-in-all-browsers/
• Iframe transparent background: http://stackoverflow.com/questions/1234127/iframe-transparent-background
• How can I position a div over two iframes where one iframe has external (different domain) content?: https://stackoverflow.com/a/382729

• Positioning IFRAME content (scroll offsets): http://www.pasteall.org/7164/html4strict
• Parent’s styles in an iframe: http://www.phpied.com/parents-styles-in-an-iframe/
• Iframe Scroll Horizontal: http://www.btinternet.com/~st_rise/main/mainfram.htm?../webplus/iframes/iframe_anchor_scrollh.htm
• Disabling Horizontal Scroller In Iframe?: http://www.knowledgesutra.com/forums/topic/9840-disabling-horizontal-scroller-in-iframe/page__p__138345?s=5bb0716b2edb6d029dff4a3cd09ef26a#entry138345

• The iframe cross-domain policy problem: https://www.cakemail.com/blog/the-iframe-cross-domain-policy-problem/
• Cross-Domain Communication with IFrames: http://softwareas.com/cross-domain-communication-with-iframes/
• Invoking JavaScript code in an iframe from the parent page: https://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page?rq=1
• Communication to and from Iframes: http://www.dyn-web.com/tutorials/iframes/refs.php

• Remote Scripting in an iFrame, using JavaScript, AJAX or XML-RPC: http://www.oreillynet.com/pub/a/javascript/2002/02/08/iframe.html
• AJAX Iframe Requests: http://www.webreference.com/programming/javascript/understanding-ajax2/
• Apple's approach to Remote Scripting in an iFrame: http://developer.apple.com/internet/webcontent/iframe.html
• More on Remote Scripting: http://www.ashleyit.com/rs/techniques.htm
• Remote Scripting - Moving Data From an iframe to the Parent: http://www.pxl8.com/iframes_3.html
• Submit Form Inside Iframe via the Parent Window: http://www.bigresource.com/JAVASCRIPTS-submit-form-in-iframe-from-parent-window-x5x3bT53.html#yhkK9IXX
• Post Data to an iframe: http://css-tricks.com/snippets/html/post-data-to-an-iframe/
• Remote Scripting - Moving Object Level Data Across Frames: http://www.pxl8.com/iframes_4.html
• Accessing iFrame content from a top (parent) frame: http://www.dynamicdrive.com/forums/archive/index.php/t-29359.html
• How to get the body's content of an iframe in Javascript?: https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript

• Loops in Javascript / monitoring objects for updates (.vs. proper solution of using Event Listeners): https://stackoverflow.com/questions/24726672/loops-in-javascript-monitoring-objects-for-updates
• iFrame src change event detection?: https://stackoverflow.com/questions/2429045/iframe-src-change-event-detection/24726977#24726977
• Links inside iframe (not in popup) doesnt work: https://stackoverflow.com/questions/16929334/links-inside-iframe-not-in-popup-doesnt-work
• Detect mouse and keyboard events in iframe with embedded PDF: https://stackoverflow.com/questions/15669584/detect-mouse-and-keyboard-events-in-iframe-with-embedded-pdf
• iframe event activity/timeout (remote domain): https://bytes.com/topic/javascript/answers/563333-iframe-event-activity-timeout-remote-domain
• Detect mousemove when over an iframe?: https://stackoverflow.com/questions/5645485/detect-mousemove-when-over-an-iframe/38442439#38442439

• Preventing Frame Busting and Click Jacking (UI Redressing): http://coderrr.wordpress.com/2009/02/13/preventing-frame-busting-and-click-jacking-ui-redressing/
• We Done Been ... Framed!: http://www.codinghorror.com/blog/2009/06/we-done-been-framed.html
• Combating ClickJacking With X-Frame-Option: http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
• Using JS how can I stop child Iframes from redirecting or at least prompt users about the redirect: http://stackoverflow.com/questions/1794974/using-js-how-can-i-stop-child-iframes-from-redirecting-or-at-least-prompt-users
• Prevent White Flash While iFrame Loads: http://css-tricks.com/prevent-white-flash-iframe/
• Cross-domain iFrame Resizing: http://css-tricks.com/cross-domain-iframe-resizing/

External Links

• wikipedia: Iframe
• Youtube iframe embedding could herald an HTML5 future: http://www.theinquirer.net/inquirer/news/1938801/youtube-iframe-embedding-herald-html5-future
• iFrames and iPhones: http://www.smashinghtml5.com/2011/01/03/iframes-and-iphones/
• jQuery -- Load Page in a Div: http://www.devcurry.com/2011/07/jquery-load-page-in-div.html
• Hovering span disappears when mousing over an iframe inside of it?: https://stackoverflow.com/questions/41050383/hovering-span-disappears-when-mousing-over-an-iframe-inside-of-it
• Check if PARENT window of iFrame is also an iFrame: https://stackoverflow.com/questions/4594492/check-if-parent-window-is-iframe-or-not
• How to disable iframes in browsers: https://superuser.com/questions/608296/how-to-disable-iframes-in-browsers/1216073
• The Magical <iframe> Tag - An Introduction: http://dwuser.com/education/content/the-magical-iframe-tag-an-introduction/
• Is there a way to have content from an IFRAME overflow onto the parent frame?: https://stackoverflow.com/questions/176572/is-there-a-way-to-have-content-from-an-iframe-overflow-onto-the-parent-frame (no because of Security reasons... and other stuff)
• Obsolete frameborder and scrolling attributes for iframe: http://support.moonpoint.com/network/web/html/css/iframe-obsolete-elements.php

See Also

HTML | HTML5 | Video | Object Embed | OEmbed