Open window in JavaScript with HTML inserted

Question

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

User · Answer

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.

User · Answer

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     x000D   x000D  const winHtml     lt  DOCTYPE html gt  x000D       lt html gt  x000D           lt head gt  x000D               lt title gt Window with Blob lt  title gt  x000D           lt  head gt  x000D           lt body gt  x000D               lt h1 gt Hello from the new window  lt  h1 gt  x000D           lt  body gt  x000D       lt  html gt    x000D   x000D  const winUrl   URL createObjectURL  x000D      new Blob  winHtml     type   text html     x000D     x000D   x000D  const win   window open  x000D      winUrl  x000D       win   x000D       width 800 height 400 screenX 200 screenY 200  x000D     x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] Open window in JavaScript with HTML inserted

Examples related to javascript

Examples related to html

Examples related to insert