How to open a new window with generated javascript code?

Question

I am trying to open a new window and write some elements and javascript tag.

The code looks like,

var OpenWindow = window.open("ImagePreview.html", "mywindow","height=768,width=1024");
OpenWindow.document.write("<style type='text/css'>.normal{zoom:20%; -moz-transform:scale(0.2); cursor:pointer;}.notZoomed{zoom:20%; -moz-transform:scale(0.2); cursor:pointer;}.zoomed{zoom:100%; -moz-transform:scale(1); cursor:pointer;}</style>");
OpenWindow.document.write("<script type='text/javascript'>$(function(){$('#imageFullView').data('zoomed', false);$('#imageFullView').click(function(){$('#imageFullView').removeClass('normal');if($('#imageFullView').data('zoomed')){$('#imageFullView').removeClass('zoomed');$('#imageFullView').addClass('notZoomed');$('#imageFullView').data('zoomed', false);}else{$('#imageFullView').removeClass('notZoomed');$('#imageFullView').addClass('zoomed');$('#imageFullView').data('zoomed', true);}})");
OpenWindow.document.write("<img id='imageFullView' class='normal' src='" + data.previewImage + "' alt='img'/>");
OpenWindow.document.write("<br>");
OpenWindow.document.write("<center><a href='javascript:self.close()' target='_self'>Close</a></center>");

But the code breaks while trying to write javascript tag with code. If i remove that line code executes without breaking.

Is it not the right way to add javascript code to a page window.open() ?

How to do it using jquery?

Thanks!

Answer 1

I do not see a closing script tag in your code.

You need to break up the script tags so it does not mess up the parser of the page.

...write("<script>...</sc"+"ript>");

Why write to the new window? Why don't you just pass the information needed as querystring parameters and have the new page build the document.

Answer 2

You have forgotten the ending tag for the script.

You may have to break up the ending script tag for example by putting it in separate strings so that it doesn't end the script that is writing the script: ...</scr'+'ipt>...

Answer 3

Assuming you are writing HTML, you have two options.

1. Put the script in an external file
2. Make sure that any end tag, doesn't look like an end tag.

If you go with option 2, then change any instance of </something> to <\\/something> .

Inside a JavaScript string, the two constructs are identical.

Inside an HTML script element, </something> will terminate the script element. Since browsers tend not to implement HTML 4 correctly, it is usually only </script> that does this in practise, but you should still do this for all elements for the sake of standards compliance (and being able to use the Validator as a useful tool).

Some people will advise you to change "</script> to "<" + "/script>" instead. Do not do this. It is harder to read, harder to type, and (in the land of micro-optimisations) more bytes to download and less efficient to execute (string concatenation is relatively slow in JS).

In you are writing XHTML, then you get to deal with the wonderful world of CDATA and Appendix C instead.