web-dev-qa-db-fra.com

Ouvrir la fenêtre en JavaScript avec HTML inséré

Comment pourrais-je ouvrir une nouvelle fenêtre en JavaScript et insérer des données HTML au lieu de simplement créer un lien vers un fichier HTML?

javascripthtmlinsert
41
williamtroup

Vous pouvez utiliser window.open pour ouvrir une nouvelle fenêtre/onglet (selon les paramètres du navigateur) en javascript.

En utilisant document.write, vous pouvez écrire du contenu HTML dans la fenêtre ouverte. 

29
rahul

Je ne vous recommanderais pas d'utiliser document.write comme le suggèrent d'autres personnes, car si vous ouvrez deux fois cette fenêtre, votre code HTML sera dupliqué deux fois (ou plus).

Utilisez innerHTML à la place

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";
74
artnikpro

Lorsque vous créez une nouvelle fenêtre à l'aide de open, il renvoie une référence à la nouvelle fenêtre. Vous pouvez utiliser cette référence pour écrire dans la nouvelle fenêtre ouverte via son objet document.

Voici un exemple:

var newWin = open('url','windowName','height=300,width=300');
newWin.document.write('html to write...');
14
Oded

Vous pouvez ouvrir une nouvelle fenêtre popup en utilisant le code suivant:

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

Ensuite, vous pouvez ajouter du HTML en utilisant à la fois myWindow.document.write(); ou myWindow.document.body.innerHTML = "HTML";

Ce que je recommanderai, c’est que vous créez d’abord un nouveau fichier html avec n’importe quel nom . Dans cet exemple, j’utilise 

newFile.html

Et assurez-vous d’ajouter tout le contenu de ce fichier, tel que bootstrap cdn ou jquery, désigne tous les liens et scripts. Puis faites une div avec un identifiant ou utilisez votre corps et donnez-lui un id. dans cet exemple, j'ai donné id="mainBody" à ma balise newFile.html <body>

<body id="mainBody">

Puis ouvrez ce fichier en utilisant 

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

Et ajoutez ce que vous voulez ajouter à votre balise body. en utilisant le code suivant

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

c'est aussi simple que ça.

5
Saurabh Pathak

Vous pouvez également créer une page "example.html" contenant le code HTML souhaité et attribuer à cette page l'URL comme paramètre de window.open

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