Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Using JQuery to Access Iframe Content

Friday, October 23rd, 2009

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.

^?View Code 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.

Categories: Ajax, JQuery
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

4 Responses to “Using JQuery to Access Iframe Content”

videolar Says:
January 20th, 2010 at 2:55 pm

this information help me a lot of work has
ell Says:
February 26th, 2010 at 6:01 am

jQuery access iFrame elements
after I get the
page = $(‘#idIframe’).contents()
how I run on All iframe elements (on each..)
as tree parse and get the .css or value of each element ?
admin Says:
February 27th, 2010 at 6:56 pm

You have to know that type of elements that you are trying to access (li, p, span, etc). If you are screen scraping, it is probably quicker to use a server-side language such a PHP. Even then, you still have to know what you are looking for.
rajprashanth r Says:
July 22nd, 2011 at 5:42 am

thanks a lot . this has helped . really thanks !!!!

Using JQuery to Access Iframe Content

4 Responses to “Using JQuery to Access Iframe Content”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll