How to Load an Internal Webpage in an iFrame
An iframe is a section of an HTML document that loads another web page inline. Loading an internal webpage in an iframe is helpful when a developer or designer wants to display content such as contact forms, product descriptions or photo galleries inside the containing page. Iframes allow for easy editing of the inserted content, which is useful if the content changes on a regular basis, such as photo galleries on Realtor websites.
Other People Are Reading
Instructions
-
-
1
Launch a text editor and open the HTML document which will contain the iframe. Notepad is the text editor installed with Windows operating systems and TextEdit is the default Mac editor. Both of these are free and easy to use.
-
2
Determine where the iframe will be located on the page. This depends on the design of the page. A small iframe, such as that for an RSS feed, can be located in a sidebar. A larger page, such as a contact form, requires more space and should be in the middle of the page. The dimensions of the container should allow for the entire iframe document.
-
-
3
Insert the opening and closing iframe tags with the error message inside the tags: <iframe> Your Browser Doesn't Support Frames. </iframe>. The tags load the iframe into the page. The attributes for the tag go inside the opening tag. The error message will display only if the users browser doesn't support iframes and is important for the users to know that something has gone wrong.
-
4
Locate the name of the iframe file and insert it into the source attribute of the iframe tag. It will look like this: <iframe src="/filename.htm"> Your Browser Doesn't Support Frames. </iframe>, where "/filename.html" is the name and location of your iframe file. The forward slash indicates that the file is stored in the same directory as the current web page.
-
5
Determine the height and width of the iframe area then add that to the opening tag. It looks like this: <iframe src="/filename.html" width="100px" height="100px"> Your Browser Doesn't Support Frames</iframe>, where "100px" is the height or width of the iframe. Percentages can also be used in the height and width attributes. Change that to the dimensions required for the page design. If the page inside the iframe is bigger than the size attributes in the tag, the user will see scrollbars on either side of the iframe.
-
6
Save the file and open it with a web browser. Test the page and then make changes to the frame as needed. If everything looks good, upload it to the directory on a web server where the iframe page is located. Place the file in the same directory as the iframe file. This insures that the iframe won't load a "Page Not Found" error message if the browser can't locate the file referenced by the "src" attribute.
-
7
Launch a browser and navigate to the web page just uploaded. The iframe will load automatically when the page loads.
-
1
Tips & Warnings
Premium HTML editors, such as Dreamweaver, can be used to add the iframe. These programs highlight the opening and closing tags, so they may be preferred for novice designers.
Right click on the file to open it in a browser. You'll be able to debug whatever design flaws you discover before uploading it to a live site.
Make sure the path to the iframe HTML document is the correct in the src attribute.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
