Embed External Content via iframe and div
By using an
<iframe> within a
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>
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.,
height, etc.) may be removed the (X)HTML markup and included externally by adding the appropriate id hooks (e.g.,
id="iframe") and styling via an external CSS document.
Just wanted to say thanks for this article… was just the info I was looking for!
I wanted to say also.. thanks. I’m doing of all things… a myspace div overlay for someone, and the question of how to implement iframes cleanly and efficiently cropped up. This helped a ton.
Thank you for the kind words — it is always great to get positive feedback!
Thanks really needed this
Thank you so much,been searching for a week on codes and random things. Now finaly one works.
This is such a god sent.
Glad to be of service, Nat!
I found another way to embed an external document without using iframes. I really do not like them: try this:
/*Changes divs to work as frames*/
overflow: auto; /* allows the div block to be scrollable */
<a href="index.html" rel="nofollow">now...</a>
<!-- ... -->
Dwayne, this looks interesting, however, I think some of the code left in your comment got munged by WordPress.. would you be so kind as to re-comment using
<code>tags to wrap each line of example markup? — Thanks :)
I was about ready to give up until I found this tip. Thanks. Unfortunately though, I’m still having trouble getting it to work when the iframe contains a flash movie. I got it working in Safari but the clip seems to be ignored in Firefox when it’s a flash movie. If I switch the src of the iframe to yahoo it works just fine. Any ideas?
I was wondering if we could show only a part of the external webpage (lets say bottom part) in the IFrame ?
Yes, I am sure it would be possible (although I have never done it), however, you may need to call upon the ancient powers of absolute positioning via CSS for the external page in order to accomplish such a task.. Good luck!