How to Inject Custom HTML and CSS into an iframe
videos

How to Inject Custom HTML and CSS into an iframe

on Nov 21st 2011 with 80 comments
Tutorial Details
    • Difficulty: Moderate
    • Format: Screencast
Download Source Files
Demo View It Online

Ever been to a site like JSBin, where you can write HTML, CSS, and JavaScript, and then see the results in a panel to the right? An iframe is how we can accomplish this task. In today’s quick tip, I’ll show you how to inject HTML and CSS into an iframe.

Select 720p for optimal viewing.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • Sammy Moshe

    Yes. We’ve known about this for years.
    This is kid stuff.

    • Imperative

      The world has all of the programmers it will ever need. Anyone who found this useless is beneath notice.

      Did I get that right?

      Go troll somewhere else.

    • Anh Ho

      Damn Sammy, u r such a foolish and selfish one.

  • http://hellomynameisjuan.com kilinkis

    some asked how can we get the content of an iframe that loads content from another domain. i have the same problem. i need to know the height of the DOM of the loaded page

  • Matt

    Is it possible to do a javascript version? I changed

    styleTag = $(‘<style></style>’).appendTo(contents.find(‘head’));

    to

    styleTag = $(‘<script></script>’).appendTo(contents.find(‘head’));

    but it didn’t work, it just pasted a bunch of code on my page.

    • pery

      i try myself to inject to head or body with Element and just with injectHTML
      but without success .
      iMaybe someone knows how inject can be performed to code dynamically?

  • http://www.gelcode.co.uk bury st edmunds

    another brilliant tut guys PS matt this should work have you re checked this ?

  • nick

    it’s not working in mozilla browzer

  • http://datvo.com/ Bảo Vệ

    i never do the css like you, just make it simple ^^

  • anshit

    good

  • Emmanuel Delay

    Wow, this is great

  • Troland

    That’s so cool,just a little proble that i follow your steps that set the script with livereload.js while i have to use the snippet as
    document.write(”).

  • Brandon

    This looks awesome. I am trying to add css to a Google Calendar Iframe on my page. I want to be able to change the font-size. According to this it seems possible although I am not sure exactly how to append the css. Could anyone be of any help?

  • Nitesh Shrestha

    Awesome tutorial! Thanks Jeffrey Way…

  • http://twitter.com/johanjppaul Jp

    This is so great. Awesome host. Awesome fluid explanation, really enjoy the video!

← Older Comments