How to open a new window and insert html into it using jQuery?

Question

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?

Juanma · Accepted Answer · 2013-08-03 16:40:59Z

119

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/

edited Aug 3, 2013 at 16:40

answered Feb 22, 2012 at 17:19

Juanma

1,6611 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

FairyQueen Over a year ago

Thanks that worked! But how do I add a url into it so that it doesn't just say about:blank?

Juanma Over a year ago

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 Over a year ago

Glad to here that. Set my question as OK and my job is done here :)

Thirumalai murugan Over a year ago

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

CSQ Over a year ago

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(); ` }

|

Emre · Accepted Answer · 2012-02-22 17:01:49Z

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.

answered Feb 22, 2012 at 17:01

Emre

1,2739 silver badges7 bronze badges

5 Comments

quietmint Over a year ago

This works better than the jQuery solution because you can write an entire HTML document, including the doctype and <head> tags.

LucVH Over a year ago

not working in my chrome Version 51.0.2704.84 m. The x after window.open() return undefined so it don't have document

Saurabh Solanki Over a year ago

clean and simple solution

Euler Ribeiro Sudbrack Over a year ago

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

DropHit Over a year ago

Didn't seem to work for me in Chrome 70 - opens new tab

David Passmore · Accepted Answer · 2014-12-10 16:36:55Z

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');

edited Dec 10, 2014 at 16:36

David Passmore

6,0894 gold badges48 silver badges71 bronze badges

answered Nov 12, 2013 at 17:37

Sablefoste

4,2123 gold badges41 silver badges61 bronze badges

4 Comments

jjrv Over a year ago

That chaining is somewhat too aggressive, document.write() doesn't return anything so Chrome reports: Uncaught TypeError: Cannot read property 'close' of undefined.

Sablefoste Over a year ago

@jjrv, that isn't aggressive chaining... you should check first before the chaining... e.g., if(content!=='undefined'){x.document.open().write(content).close();}

jjrv Over a year ago

document.write() always returns undefined, so the chained code always calls undefined.close() and always throws an error.

joe Over a year ago

in the good old days the window.open parameters couldnt have spaces neither :P

Hasan A Yousef · Accepted Answer · 2017-01-06 03:24:09Z

3

try:

var x = window.open('', '', 'location=no,toolbar=0');
x.document.body.innerHTML = 'content';

edited Jan 6, 2017 at 3:24

answered Dec 22, 2016 at 10:48

Hasan A Yousef

25.3k29 gold badges155 silver badges254 bronze badges

2 Comments

DropHit Over a year ago

Works in chrome 70

SouvikMaji Over a year ago

the question specifically asked for a solution using jquery.

Tejpal Sharma · Accepted Answer · 2023-12-30 15:12:39Z

2

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');
var codeContents = document.getElementById("contentsfornewWindow").innerHTML;
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!

edited Dec 30, 2023 at 15:12

answered Nov 21, 2019 at 9:10

Tejpal Sharma

4416 silver badges14 bronze badges

2 Comments

D. Petrov Over a year ago

Do you have any idea why? How could one avoid using document.write() but still be able to load resources like images, iframes etc..?

Tejpal Sharma Over a year ago

@D.Petrov this has already been discussed in this thread, hope that help. stackoverflow.com/questions/4537963/…

Collectives™ on Stack Overflow

How to open a new window and insert html into it using jQuery?

5 Answers 5

6 Comments

5 Comments

4 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

5 Comments

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related