How do I edit the when i am opening a new window using window.open

Question

I am trying to open a new window and pass in some generated html for a report that I am making.

I have stripped down my source code but the following is a working example of my problem.

    var windowUrl = "/";
    var uniqueName = new Date();
    var windowName = "Print" + uniqueName.getTime();
    var printWindow = window.open(
        windowUrl,
        windowName,
        "left=0,top=0,width=500,height=500"
    );

    var link = printWindow.document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
    printWindow.document.head.appendChild(link);
    printWindow.document.write('<div><section id="divToPrint"><div class="container page-sub">');
    printWindow.document.write('<p>Hello World</p>');
    printWindow.document.write('</div></section></div>');
    printWindow.document.close();
    printWindow.focus();

The write method works great, I am able to write my code I need to the DOM but it only writes to the body. Now I need to add information into the head such as styles, title etc... but I am unable to get my head code into the head tag.

Is it even possible to write the head of the new window? when it outputs the head tag looks like this even after adding the link.

<head></head>

I don't know if it is relevant but I am using ReactJS. Maybe there is some sort of alternative.

That looks like what I would expect the head tag to look like. You should provide a [mcve]. — Quentin, Sep 06 '18 at 16:07
I think you can use printWindow.document object for main element. JQuery : $(printWindow, "head").html("hi") — cemsina güzel, Sep 06 '18 at 16:10
@Quentin I have added a better sample of code which i have tested and does demonstrate the problem. Does this help you solve my problem? — Keithin8a, Sep 07 '18 at 10:47
Duplicate: https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — You are modifying the head, and then destroying it by using document.write. — Quentin, Sep 07 '18 at 10:48
@Quentin Don't take this the wrong way but I think you have misunderstood what duplicate means. This question is in no way the same as the one you linked. It doesnt even go anyway in explaining why it happens. I am using write 3 times in the sample and all 3 lines are present in the body. That being said you have answered my question in your comment effectively telling me that I need to write to the head last this is very useful and has worked and I appreciate your answer. If you would like to post that as an answer I would gladly mark it as correct for anyone else coming across this. — Keithin8a, Sep 07 '18 at 10:57
You seem to have misunderstood the duplicate. The most relevant part of the accepted answer is "DW executed after the page has finished loading will overwrite the page" (i.e. create a new page where the existing `` is gone) which explains why your problem exists and "Far better to use the safe and DOM friendly DOM manipulation methods" which is the solution to the problem. — Quentin, Sep 07 '18 at 11:01
Perhaps https://stackoverflow.com/questions/10873942/document-write-clears-page is a better duplicate — Quentin, Sep 07 '18 at 11:03
@Quentin, that second link is much better at explaining the reasoning because the question is very similar but again, not a duplicate. That question is not talking about the head. My question might be solved by the same answer but that doesnt mean it should be marked as a duplicate since it is a different question. I'm asking how do I write to the head, your answer should have been, There is nothing wrong with how you are writing to the head, the problem is that when you call document.write it is creating a new document therefore removing the head tag. See this, and this post to see why. — Keithin8a, Sep 07 '18 at 11:10

keul · Accepted Answer · 2018-09-07T11:10:37.733

0

You can access the head node of the window, then use some native JavaScript DOM APIs:

var link = printWindow.document.createElement('link');
link.href = 'whatever';
printWindow.head.appendChild(link);

Updated example based on your code:

var windowUrl = "/";
var uniqueName = new Date();
var windowName = "Print" + uniqueName.getTime();
var printWindow = window.open(
    windowUrl,
    windowName,
    "left=0,top=0,width=500,height=500"
);

printWindow.document.write('<div><section id="divToPrint"><div class="container page-sub">');
printWindow.document.write('<p>Hello World</p>');
printWindow.document.write('</div></section></div>');
printWindow.document.close();
printWindow.focus();
var link = printWindow.document.createElement('link');
link.rel = 'stylesheet';
link.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
printWindow.document.head.appendChild(link);

edited Sep 07 '18 at 11:10

answered Sep 06 '18 at 16:10

keul

6,940
14
39

That still doesnt write to the head. Your code actually didnt run because printWindow does not have a head property or createElement function, it is the document property which has the head in it. I have edited my question to contain a Minimal, Complete and verifiable example – Keithin8a Sep 07 '18 at 10:49
1

The missing of `.document` was a typo. If you don't have the `head` tag in you new document you can alweays create it... The error was you are using those API `before` the document.close(). I updated the example based on yours. – keul Sep 07 '18 at 11:09
Thanks a lot for the updated answer. Putting the head after works fine. You might want to edit it though and put explicitly what is different because sometimes people don't read the comments so it would be more useful if anyone else comes across this. Thanks again – Keithin8a Sep 07 '18 at 11:13

How do I edit the when i am opening a new window using window.open

1 Answers1