Using JQuery to Access Iframe Content

Ran into an interesting problem today when trying to access iframe content using JQuery. I kept getting an uncaught exception error when trying access style attributes for content within the iframe.

JQuery makes accessing iframe content quite a simple process. Let’s say I have a div (id=’myBook’) in a file named thisbook.html.

<div id="myBook"></div>

In a parent file (index.html), we create an iframe:

To access the myBook div from the index.html page:

?View Code JAVASCRIPT
var book = $('#bookFrame').contents().find('#myBook');

So, my problem. I am working on a JQuery plugin that requires an iframe.

?View Code JAVASCRIPT
if (opts.iframe.src) {
	iframe = $this.append($('<iframe src="'+opts.iframe.src+'" id="bookIframe" name="bookIframe"></iframe>').css({"width":$this.width(), "height": $this.height(), "border": "0px"}));
	$('#bookIframe').load(function() {
		page = $('#bookIframe').contents().find('.'+opts.page_class)[0];
	});
} else {
     page = $('.'+opts.page_class)[0];
}

If the frame.src option exists, create an iframe.

?View Code JAVASCRIPT
iframe = $this.append($('<iframe src="'+opts.iframe.src+'" id="bookIframe" name="bookIframe"></iframe>').css({"width":$this.width(), "height": $this.height(), "border": "0px"}));

On load of the iframe get the first element of the array returned by find.

?View Code JAVASCRIPT
page = $('#bookIframe').contents().find('.'+opts.page_class)[0];

If opts.iframe.src is null, page will be the first element on the existing page (index.html)

?View Code JAVASCRIPT
page = $('.'+opts.page_class)[0];

This works fine, but I ran into a problem when I tried to access page attributes like CSS styling.

?View Code JAVASCRIPT
if (opts.iframe.src) {
	iframe = $this.append($('<iframe src="'+opts.iframe.src+'" id="bookIframe" name="bookIframe"></iframe>').css({"width":$this.width(), "height": $this.height(), "border": "0px"}));
	$('#bookIframe').load(function() {
		page = $('#bookIframe').contents().find('.'+opts.page_class)[0];
	});
} else {
     page = $('.'+opts.page_class)[0];
}
 
//uncaught exeption
bW = parseInt($(page).css('borderLeftWidth')) + parseInt($(page).css('borderRightWidth'));

I could not access the borderLeftWidth of the element.

Note: I could not access the elements borderWidth attribute. Don’t know why. Only tried using Firefox. Instead I had to access the borderLeftWidth and borderRightWidth. Interesting.

Anyway, after a few hours trying figure out what was causing the problem, it occurred to me that the iframe wasn’t yet loaded when I was trying to access it. So when I call:

?View Code JAVASCRIPT
bW = parseInt($(page).css('borderLeftWidth')) + parseInt($(page).css('borderRightWidth'));

Page hasn’t been loaded yet. Nothing should occur until the iframe has fully loaded:

?View Code JAVASCRIPT
if (opts.iframe.src) {
	loadIFrame();
} else {
	page = $('.'+opts.page_class)[0];
	init();
}
function loadIFrame() {
	iframe = $this.append($('<iframe src="'+opts.iframe.src+'" id="bookIframe" name="bookIframe"></iframe>').css({"width":$this.width(), "height": $this.height(), "border": "0px"}));
	$('#bookIframe').load(function() {
		page = $('#bookIframe').contents().find('.'+opts.page_class)[0];
		init();
	});
};
function init() {
	bW = parseInt($(page).css('borderLeftWidth')) + parseInt($(page).css('borderRightWidth'));
	...
}

Always remember to wait for your iframe to load before you do in any processing. Makes sense.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks