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

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, ...

article image
»

How to Use jQuery to Create Blinking Text

Blinking text is one of those cool features that you never actively ...

article image
»

Convert Images to Black and White using jQuery

Converting an image to black and white is no longer a manual event. ...

article image
»

How to Disable Right-Click Menu Using jQuery

There can be dozens of reasons why you may want to disable right ...

article image
»

How to Optimize jQuery Code for Better Performance

jQuery is the most popular client side library, in fact almost every ...

article image
»

Using Head.js to Load All Your JavaScript

In the past few years, client side frameworks/libraries have become ...

article image
»

How to Detect Browser Using jQuery

One of the more frustrating parts of creating a new web project is ...