X

LATEST #JQUERY NEWS

How to Change iFrame Styling Using jQuery


If you’ve ever had the displeasure of working with iFrames, then you know how tedious and frustrating the process can be. Because an iFrames is just embedded HTML content that can be from any website, often when you’re working with them, the style sheets that determine how the content looks are hosted on another server. This can be a real problem, because you won’t be able to override the styling of the content using plain CSS. So colors, font-sizes, font-families, etc, within iFrames are typically very hard to change, unless you use the following snippet of jQuery code, which allows you to use the .contents() and .find() methods to select and change the styling of elements within an iFrame:

$(document).ready(function(){
 var iFrameDOM = $("iframe#frameID").contents();
iFrameDOM.find(".main").css("color", "#333");
});

What happens in the snippet above isn’t quite as complicated as it might look upon first glance. First, we set the contents of the iFrame as a variable (iFrameDOM) using the .contents() method. From there, we use the .find() method to find particular elements (in this case the element with the class .main) and change its CSS rules using the .css() method. In the example above, we changed the font color of all of the text within the .main element to a dark grey (#333).

In the example, we use the .css() method to change styling within the iFrame, but once you’ve selected the contents of the iFrame using the .contents() method, you should be able to use the .find() method in conjunction with other methods besides .css(), so don’t limit yourself. With this code, working with iFrames should be a lot easier — especially if you have small tweaks that you really need to make to the frame. For bigger or more complicated changes, you might want to see if you can locate the stylesheets and make changes from the source if at all possible, because using scripts will slow down your pages.

Recently Published

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...

article image
»

jQuery Snippets: Using jQuery to Check All Boxes

When you’ve given your users a ton of checkbox input fields ...

article image
»

Useful jQuery Code Snippets for Working with Images

Images are an essential part of any website and sometimes working ...

article image
»

How to Use jQuery to Check if Cookies are Enabled

A cookie (not the kind with chocolate chips) is a small piece of data ...

article image
»

A Beginner’s Guide to jQuery’s Selectors

We talk a lot about event methods on this site, but not so much about ...

article image
»

Add Keyboard Shortcut to Anchor Tag Using jQuery

Making a user friendly website can be quite a challenging task. There ...

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...