Iframe

From BC$ MobileTV Wiki
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.


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;

[1]

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

[2]


iFRAME Embedded Videos



Resources


Tutorials

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


External Links


References

  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