From BC$ MobileTV Wiki
Revision as of 12:58, 7 April 2021 by Bcmoney (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.


The following is the standard syntax for iFrames:

<iframe id="myframe" name="myInlineFrame1" src="newpage.html" width="200" height="200" frameborder="0" scrolling="auto">

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


iFRAME Embedded Videos



[3] [4] [5] [6]

External Links


  1. Iframes - Tutorial and Examples: http://www.dyn-web.com/tutorials/iframes/
  2. The iframe cross-domain policy problem: https://www.cakemail.com/blog/the-iframe-cross-domain-policy-problem/
  3. Myspace resizable (height) iframe applications solution: http://www.makeperl.com/2008/10/myspace-resizable-height-iframe_10.html
  4. Make iFrames Resizable: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/make-iframes-resizable/
  5. Making a resizable div in JS is not easy as you think: https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d
  6. jQuery UI -- resizable: https://jqueryui.com/resizable/
  7. Access to Iframe and its Document and Content: https://www.dyn-web.com/tutorials/iframes/refs/iframe.php

See Also

HTML | HTML5 | Video | Object Embed | OEmbed