Copying styles from one window to another...

I have a script that opens up a blank popup window, then writes some content to it, like so:

var popup = window.open('', 'window_id');
popup.document.open("text/html","replace");
popup.document.writeln("some content");
popup.document.title = 'page title';
popup.document.close();

Now, in this newly opened popup window, I want to duplicate any stylesheets from the parent window. I expected this to be straightforward:

popup.document.styleSheets = window.document.styleSheets;

Unfortunately, that doesn't work because the styleSheets attribute seems to be read-only...I don't care about inline styles, just <style> and <link ref="stylesheet"> tags, so I tried using document.getElementsByTagName() , but can't find a cross-browser way to reliably rebuild said tags.

I've been banging my head for a few hours now and was hoping someone here could offer advice. Is there a simple way to do this?

evank

Newbie Poster

14 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

I can see that you have to have an external stylesheet. Then you can use:

popup.document.write('<html>');
popup.document.write('<head>');
popup.document.write('<title>my popup</title>');
popup.document.write('<link rel="stylesheet" type="text/css" href="mystylesheet.css" />');
popup.document.write('</head>');
 .....

Each document.write is a line of html code.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

5 Years Ago

Sorry, I guess I wasnt clear enough. It's not as simple as a document write, since I don't know what stylesheets the page is using ahead of time.

I need to programatically find any and all document-level styles (STYLE tags) and external stylesheets (LINK tags) from the parent window and reproduce them in the popup window.

This will be used across many sites with many differing style implementations, hence the difficulty.

evank

Newbie Poster

14 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

I thought you would be using a common stylesheet for all of the pages. If you have control over all of these web pages, you can use a common stylesheet.

Are you trying to find out about stylesheets that other programmers wrote for their own pages?

If so, you are asking for, if not the impossible, the very difficult. It's effectively reverse-engineering the other programmer's page. It's a Brobdingnagian task.

You can't know in advance what the other programmer named his styles, or what he intended to use them for.

You CAN find out the styles applied to a particular web page element, once you know the address index of that element. Use the style methods in JavaScript to find out the style values of the element in question.

e.g. This gets the page's main background color.

[code]
bgco = document.body.backgroundColor;
bgcolor = parseFloat(bgco);
[/quote]

Be aware that this works on only those browsers which use the W3C DOM. Ift fails of an older browser is used to display the page.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

5 Years Ago

Best practices aside, I don't have control of the target pages, which is why I can't hardcode styles into the javascript, and why I want to duplicate them dynamically and programmatically.

It's easy enough to grab the tags themselves as DOM objects:

var styleTags = document.getElementsByTagName('style');
var linkTags = document.getElementsByTagName('link');

And still easy to remove any link tags that aren't style-sheets:

var temp = Array();
for(i = 0; i < linkTags.length; i++) {
  if(linkTags[i].getAttribute('rel').toLowerCase() == 'stylesheet') {
    temp[temp.length] = linkTags[i];
  }
}
linkTags = temp;

What I'm having difficulty in, is reconstructing these elements. Specifically, how do I reconstruct a style tag, since I'm not sure how to get the contents of it? (innerHTML, innerText, and outerHTML don't work.)

evank

Newbie Poster

14 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

The innerHTML, innerText, and outerHTML don't work because style sheets aren't html code.

My question is, what are you going to do with the style elements if you do reconstruct them? They won't fit your pages, because you don't have the same class names.

Actually, a larger question arises: Why do you need it? Maybe if I understood what you are really trying to do with this information, I can find a better way.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

5 Years Ago

innerHTML, innerText, and outerHTML don't work.

innerHTML certainly works. Providing that you have a valid reference to the

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

This article has been dead for over three months

You