Use your left/right keys to browse tutorials
Creating an iframe with JavaScript

Creating an iframe with JavaScript

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on February 24, 2009

I want to start this post by saying that I’m not a fan of using iframes, however, sometimes due to restrictions within some development environments it may be the only way to embed content into your site of blog.

So whats the point i hear you cry. This code is really only useful if your distributing and sharing widgets from your site. So say you have your own social network and you want to open up the data allow users to embed portions of your site on theirs, this code basically writes a standard iframe on the page using JavaScript, and instead of the user having to copy the whole iframe code (which can be long if you have inline-styles, and long source urls) all you need to include in your page to invoke the widget is the code below.

<!-- one line of JavaScript is all that is needed to generate the iframe. -->
<script language="JavaScript" src="/demos/javascript-iframe/javascript-iframe.js"></script>

And within the javascript file is the following code.

// Set path to the iframe file
var filePath = '';
// Setup the iframe target
var iframe='<iframe id="frame" name="widget" src ="#" width="100%" height="1" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>';
// Write the iframe to the page

var myIframe = parent.document.getElementById("frame");
// Setup the width and height
myIframe.height = 350;
myIframe.width = 960;

myIframe.src = filePath;
// set the style of the iframe = "1px solid #999"; = "8px";

And that’s it, any questions or comments leave them below.


More tutorials from Papermashup
2 discussions around Creating an iframe with JavaScript
  1. There are times you need i-frames. This does save time when developing. Thanks!

  2. John says:

    The demo goes to myspace website!!§

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.

What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.