Papermashup

Subscribe


Tweets


"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 2 days ago

"@burgerbeartom @kycutwilson finally got around to using my free burgers for life! And we weren't disappointed. http://t.co/nJ6p2nLtg4"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Creating an iframe with JavaScript

AshleyAshley

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.

  

And within the javascript file is the following code.


// Set path to the iframe file
var filePath = 'http://www.myspace.com';
// Setup the iframe target
var iframe='';
// Write the iframe to the page
document.write(iframe);

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
myIframe.style.border = "1px solid #999";
myIframe.style.padding = "8px";

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

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 2
  • Michael J Montana
    Posted on

    Michael J Montana Michael J Montana

    Reply Author

    There are times you need i-frames. This does save time when developing. Thanks!


  • John
    Posted on

    John John

    Reply Author

    The demo goes to myspace website!!§