85

How would I open a new window in JavaScript and insert HTML data instead of just linking to an HTML file?

williamtroup
  • 12,091
  • 20
  • 66
  • 95

6 Answers6

151

I would not recomend you to use document.write as others suggest, because if you will open such window twice your HTML will be duplicated 2 times (or more).

Use innerHTML instead

var win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = "HTML";
mplungjan
  • 155,085
  • 27
  • 166
  • 222
artnikpro
  • 5,026
  • 3
  • 33
  • 37
  • 4
    Good idea to use innerHTML! – NilsB Nov 03 '16 at 13:05
  • Will the **body** object be present on a newly created window? – user3245268 Apr 23 '19 at 21:35
  • 1
    Yes, it is always present on any page, even if you don't put it, the browser will auto-add it – artnikpro Apr 24 '19 at 07:52
  • 1
    Please note that if you have – Дамян Станчев Feb 25 '20 at 08:13
  • I am opening the window like this: `var win = window.open("", "Page Help", "newwindow", "width=1100, height=700, top=100, left=100"); win.document.body.innerHTML = "help_text";` But the window is full screen and has no title. Why is it not respecting my settings? – Larry Martell Aug 18 '20 at 23:44
  • @LarryMartell Try using the [``](https://www.w3schools.com/tags/tag_title.asp) tag inside `win.document.head.innerHTML` – Nanoo Oct 01 '20 at 17:54
  • @LarryMartell you're using the API wrong. See https://developer.mozilla.org/en-US/docs/Web/API/Window/open .. it takes 3 parameters, and perhaps you don't understand the second one. Often, '_blank' is used in this case but you can use any string and running the same code a second time will refer to the previously opened window. `var win = window.open("", "newwindow", "width=1100, height=700, top=100, left=100"); win.document.body.innerHTML = "This is the titlehelp_text";` works for me. – Neek Feb 09 '21 at 04:39
  • Using `width=780,height=200` makes it harder to adapt to different screen sizes. Something like `width=50%, height=20%` (if that was your thinking for 1920x1080 footprint) would be better. Just not sure how that is coded for the `window.open` function/method. In the same vein, `top="+(screen.height-400)+",left="+(screen.width-840)` would be problematic. – WinEunuuchs2Unix Feb 05 '22 at 01:01
48

You can use window.open to open a new window/tab(according to browser setting) in javascript.

By using document.write you can write HTML content to the opened window.

rahul
  • 179,909
  • 49
  • 229
  • 260
  • 1
    Also call `document.close()` after `write()` in case you have embedded JS event handler as this will trigger DOMContentLoad events. – zrkl Aug 08 '21 at 17:27
30

When you create a new window using open, it returns a reference to the new window, you can use that reference to write to the newly opened window via its document object.

Here is an example:

var newWin = open('url','windowName','height=300,width=300');
newWin.document.write('html to write...');
seveibar
  • 3,619
  • 3
  • 29
  • 30
Oded
  • 477,625
  • 97
  • 867
  • 998
20

Here's how to do it with an HTML Blob, so that you have control over the entire HTML document:

https://codepen.io/trusktr/pen/mdeQbKG?editors=0010

This is the code, but StackOverflow blocks the window from being opened (see the codepen example instead):

const winHtml = `<!DOCTYPE html>
    <html>
        <head>
            <title>Window with Blob</title>
        </head>
        <body>
            <h1>Hello from the new window!</h1>
        </body>
    </html>`;

const winUrl = URL.createObjectURL(
    new Blob([winHtml], { type: "text/html" })
);

const win = window.open(
    winUrl,
    "win",
    `width=800,height=400,screenX=200,screenY=200`
);
trusktr
  • 39,955
  • 47
  • 173
  • 247
  • Great solution, this really helped me out on a project where adding in an extra HTML file for the new window content would have been problematic. Just to add that it's worth including `` in the `` of your HTML to ensure it will render any non-Latin characters. – moloko Jul 13 '21 at 13:19
  • This is what I was looking for. This allowed me to use the 'noopener' option of window.open to prevent the new window from having access to my main window. Thanks! – jake Nov 12 '21 at 12:59
11

You can open a new popup window by following code:

var myWindow = window.open("", "newWindow", "width=500,height=700");
//window.open('url','name','specs');

Afterwards, you can add HTML using both myWindow.document.write(); or myWindow.document.body.innerHTML = "HTML";

What I will recommend is that first you create a new html file with any name. In this example I am using

newFile.html

And make sure to add all content in that file such as bootstrap cdn or jquery, means all the links and scripts. Then make a div with some id or use your body and give that a id. in this example I have given id="mainBody" to my newFile.html <body> tag

<body id="mainBody">

Then open this file using 

<script>    
var myWindow = window.open("newFile.html", "newWindow", "width=500,height=700");
</script>

And add whatever you want to add in your body tag. using following code

<script>    
 var myWindow = window.open("newFile.html","newWindow","width=500,height=700");  

   myWindow.onload = function(){
     let content = "<button class='btn btn-primary' onclick='window.print();'>Confirm</button>";
   myWindow.document.getElementById('mainBody').innerHTML = content;
    } 

myWindow.window.close();
 </script>

it is as simple as that.

Christian
  • 26,801
  • 14
  • 106
  • 152
Saurabh Pathak
  • 111
  • 1
  • 3
2

You can also create an "example.html" page which has your desired html and give that page's url as parameter to window.open

var url = '/example.html';
var myWindow = window.open(url, "", "width=800,height=600");
Tamer Durgun
  • 392
  • 2
  • 9