Latest TweetsNew version of Disable Gutenberg includes options to disable for specific theme templates and/or post/page IDs. wordpress.org/plugins/disable-…
Perishable Press

Embed External Content via iframe and div

By using an <iframe> within a <div>, it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works on any modern browser, as well as any old browser that understands both <div> and <iframe> tags.

Plug-&-play

Simply add the following code to your document and style according to your specific needs:

<div style="position:absolute; left:77; top:77; width:377; height:377; clip:rect(0,381,381,0); background:#FFF;">

 <iframe src="http://www.google.com/" width="377" height="377" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">
 </iframe>

</div>

Commented version

Here is the code again, this time commented with explanatory information:

<div style="
   clip: rect(0,381,381,0); // right-clip equal to div width plus total border width
                            // bottom-clip equal to div height plus total border height
   position:absolute;       // used for positioning and may or may not be required
   background: #FFF;        // background color of div may or may not be seen
   height: 377;             // height of window (div) that contains the iframe content
   width: 377;              // width of window (div) that contains the iframe content
   left: 77;                // absolute position of window (div) from the left edge of browser
   top: 77;                 // absolute position of window (div) from the top edge of browser
">

<iframe 
   src="http://google.com/" // location of external resource 
   width="377"              // width of iframe should match the width of containing div
   height="377"             // height of iframe should match the height of containing div
   marginwidth="0"          // width of iframe margin
   marginheight="0"         // height of iframe margin   
   frameborder="no"         // frame border preference
   scrolling="yes"          // instructs iframe to scroll overflow content
   style="
      border-style: solid;  // border style
      border-color: #333;   // border color
      border-width: 2px;    // border width
      background: #FFF;     // background color
">
</iframe>

</div>

Please note that many of the tag attributes (e.g., position, width, height, etc.) may be removed the (X)HTML markup and included externally by adding the appropriate id hooks (e.g., id="division" and id="iframe") and styling via an external CSS document.

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
26 responses
  1. Hi,

    This looks like a thread I need, but want to do a mixture of iframe and normal frame “look”.
    In other words I need to add an external guestbook within a template layout inside a DIV(still with me?). I currently use real frames and load the guestbook as a framepage, but the new DIV layout produces 2 scrollers (one in the iframe and one for the page).

    Is there a way to simlaute the real frames method within the webtemplate using DIV/iframe?

    Thanks,
    Kev

  2. I am hoping that someone can help me. I am using a fieldset menu and would like to target an iframe in an external page, so that when the user navigates to that page, the iframe will be different depending on which option was chosen. Can that be done? I am guessing I need a bit of javascript. Any ideas would be great. Thank you.

[ Comments are closed for this post ]