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-03T16:40:59.717

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/

edited Aug 03 '13 at 16:40

answered Feb 22 '12 at 17:19

Juanma

1,651
1
11
15

Thanks that worked! But how do I add a url into it so that it doesn't just say about:blank? – FairyQueen Feb 22 '12 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 '12 at 17:40
Glad to here that. Set my question as OK and my job is done here :) – Juanma Feb 22 '12 at 18:00
2

Is there any possibility of inserting the hole html (like the following structure instead of putting from the body ``) – Thirumalai murugan Mar 04 '14 at 12:17
Sorry Thirumalai, I don't understand your question. – Juanma Mar 19 '14 at 21:36
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 '16 at 20:25

score 88 · Answer 2 · answered Feb 22 '12 at 17:01

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 '12 at 17:01

Emre

1,239
9
7

12

This works better than the jQuery solution because you can write an entire HTML document, including the doctype and `` tags. – quietmint May 31 '13 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 '16 at 04:23
clean and simple solution – Saurabh Solanki Dec 09 '17 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](https://stackoverflow.com/a/39522743/8990184) – Euler Ribeiro Sudbrack May 11 '18 at 03:04
Didn't seem to work for me in Chrome 70 - opens new tab – DropHit Nov 17 '18 at 19:10

score 25 · Answer 3 · edited Dec 10 '14 at 16:36

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 '14 at 16:36

David Passmore

6,089
4
46
70

answered Nov 12 '13 at 17:37

Sablefoste

4,032
3
37
58

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 '14 at 08: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 '14 at 13:12
1

document.write() always returns undefined, so the chained code always calls undefined.close() and always throws an error. – jjrv Jun 04 '14 at 15:24
in the good old days the window.open parameters couldnt have spaces neither :P – joe May 19 '17 at 09:35

Hasan A Yousef · Answer 4 · 2017-01-06T03:24:09.570

3

try:

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

edited Jan 06 '17 at 03:24

answered Dec 22 '16 at 10:48

Hasan A Yousef

22,789
24
132
203

Works in chrome 70 – DropHit Nov 17 '18 at 19:11
the question specifically asked for a solution using jquery. – SouvikMaji Jun 21 '19 at 09:17

score 2 · Answer 5 · answered Nov 21 '19 at 09:10

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!

answered Nov 21 '19 at 09:10

Tejpal Sharma

432
6
14

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 '20 at 10:53
1

@D.Petrov this has already been discussed in this thread, hope that help. https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write – Tejpal Sharma Nov 15 '22 at 08:00

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

5 Answers5

Linked