69

I am trying to open a new window from javascript but nothing is being inserted into the html:

var callScriptText = $('#callScriptText').html();
var url = '/Action/CallScript/?callScript=';

// Open the current call script in a new window
var openWindow = window.open(url, 'callScriptPopup', 'width = 500, height = 500');
$(openWindow).html(callScriptText);

Does anyone know why?

5 Answers 5

118

Here's an example to open a new window with content using jQuery

<script>
function nWin() {
  var w = window.open();
  var html = $("#toNewWindow").html();

    $(w.document.body).html(html);
}

$(function() {
    $("a#print").click(nWin);
});​
</script>

<div id="toNewWindow">
    <p>Your content here</p>
</div>

<a href="javascript:;" id="print">Open</a>​

EDIT: For those who say that this code doesn't work, here's a jsfiddle to try it http://jsfiddle.net/8dXvt/

6
  • Thanks that worked! But how do I add a url into it so that it doesn't just say about:blank?
    – FairyQueen
    Feb 22, 2012 at 17:24
  • if you want the URL in the new window just replace the window.open with window.open('/Action/CallScript/?callScript=', 'myWin', 'width = 500, height = 500'); That will load the URL and set that name into the window. Also you can delete the line var html=$("#toNewWindow").html();
    – Juanma
    Feb 22, 2012 at 17:40
  • Glad to here that. Set my question as OK and my job is done here :)
    – Juanma
    Feb 22, 2012 at 18:00
  • 2
    Is there any possibility of inserting the hole html (like the following structure instead of putting from the body <html><head><title></title><script></script><body></body></html>) Mar 4, 2014 at 12:17
  • 1
    You can even open the print dialog, too: ` function nWin() { ` var w = window.open(); ` var html = $("#toNewWindow").html(); ` ` $(w.document.body).html(html); ` w.print(); ` w.close(); ` }
    – CSQ
    Jun 11, 2016 at 20:25
88

Try this:

var x=window.open();
x.document.open();
x.document.write('content');
x.document.close();

I find it works in Chrome and IE.

5
  • 12
    This works better than the jQuery solution because you can write an entire HTML document, including the doctype and <head> tags.
    – quietmint
    May 31, 2013 at 23:05
  • 2
    not working in my chrome Version 51.0.2704.84 m. The x after window.open() return undefined so it don't have document
    – LucVH
    Jun 13, 2016 at 4:23
  • clean and simple solution Dec 9, 2017 at 11:56
  • Thanks! @LucVH Adding to the solution, if your browser block the popup you can check it adding if(!x) alert('Enable popups please!) Source: link May 11, 2018 at 3:04
  • Didn't seem to work for me in Chrome 70 - opens new tab
    – DropHit
    Nov 17, 2018 at 19:10
25

Building upon @Emre's answer.

With javascript, you can chain, so I just modified the code to:

var x=window.open();
x.document.open().write('content');
x.close();

Also, to force it to a new window (not a new tab), give the first line dimensions. But it has to be the third argument. So change the first line to:

var x=window.open('','','width=600, height=600');
4
  • That chaining is somewhat too aggressive, document.write() doesn't return anything so Chrome reports: Uncaught TypeError: Cannot read property 'close' of undefined.
    – jjrv
    May 30, 2014 at 8:00
  • @jjrv, that isn't aggressive chaining... you should check first before the chaining... e.g., if(content!=='undefined'){x.document.open().write(content).close();}
    – Sablefoste
    May 30, 2014 at 13:12
  • 1
    document.write() always returns undefined, so the chained code always calls undefined.close() and always throws an error.
    – jjrv
    Jun 4, 2014 at 15:24
  • in the good old days the window.open parameters couldnt have spaces neither :P
    – joe
    May 19, 2017 at 9:35
3

try:

var x = window.open('', '', 'location=no,toolbar=0');
x.document.body.innerHTML = 'content';
2
  • Works in chrome 70
    – DropHit
    Nov 17, 2018 at 19:11
  • the question specifically asked for a solution using jquery.
    – SouvikMaji
    Jun 21, 2019 at 9:17
2
var codeContents = $("#contentsfornewWindow").html()
var win = window.open('', 'title', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=1000,left=200,top=70');

win.document.body.innerHTML = codeContents;

VS:

win.document.write(codeContents);

I have notice if there are iframes like youtubes videos , win.document.write loads the iframes where as document.body.innerHTML does not!

2
  • Do you have any idea why? How could one avoid using document.write() but still be able to load resources like images, iframes etc..?
    – D. Petrov
    Oct 24, 2020 at 10:53
  • 1
    @D.Petrov this has already been discussed in this thread, hope that help. stackoverflow.com/questions/4537963/… Nov 15, 2022 at 8:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.