How do I change the CSS from a web page contained in an object tag? (XHTML, jquery)

Question

Hi! I've been having a bit of a problem with jQuery and XHTML.

Basically, I've got an object tag that contains a Web Page in its data attribute. Now, what I want is that when I click a button I get this web page and dynamically change the CSS file it's currently using.

I've tried to get the page by using jquery, but all I get is the object itself, not the webpage contained in the object.

<div id = "content">
 <object id="contentPageLeft" type="text/html" data="pageReportajes1.xhtml"></object> 
 <object id="contentPageRight" type="text/html" data="pageReportajes2.xhtml"></object>    
</div>

Thanks!! :)

Answer 1

As far as I know, I've never seen anyone use an object tag to load an html page? What do you want to accomplish with this? And why does it need to be in an object tag? My first saying would be to load the page into an iFrame.

Answer 2

I did it because I searched how to insert a page inside another one and I read about the object tag.

However, if I change it to an iframe, how could I do this?

Answer 3

Simply replace <object data=...> with <iframe src=...>. Browsers implement such objects as frames anyway, so fancy solution doesn't buy you anything but unnecessary problems.

Also text/html type isn't appropriate for XHTML. I'll bet that you're sending HTML files with mismatched DOCTYPE.

Answer 4

You can get to the objects in the XHtml pages using the following piece of JQuery:

var contentPageLeft = $('#contentPageLeft')[0].contentDocument;
var itemToEdit = $(contentPageLeft).find('#idOfItemToEdit');

If you want to do the same with an IFrame use this piece of JQuery instead:

var itemToEdit = $('#contentPageLeft').contents().find('#idOfItemToEdit');

Hope this helps you.