Changing the stylesheet of a nested page at runtime

Question

First off, I apologize if this doesn't make sense. I'm new to XHTML, CSS and JavaScript.

I gather that in XHTML, the correct way to have a nested page is as follows (instead of an iframe):

<object name="nestedPage" data="http://abc.com/page.html" type="text/html" 
width="500" height="400" />

If I have a nested page like that - is it possible to change the stylesheet used by the nested page at runtime using JavaScript in the parent page? Ideally this would happen immediately so that the nested page would never be visible with its original stylesheet.

Please assume that you do not have control of the original source code of the nested page, yet it is on the same domain (don't ask)

Answer 1

If the nested page is outside your domain, cross-domain restrictions will prevent you from fiddling with its stylesheet/html, I'm afraid.

Answer 2

It's not possible if the nested page is on another domain, javascript won't allow acces to it because of SOP (Same Origin Policy)

Answer 3

OK, I might be stupid, but don't you use <iframe>s for something like that?

Answer 4

Thanks for the quick answers - It is actually on the same domain in this case. I've updated the question.

Answer 5

I'd suggest using an iframe for this, I don't know if the object-way of doing this is supported as well.

Anyway, after the page from the same domain has loaded, you can access all its properties via javascript. For example, in jQuery, you'd use to change the css-file.

$("link [rel=stylesheet]", myFrame).attr('href', <new-url>);

with myFrame a reference to your iframe object.

Answer 6

d = document.getElementsByTagName('object').namedItem('nestedPage').getContentDocument();
d.styleSheets[d.styleSheets.length].href = 'whereever';

WARNING: hasn't been tested in all browsers.

Answer 7

A couple of pointers.

I did some research on this a while ago and found some tricky browser issues and also some good solutions and suggestions on Quirksmode and IIRC Dojo mailing lists. It resulted in the following library function to apply CSS, which I've tested in the major browsers:

function applyCSS(css) {
  // http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html
  if (BrowserDetect.browser=="Safari" || BrowserDetect.browser=="Opera") { /* good for FF too */
    var styleNode = document.createElement("style");
    styleNode.setAttribute("type", "text/css");
    styleNode.appendChild(document.createTextNode(css)); 
    head.appendChild(styleNode); 
  } else {
    var div = document.createElement("div");
    div.innerHTML = "<p>x</p><style>"+css+"</style>";
    document.body.appendChild(div.childNodes[1]);
  }
}

If you do end up doing this inside an iframe, this trick might help (from TiddlyWiki code):

var doc = iframe.document;
    if(iframe.contentDocument)
     doc = iframe.contentDocument; // For NS6
    else if(iframe.contentWindow)
     doc = iframe.contentWindow.document; // For IE5.5 and IE6
    // Put the content in the iframe
    doc.open();
    doc.writeln(content);
    doc.close();

The code above generates a new iframe with some content in it. If you only output the iframe once and you know the CSS already, you could just send a tag down when you output the iframe.

Answer 8

If we're on the same domain, use XMLHTTPRequest to load it up, slam the response text into a hidden DIV with innerHTML, clone the BODY node of the hidden div to wherever you want the content, and then delete the hidden div.