EverWeb Codebox

iFrame

iFrame Code

iFrames are used to embed and display another document inside a webpage. This can be another webpage, a movie, image and so on...

You will find many examples of iFrame code on the internet but most should be ignored. A lot of the old HTML attributes are not supported in HTML5 and the only safe ones to use are height and width.

A basic iframe code looks like this...

<iframe src="URL to the file" height="800" width="600" frameborder="0"></iframe>

All browsers over the past few years support CSS3 so it's better to use inline styles because attributes like the "frameborder" in the above code are not supported nor used in modern web design.


Here's a better example of an iframe code which is made suitable for use in EverWeb by initially resetting the margin and padding to zero...

<iframe src="page-name.html" style="height:800px;width:500px;border:none;margin:0;padding:0"></iframe>

How To Use iFrames

Although iframes can be used to display almost any type of file which is uploaded to a server, this section of the website is about containers for website content so that's going to be the focus.

Go to the NEXT PAGE to find out how to create iframe content the easy way.

Create iframes quick and easy using the iFrame Widget. Click the Easy buttton to get there.

NOTE: Due to a limitation in iOS, the scrolling function doesn't work for iframes so the content is displayed full height.


If you are using an iframe to display content on iOS devices such as the iPad or iPhone you need to make the height of the iframe as high as that of the content so that the vertical scrollbar disappears.

Easy

How To Create Scrolling Content For Mobile Websites

The Scroller Widget will allow scrolling content on mobile devices like the iPhone/iPad.