How to change CSS from a webpage contained in an object tag? (Xhtml, jquery)

Question

I am having a problem with jQuery and XHTML.

Basically, I have an object tag that contains a web page in a data attribute. Now I want that when I click the button, I get this web page and dynamically modify the CSS file that it is currently using.

I tried to get the page using jquery, but all I get is the object itself, not the web page 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>

Thank!!:)

Answer 1

You can navigate to objects in XHtml pages using the following jQuery snippet:

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

If you want to do the same with an IFrame, use this jQuery piece:

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

, .

Answer 2

, , - html-? ? ? iFrame.

Answer 3

Just replace <object data=...>with <iframe src=...>. Browsers implement objects such as frames anyway, so a fancy solution does not buy you anything but unnecessary problems.

Also the type is text/htmlnot suitable for XHTML. I bet you are sending HTML files with inconsistent DOCTYPE .