Home arrow JavaScript arrow JavaScript and jQuery IFRAME Elements
JAVASCRIPT

JavaScript and jQuery IFRAME Elements


In this JavaScript tutorial, you will learn how to program and work with IFRAME elements.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
June 28, 2011
TABLE OF CONTENTS:
  1. · JavaScript and jQuery IFRAME Elements
  2. · Creating an iframe with JavaScript

print this article
SEARCH DEVARTICLES

JavaScript and jQuery IFRAME Elements
(Page 1 of 2 )

Being an evolution of the old and primitive <frameset> implementation, iframes (or inline frames) permit you to independently embed content from another web page - be it static or dynamic - into the containing or parent HTML document in a very simple fashion.

While it’s fair to admit that during the years, iframes found their place in the toolbox of many web designers (something that effectively contributed to the spread of the boundaries of their existing popularity), the truth is that with the arrival of brand new technologies such as AJAX and the still immature –yet promissory - web workers and web sockets, the shiny halo that once surrounded them has turned into a progressively opaque and vanishing glow.

In addition, there’s another strong reason that made iframes quite unpopular over time: they were wiped out from the XHTML Strict specification; if you’re sticking to “strict” when coding your own web pages, forget about using iframes, because they will make your validator (whichever you currently use) complain loud and clear.

Despite of all these drawbacks, there’s a certain number of use cases where you still might need to work with iframes. For instance, there’re some web services out there that will require you to use these elements for dumping the output that they generate. Or you might deal with legacy code that relies heavily on iframes to work and you don’t want to go through the hassles of refactoring it from top to bottom.

Considering the possibility that you might have to face some of the aforementioned hypothetical situations, in the lines to come I’ll be coding a few examples that will show you how to include iframes in your HTML documents, and how to tweak them a little bit with JavaScript as well.

Creating an introductory example: using an iframe with static content

As explained in the introduction, iframes can be used for inserting content from another HTML document into the current web page, pretty similar to what you can do with framesets. However, if you never had the chance to work with iframes and want to know how to code one, below I created a simple example, which shows how to accomplish this in a nutshell.

In this particular case, the “parent” web page has the following definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example using an IFRAME</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2.8em;
    color: #676767; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <iframe src="iframe.htm" width="80%" height="400" scrolling="auto" frameborder="0">
            <p>Oops! Your browser does not support IFRAMES.</p>
        </iframe>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

As the above code bit shows, including an iframe into an HTML document is indeed a breeze, as the process is reduced to coding the corresponding <iframe> tag along with a few additional attributes, such as “src”, “width”, “height”, “scrolling” and “frameborder”.

Of course, the attributes in question are pretty self explanatory, so pay attention to the value assigned to “src”. As you may have guessed, this one specifies the URL from which content must be embedded into the parent web page. In this case, it turns out to be a static file called “iframe.htm”, whose source code looks like this:

(iframe.htm)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is the IFRAME</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    margin: 0 0 10px 0;
    font-size: 2.8em;
    color: #00f; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
#wrapper {
    width: 400px;
    margin: 10px auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>This is the content of the iframe</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

There’s not much that can be said about this new sample file, as it only defines a few typical sections. Therefore, do something more useful and point your browser to the parent web page. If all goes as expected (and assuming that you already created the corresponding “iframe.htm” file), you should be confronted with an output similar to this one: 

That was really easy to code and read, right? In a jiffy, we managed to create a simple iframe, which dumps the content of a static file into the containing web page. Before you start playing around with the previous example and start adding to it your own tweaks though, take a closer peek at it. Even though there’s nothing wrong with this approach, it uses a transitional DTD.

In short, does this mean that it’s not possible to use iframes with XHTML Strict documents? Well, as I said before, the elements were effectively removed from the standard, yet there’s plenty of room to use them in “strict” pages, even at the expense of implementing some tricky JavaScript hacks.

Given that, in the coming section I’ll be showing you how to include the same iframe that you saw before in an XHTML strict document, but this time the element will be created with plain JavaScript.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials