Member Avatar for evank

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?

  • 3 Contributors
  • 6 Replies
  • 970 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MattEvans

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

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.

Member Avatar for evank

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.

Member Avatar for MidiMagic

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.

bgco = document.body.backgroundColor;
bgcolor = parseFloat(bgco);

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.

Edited by happygeek because: fixed formatting
Member Avatar for evank

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.)

Member Avatar for MidiMagic

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.

Member Avatar for MattEvans

innerHTML, innerText, and outerHTML don't work.

innerHTML certainly works. Providing that you have a valid reference to the <style> element that you want to extract; innerHTML will return the 'body' of the style; that is, any rules in the style, exactly as is is in the <style> itself. This behaviour was tested using code following this post, in Opera 9, Firefox 2, and even Internet Explorer 5**.

** EDIT: Sorry; that's Internet Explorer 6 not Internet Explorer 5...

For <link> elements, look at the 'href' attribute of a reference to any <link>, targetting only 'stylesheet' ones obviously. Some browsers (Opera 9, Firefox 2) will give you an absolute URL to the stylesheet; others may not be as helpful (IE5** just gives the href as specified in the link href). Depending on what you want to DO with the style information, will determine what to do with the href. In my example code below, I could use the href in one of my own <links>, and it would be like making any other (remote) stylesheet link. IF you wanted to read the content at a href; you might hit problems, specifically, Javascript wont permit you to download and inspect information from a domain other than that on which the script is a resident. The only way to get around that ( unless there IS a way speficially for stylesheets) , would be to use some kind of interim server side code; perhaps an XMLHTTP request asking your own server to download the CSS document and return the result to Javascript.

Which leads onto; why do anything like this in Javascript? You might want to try using something like Perl to download and dissect pages on your server; it would not be an enourmas task.

The pasted code is a contrived example; obviously, I wrote the code, so I don't need to go searching for the <link> and <style>, hence ids.

Since you say you can already get references to the objects that you need, I can't see a problem. Of course, I don't know what you're trying to do, but it shouldn't be too difficult to take the information returned from style.innerHTML or link.href; and put it into new objects on dynamic pages; this is also done in the given example, using a hacky window.document.write approach.

As MidiMagic said; if you have no control over these pages, you wont know which elements the CSS styles relate to ( and in what order ), or what Id-ing/classing policies these developers are using, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylsheet" type="text/css" href="mystyle.css" id="linked"/>
<style type="text/css" id="inline">
body{
font-family:Arial, sans-serif;
font-weight:bold;
}
</style>
<script type="text/javascript">
function ripInlineStyle()
{
	alert(document.getElementById("inline").innerHTML);
}
function ripLinkedStyle()
{
	alert(document.getElementById("linked").href);
}
function ripAndDisplay()
{
	var inline_style = document.getElementById("inline").innerHTML;
	var targ = window.open( );
	targ.document.write( "<html><head><style type='text/css'>"  );
	targ.document.write( inline_style );
	targ.document.write( "</style></head><body>Took inline style:");
	targ.document.write( inline_style );
	targ.document.write( "<hr/> Could also have linked to:" );
	targ.document.write( document.getElementById("linked").href );
	targ.document.write("</body></html>" );
}
</script>
</head>
<body onload="ripAndDisplay();">
Page will launch a popup. Allow popup.
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.